jqxGrid when destroy - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, destroy, DOM, filtertype input, grid, jquery grid, jqxgrid

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

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

Author

jqxGrid when destroy Posts

January 21, 2013 at 8:50 am jqxGrid when destroy #13970

zhq3k@163.com

Member

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>

January 21, 2013 at 9:14 am 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/

January 29, 2013 at 8:09 am jqxGrid when destroy #14287

zhq3k@163.com

Member

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.

January 30, 2013 at 8:15 am 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/

July 22, 2015 at 7:47 am 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?

July 22, 2015 at 9:52 am 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/

July 22, 2015 at 11:51 am 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.

July 22, 2015 at 12:07 pm 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/

Author

Posts

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

You must be logged in to reply to this topic.