This is a migrated thread and some comments may be shown as answers.

GRID Operator List Cluttering DOM

6 Answers 193 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Nate asked on 09 Mar 2015, 09:27 PM

Building a Single Page Application with several Kendo Grids.

Also using Kendo Grids in various "popups" and "tooltips".

Using Angular 1.3.14.

I've noticed that Kendo seems to be "polluting" the DOM and not removing elements.

My page on load (no grids shown yet):

<body>

<div>Load some stuff via angular</div>

<script>load some scripts</script>

</body>

As soon as I load a view with some Kendo Grids, I start to see this in my DOM:

<body>

<div>Load some stuff here with angular </div>

<script>some script tags</tag>

<div class="k-list-container k-popup k-group k-reset" data-role="popup" style="position: absolute; height: 200px; display: none;"><ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" aria-live="off" style="overflow: auto; height: 194.847999572754px;"><li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused">Is equal to</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Is not equal to</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Starts with</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Contains</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Does not contain</li><li tabindex="-1" role="option" unselectable="on" class="k-item">Ends with</li></ul></div>

<div class="k-list-container k-popup k-group k-reset" data-role="popup" style="display: none; position: absolute;"><ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" aria-live="polite" style="overflow: auto;"></ul></div>

...

</body>

For just my first view, I see ~10 `k-list-container` divs being added to the DOM. All of them are display: none.

When I expanded one of them I see:

Ok, so I figured out these k-lists must be for EACH column in each grid that I show.

However, for almost all of my grids and columns, I **DO NOT** want to show the operators item. I'm disabling it in javascript with:

filterable: {

cell: {

operator: "contains",

showOperators: false,

suggestionOperator: "contains"

}

Yet the DOM is still being created. What's worse, is when my view changes to another page (using Angular) and the grids Angular Controllers are being destroyed, etc., all these DOM elements remain...they are never being removed or cleaned out.

Furthermore, I'm using a Kendo Grid as tooltip/hover/popup with **2** columns. Every time the user hovers to display the tooltip, it's creating another TWO <div class=k-list-container> div for the columns where again, I'm setting showOperators = false. The issue is that if the user displays the tooltip say 10 or 20 times during their use of the webapp, I've not got 40 extra DOM elements that are never used AND never removed or cleaned up.

Can anyone explain what's going on here? How can I clean up the DOM? How can i prevent the creation of these elements? Is it an issue with the Kendo Angular directive not correctly removing the Operators list element from the DOM when the directive/controller is destroyed by angular?

6 Answers, 1 is accepted

answered on 12 Mar 2015, 03:38 PM

My follow-up:

Since I'm using Kendo's angular directives (e.g. `<div kendo-grid></div>'), where or how should I destroy the components?

I would've thought that once the html/page/element where I'm using my Kendo Grid goes out of scope (e.g. Angular destroys my controller's scope which is what I'm using to set/control/configure the kendo-grid), that Kendo would automatically clean itself up, no?

In other words, shouldn't Kendo Angular Components already be aware of when their parent scope is lost/destroyed and clean themselves up from the DOM? Otherwise, everywhere I use a Kendo Angular Directive I have to hook into the $destroy method and then manually call destroy on the Kendo component? Seems like I shouldn't be doing this since the Kendo components already know when they are out of scope.

Is this a possible bug with the Kendo Angular components?

Description of removing HTML elements

answered on 16 Mar 2015, 03:39 PM

Ok, so indeed Kendo does remove HTML elements from the DOM when a scope element is normally destroyed.

However, in my situation I'm trying to show a Kendo Grid as the tooltip of a Kendo Pie Chart. I am doing this by overriding the "template" function for the Pie Chart's tooltip and using angular's '$compile' function to "create" the Kendo Grid. I'm also keeping a pointer in my overall viewmodel/scope to the created tooltipChartScope so when the tooltip is showed multiple times I do not get any memory leaks.

Here is my code:

tooltip: {

visible: true,

padding: 0,

margin: 0,

// See: http://jsbin.com/ufufom/2/edit?html,css,js,output

template: function (dataItem) {

if (vm.tooltipChartScope)

vm.tooltipChartScope.$destroy();

vm.tooltipChartScope = $scope.$new(true);

vm.tooltipChartScope.options = createToolTipGridOptions(dataItem);

var ret = $compile('<div class="pieChartTooltip" kendo-grid k-options="options"></div>');

return ret(vm.tooltipChartScope);

}

},

Each time the tooltip is shown, the DOM is updated to include the list for each header column filter (that's ok):

Unfortunately, these DOM elements never get removed (I'm assuming b/c I'm calling $compile explicitly). I thought by $destroy the scope when I show a new tooltip these elements would be removed, but they are not...this list just keeps growing over and over and over again.

Is there some way I can get Kendo to drop these DOM elements?

Thanks,
Nate

answered on 16 Mar 2015, 04:45 PM

As a secondary follow-up, is there a reason why Kendo adds anything to the DOM if I explicitly set columnMenu to false?

In my settings:

...

sortable: true,

filterable: {

mode: "row"

},

columnMenu: false,

selectable: "single",

...

But the corresponding column menu HTML <ul> elements still appear in the UI, with **empty content** and **display: none**:

...

Wouldn't it be better performance wise to add no elements to the DOM if columnMenu = false?