The jqxGrid widget when created (especially when editable, sortable, and filterable are set to true) create MANY DOM Nodes and Event Listeners that are not removed by the “destroy” method. This is very easy to reproduce. Using Chrome Developer Tools you can record a memory timeline that displays both these values. Make a very simple page with one div for the grid, on a button click (or what ever method your prefer) initialize a simple grid (you will see the values rise), then proceed to “destroy” the grid, you can even use jQuery .empty() or .remove() for good measure. You will see that the DOM Node Count and Event Listener Count (some nodes, and some event listeners are removed, and a few more get cleaned up if you force a Garbage Collection) are much higher than before the grid was initialized.
Taking a heap snap shot also reveals that there are many Detached DOM Nodes still lingering (my guess is that there are still variable references to these DOM Nodes, which is why they can not be cleaned up in Garbage Collection) after the “destroy” method is called.
When adding and removing many Grids dynamically in a Single Page Application, this can cause your DOM to get very cluttered and even lead to sluggish performance.
I’ve tried examining the Grid Source Code to find the culprits to no avail, can you give any feedback on this issue?
Best Regards.
