jQuery UI Widgets Forums Grid jqxGrid when destroy

This topic contains 7 replies, has 3 voices, and was last updated by  Dimitar 8 years, 10 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • jqxGrid when destroy #13970

    It has DOM div node not been delete when call jqxgrid destroy method.

    create grid script:

    me.displayGrid = function (theme) {
    me.createAggregates();
    me.theme = theme;
    me.dataAdapter = me.createDataAdapter();
    $(me.defaultSettings.gridDiv).bind('bindingcomplete', function (event) {
    var localizationobj = {};
    localizationobj.pagergotopagestring = "Page";
    localizationobj.pagershowrowsstring = "Rows";
    localizationobj.pagerrangestring = " / ";
    localizationobj.pagernextbuttonstring = "Next";
    localizationobj.pagerpreviousbuttonstring = "pre";
    localizationobj.sortascendingstring = "Asc";
    localizationobj.sortdescendingstring = "Desc";
    localizationobj.sortremovestring = "None";
    $(me.defaultSettings.gridDiv).jqxGrid('localizestrings', localizationobj);
    if (me.bindingcompleteCustomer != null) {
    me.bindingcompleteCustomer(event);
    }
    localizationobj = null;
    });
    $(me.defaultSettings.gridDiv).jqxGrid(
    {
    width: me.defaultSettings.width,
    source: me.dataAdapter,
    theme: theme,
    autoheight: me.defaultSettings.autoheight,
    height: me.defaultSettings.height,
    pageable: true,
    altrows: true,
    virtualmode: true,
    selectionmode: me.defaultSettings.selectionmode,
    sortable: true,
    editable: me.defaultSettings.editable,
    showtoolbar: false, //true,
    columnsmenu: false,
    showdefaultloadelement: false,
    autoshowloadelement: false,
    showfiltermenuitems: false,
    showsortmenuitems: false,
    showemptyrow: true,
    showgroupmenuitems: false,
    verticalscrollbarstep: 25,
    showaggregates: me.defaultSettings.showaggregates,
    showstatusbar: me.defaultSettings.showaggregates,
    statusbarheight: 25,
    rendergridrows: function () {
    return me.dataAdapter.records;
    },
    pagesizeoptions: ['10', '20', '50', '100', '500'],
    columns: me.defaultSettings.gridColumns
    });
    };

    call destroy script:

     me.destroy = function () {
    $(me.defaultSettings.gridDiv).unbind();
    $(me.defaultSettings.gridDiv).jqxGrid('destroy');
    me.source.localdata = null;
    me.source = null;
    me.dataAdapter = null;
    };

    Not been delete DOM html at document.body node:

    <div id="listBoxjqxWidget5c78ab481ef8" style="overflow: hidden; background-color: transparent; border: medium none; position: absolute; display: none; width: 69px; height: 225px;">
    <div id="innerListBoxjqxWidget5c78ab481ef8" class="jqx-listbox jqx-listbox-darkblue jqx-reset jqx-reset-darkblue jqx-rc-all jqx-rc-all-darkblue jqx-widget jqx-widget-darkblue jqx-widget-content jqx-widget-content-darkblue jqx-disableselect" style="width: 44px; height: 129px; position: absolute; z-index: 2147483647; top: 0px; left: 0px;" tabindex="1">
    <input type="hidden" name="innerListBoxjqxWidget5c78ab481ef8" value="20">
    <div style="-webkit-appearance: none; background: transparent; outline: none; width:100%; height: 100%; align:left; border: 0px; padding: 0px; margin: 0px; left: 0px; top: 0px; valign:top; position: relative;" tabindex="0">
    <div style="-webkit-appearance: none; border: none; background: transparent; outline: none; width:100%; height: 100%; padding: 0px; margin: 0px; align:left; left: 0px; top: 0px; valign:top; position: relative;" tabindex="1">
    <div id="listBoxContentinnerListBoxjqxWidget5c78ab481ef8" style="background: none repeat scroll 0% 0% transparent; outline: medium none; border: medium none; padding: 0px; overflow: hidden; margin: 0px; left: 0px; top: 0px; position: absolute; width: 44px; height: 127px;" tabindex="2">
    <div style="outline: 0px none; overflow: hidden; width: 49px; position: relative; height: 258px;" tabindex="1">
    <div id="listitem990170655315393700" style="border: medium none; height: 25px; position: absolute; top: 0px; left: 0px;">
    <span id="spanElement" class="jqx-listitem-state-normal jqx-listitem-state-normal-darkblue jqx-item jqx-item-darkblue jqx-rc-all jqx-rc-all-darkblue" style="display: block; visibility: inherit; width: 34px;">10</span>
    </div>
    <div id="listitem9908016551280760000" style="border: medium none; height: 25px; position: absolute; top: 25px; left: 0px;">
    <span id="spanElement" class="jqx-listitem-state-normal jqx-listitem-state-normal-darkblue jqx-item jqx-item-darkblue jqx-rc-all jqx-rc-all-darkblue jqx-listitem-state-selected jqx-listitem-state-selected-darkblue jqx-fill-state-pressed jqx-fill-state-pressed-darkblue" style="display: block; visibility: inherit; width: 34px;">20</span>
    </div>
    <div id="listitem990580496282688900" style="border: medium none; height: 25px; position: absolute; top: 50px; left: 0px;">
    <span id="spanElement" class="jqx-listitem-state-normal jqx-listitem-state-normal-darkblue jqx-item jqx-item-darkblue jqx-rc-all jqx-rc-all-darkblue" style="display: block; visibility: inherit; width: 34px;">50</span>
    </div>
    <div id="listitem99015226149681890000" style="border: medium none; height: 25px; position: absolute; top: 75px; left: 0px;">
    <span id="spanElement" class="jqx-listitem-state-normal jqx-listitem-state-normal-darkblue jqx-item jqx-item-darkblue jqx-rc-all jqx-rc-all-darkblue" style="display: block; visibility: inherit; width: 34px;">100</span>
    </div>
    <div id="listitem9905819777451241000" style="border: medium none; height: 25px; position: absolute; top: 100px; left: 0px;">
    <span id="spanElement" class="jqx-listitem-state-normal jqx-listitem-state-normal-darkblue jqx-item jqx-item-darkblue jqx-rc-all jqx-rc-all-darkblue" style="display: block; visibility: inherit; width: 34px;">500</span>
    </div>
    </div>
    </div>
    <div id="verticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar jqx-scrollbar-darkblue jqx-widget jqx-widget-darkblue jqx-widget-content jqx-widget-content-darkblue" style="left: 25px; top: 0px; position: absolute; visibility: hidden; width: 15px; height: 127px;">
    <div id="jqxScrollOuterWrapverticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue" style="width:100%; height: 100%; align:left; border: 0px; valign:top; position: relative;">
    <div id="jqxScrollWrapverticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-darkblue" style="width: 17px; height: 100%; left: 0px; top: 0px; position: absolute;">
    <div id="jqxScrollBtnUpverticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-darkblue jqx-rc-t jqx-rc-t-darkblue" style="left: 0px; top: 0px; position: absolute; width: 15px; height: 15px;">
    <div class="jqx-reset jqx-reset-darkblue icon-arrow-up icon-arrow-up-darkblue"></div>
    </div>
    <div id="jqxScrollAreaUpverticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue" style="left: 0px; top: 17px; position: absolute; height: 0px; width: 15px;"></div>
    <div id="jqxScrollThumbverticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar-thumb-state-normal jqx-scrollbar-thumb-state-normal-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue jqx-rc-all jqx-rc-all-darkblue" style="left: 0px; top: 17px; position: absolute; width: 15px; height: 10px; visibility: inherit;"></div>
    <div id="jqxScrollAreaDownverticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue" style="left: 0px; top: 27px; position: absolute; height: 81px; width: 15px;"></div>
    <div id="jqxScrollBtnDownverticalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-darkblue jqx-rc-b jqx-rc-b-darkblue" style="left: 0px; top: 110px; position: absolute; width: 15px; height: 15px;">
    <div class="jqx-reset jqx-reset-darkblue icon-arrow-down icon-arrow-down-darkblue"></div>
    </div>
    </div>
    </div>
    </div>
    <div id="horizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar jqx-scrollbar-darkblue jqx-widget jqx-widget-darkblue jqx-widget-content jqx-widget-content-darkblue" style="left: 0px; top: 110px; position: absolute; visibility: hidden; height: 15px; width: 42px;">
    <div id="jqxScrollOuterWraphorizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue" style="width:100%; height: 100%; align:left; border: 0px; valign:top; position: relative;">
    <div id="jqxScrollWraphorizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue jqx-scrollbar-state-normal jqx-scrollbar-state-normal-darkblue" style="width: 100%; height: 17px; left: 0px; top: 0px; position: absolute;">
    <div id="jqxScrollBtnUphorizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-darkblue jqx-rc-l jqx-rc-l-darkblue" style="left: 0px; top: 0px; position: absolute; width: 15px; height: 15px;">
    <div class="jqx-reset jqx-reset-darkblue icon-arrow-left icon-arrow-left-darkblue"></div>
    </div>
    <div id="jqxScrollAreaUphorizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue" style="left: 17px; top: 0px; position: absolute; width: 0px; height: 15px;"></div>
    <div id="jqxScrollThumbhorizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar-thumb-state-normal-horizontal jqx-scrollbar-thumb-state-normal-horizontal-darkblue jqx-fill-state-normal jqx-fill-state-normal-darkblue jqx-rc-all jqx-rc-all-darkblue" style="left: 17px; top: 0px; position: absolute; width: 10px; height: 15px; visibility: hidden;"></div>
    <div id="jqxScrollAreaDownhorizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-reset jqx-reset-darkblue" style="left: 29px; top: 0px; position: absolute; width: 0px; height: 15px;"></div>
    <div id="jqxScrollBtnDownhorizontalScrollBarinnerListBoxjqxWidget5c78ab481ef8" class="jqx-scrollbar-button-state-normal jqx-scrollbar-button-state-normal-darkblue jqx-rc-r jqx-rc-r-darkblue" style="left: 25px; top: 0px; position: absolute; width: 15px; height: 15px;">
    <div class="jqx-reset jqx-reset-darkblue icon-arrow-right icon-arrow-right-darkblue"></div>
    </div>
    </div>
    </div>
    </div>
    <div id="bottomRightinnerListBoxjqxWidget5c78ab481ef8" class="jqx-listbox-bottomright jqx-listbox-bottomright-darkblue" style="left: 26px; top: 182px; border: medium none; position: absolute; visibility: hidden; width: 18px; height: 18px;"></div>
    </div>
    </div>
    </div>
    </div>
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    • This topic was modified 11 years, 4 months ago by  Peter Stoev. Reason: Moved to Grid Forum
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    • This topic was modified 11 years, 4 months ago by  zhq3k@163.com.
    jqxGrid when destroy #13977

    Dimitar
    Participant

    Hello zhq3k@163.com,

    Please provide us with your source code (both JavaScript and HTML) so that we may test for the reported behaviour and remember to format your code as explained in the forum topic Code Formatting.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxGrid when destroy #14287

    Hi team

    i have format my code, now I find the issue reason:

    the grid will create the new jqxcombobox control for pagesize selecting when retrieve , sort , page down, page up.

    Document body node will add more divs which id like “listBoxjqxWidgetXXXXXXXXX”. But can’t delete when jqxgrid destroy.

    jqxGrid when destroy #14331

    Dimitar
    Participant

    Hi zhq3k@163.com,

    Thank you for your feedback. We will investigate the reported issue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxGrid when destroy #74041

    francis
    Participant

    Hi team.

    I have the same problem. (jQWidgets v3.7.1 (2015-Feb))

    Did this fix the above problem?

    jqxGrid when destroy #74044

    Dimitar
    Participant

    Hi francis,

    We do not experience such an issue with the latest version of jQWidgets (3.8.1) when testing the following example: https://www.jseditor.io/?key=jqxgrid-destroy-method.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxGrid when destroy #74049

    francis
    Participant

    Hi team.

    Your link is work fine.
    I was test. but the problem was still.

    “filtertype: ‘input'”‘s DOM element(innerListBoxjqxWidgetXXXXXXX) not removed.

    : https://www.jseditor.io/?key=jqxgrid-destroy-method-1

    modified config.
    showfilterrow: true,
    filterable: true,

    columns: [{
    text: ‘First Name’,
    datafield: ‘firstname’,
    columngroup: ‘Name’,
    filtertype: ‘input’,
    width: 90
    }, {
    text: ‘Last Name’,
    columngroup: ‘Name’,
    datafield: ‘lastname’,
    filtertype: ‘input’,
    width: 90
    }, {
    text: ‘Product’,
    datafield: ‘productname’,
    filtertype: ‘checkedlist’,
    width: 170
    }, {
    text: ‘Order Date’,
    datafield: ‘date’
    ,filtertype: ‘number’,
    width: 160,
    cellsformat: ‘dd-MMMM-yyyy’
    }, {
    text: ‘Quantity’,
    datafield: ‘quantity’
    ,filtertype: ‘number’,
    width: 80,
    cellsalign: ‘right’
    }, {
    text: ‘Unit Price’,
    datafield: ‘price’,
    filtertype: ‘number’,
    cellsalign: ‘right’,
    cellsformat: ‘c2’
    }]
    });

    Thanks.

    jqxGrid when destroy #74050

    Dimitar
    Participant

    Hi francis,

    Thank you for sharing the example. We confirm the reported issue.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.