I am building a single page application an i am noticing memoryleaks in Kendo Grid
I i create a grid and then destroy the grid it seems it is not cleaning up correctly.
I have created a fiddle that demonstrates this.
I have also included a html file.
If you look in the chrome developer tools in the timeline tab after creating and destroying a grid you will see that the dom node count is growing.
Am i doing something wrong?
30 Answers, 1 is accepted
I tried to reproduce the issue, but to no avail. Could you please check the screencast and let me know what I am missing?
Kind regards,
Alexander Valchev
the Telerik team
Rank 1
I have included a screencast that shows the nodecount and eventhandlers growinging in the timeline tab of chrome developer tools.
Thanks in advance
Thank you for the screencast. We are not sure why the DOM node count increases, but we were able to reproduce the same behaviour without Kendo UI.
The code of the sample page is:
<!DOCTYPE html><html><head> <title></title> <script src="http://code.jquery.com/jquery-1.8.2.js"></script></head><body> <div id="grids"></div> <button id="btn">Button</button> <script> $("#btn").click(function (e) { $("#grids").empty().append("<div>" + new Date() + "</div>") }); </script></body></html>Here is a screencast: http://screencast.com/t/cBw8Tw3XJ54
Are you sure that the DOM node count number is correct? Probably it shows something else? Or the problem is connected with jQuery?
Regards,
Alexander Valchev
the Telerik team
Rank 1
In you example you are using jquery 1.8.x. This version of jquery has a memory leak.
Please try it with Jquery 1.9.x. and you will see that the dom nodes will not increase anymore except for the first time. that's probably because we are adding a new div.
Thanks
I forwarded the case to the developer team. The results which we observed in the timeline (DOM Node Count) are inconsistent, however we were able to track some memory leaks by taking a snapshots of the heap and inspecting the detached DOM tree elements (Profiles Tab).
I can confirm that the problem exists, however we will need more time to investigate the case. I am afraid that at present I cannot commit an exact timeframe for providing a fix.
Please accept my apology for the inconvenience caused.
Kind regards,
Alexander Valchev
the Telerik team
Rank 1
I am also facing the similar kind of issue in my grid implementation. Is this memory leak problem going to be resolved in next release (mid of this month perhaps).
I am using Kendo UI Beta v2013.1.226 which embedded jQuery v1.8.2.
Also could you please provide us pointers to reduce memory leak.
Thanks,
We will need more time to examine what exactly is going wrong. Currently I cannot provide a time term for providing a fix. I apologize for the inconvenience caused.
Regards,
Alexander Valchev
Telerik
Rank 1
I have been having this problem as well. We really need a fix for this as we have 3 grids on a long lived paged.
It appears the issue is occurring with resizable and/or selectable true. Those are the two I have been dealing with.
I am including a Chrome Timeline Screenshots based on the example code in this thread.
Thank you the feedback and for the provided information.
The team is still investigating the case. We will write back as soon as we have more information on the case.
Regards,
Alexander Valchev
Telerik
Rank 1
When applying a context-menu the click event event bound to table rows fire several times, the exact same number of "table refreshes" issued so far.
Hope this "long shot" tip can help.
Rank 1
Rank 2
Even I'm facing same issue(node count increases) when creating and destroying grid.
I'm using "2013.2.918_commercial" version of Kendo UI with jQuery version 1.9.1.
Is this issue fixed? If not then can you please tell me when you are going to fix this.
Regards,
Vinay
Rank 1
I'm having this issue as well.
Is there a solution to this?
My grid is creating tons of new dom elements all the time.
I tried it with local data and remote data (e.g. - using transport).
In addition, I tried removing:
1) Any jquery DOM manipulations done on databound.
2) Row and cell templates
It just doesn't seem to be anything in my code. My grid refreshes (myGrid.dataSource.read()) every 500ms, with one or two new rows - one of them might be an update (e.g. an update to an existing row).
Would appreciate a reply here.
Which version of the framework you are using? If it is an outdated one please try upgrading to the latest service pack release and in case the problem still persists try to isolate it a small but runnable sample page. In this way we will be able to investigate your exact scenario and assist you further.
Thank you in advance for the cooperation.
Regards,
Alexander Valchev
Telerik
Rank 1
Here's an example.
http://run.plnkr.co/UgOaI7w7liXsGu5o/
It's much better with the new version, but still - if I have a real-time system that works for about 15 to 30 minutes, the browser crashes after a while even with virtualization.
I am afraid that I was not able to access the plnkr that you sent us. Opening the page takes me to "Not Found" address. Can you please extract this in another plunkr, or you can use the Kendo UI Dojo as well?
Regards,
Kiril Nikolov
Telerik
Rank 1
http://run.plnkr.co/GGzLFw6MHPjKRx0D/
I am not sure what is going wrong but when I open the link on my end I see a "not found" error. For your convenience I am attaching a screen shot.
Regards,
Alexander Valchev
Telerik
Rank 2
Any updates for this DOM leak ?
I'm having the same issue with Window closing it seems to leave all sub elements detached DOM trees.
I found this link so I added a on destroy functionality that traverses all elements and unbind all events empty the html and removes it . I addition I'm running a garbage collector of my own to remove JQuery cache elements manually.
Just cleaning the kedo elements has become a massive task and still there is a leak.
I'm Attaching a sample code of the problem. to view th issue I used chrome dev tools. I took a snapshot before and after the 20 windows were opened and closed and each one appears in the comparison tab as a detached DOM tree.
Hello Gal,
This forum thread is regarding the Kendo UI Grid, so please open a support request regarding the Kendo UI Window and we will be happy to help.
Regards,
Kiril Nikolov
Telerik
Rank 1
You suggested update to a newer version, in which version the leak was fixed?
I'm using v2015.1.429 and still experience memory leak on create/destroy.
Rank 2
Hi Amit
There was a leak located in the numeric textbox filter of the grid and it was fixed in v2015.3.1111
BUT I have not yet updated to it due to massive problems with drop downs and combo boxes using Angular js in this version.
I'm using a work around replacing the numeric text box in the filter with a masked text box.
var defaults = { field: field, title: title, format: format, filterable: { ui: function uiCreateNumericTextBox(element) { element.kendoMaskedTextBox(maskTools.defualtNumber()).width("90%"); // element.kendoNumericTextBox({ format: format }); }, cell: { showOperators: showOperators, suggestionOperator: "eq", operator: "eq", dataSource: dataSource, template: function cellTemplateCreateNumericTextBox(args) { args.element.kendoMaskedTextBox(maskTools.defualtNumber()).width("90%"); //args.element.kendoNumericTextBox({ format: format }); } } }, width: "130px" };
Rank 1
Hello,
I am @2017.3.1018 and I am seeing detached DOM trees on multiselect and on PDF export - the latter being the worst.
inspecting via chrome devtools taking heap snapshots shows detached objects HTMLTableCellElement
you can also see the behaviour on your example pages - if you added 100 rows on complex data to this, filters, toolbar etc. you will see that number grow.
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid.html
_exportPDF = function exportPDF(elementid, options) {
var grid = $("#" + elementid).data("kendoGrid");
grid.saveAsPDF().done(function() {
grid=null;
});
}
Could you please create a simple dojo example demonstrating the memory leak, because testing this locally shows that the detached DOM tree elements do not increase in time? It would also be helpful if you share the steps to reproduce the memory leak.
Looking forward to your reply.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
the Telerik demo https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-pdfExport https://dojo.telerik.com/ shows detatched DOM tree
these do not get cleaned up on running Garbage collector in chrome dev tools
pressing the export PDF multiple times shows the memory profile growing via taking memory snapshots
Rank 1
it looks like the DOM tree will not be garbage collected as it is retaining a ref to t in kendo.all.js
_exportPDF = function exportPDF(elementid) {
var grid = $("#" + elementid).data("kendoGrid");
grid.dataSource.serverPaging=false;
grid.saveAsPDF().done(function(e) {
grid.dataSource.serverPaging=true;
grid=null;
});
},
see attachment
Rank 1
I have exported multiple times the Grid from the example and at some point (which is determined by the Chrome browser) the memory is cleared correctly. Please take a look at the attached screenshot.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
I have exported multiple times the Grid from the example and at some point (which is determined by the Chrome browser) the memory is cleared correctly. Please take a look at the attached screenshot.
Regards,
Konstantin Dikov
Progress Telerik
[/quote]
apologies Konstantin - I can confirm that PDF Dom Row generation does eventually get cleared by chrome browser, thank you for you assistance
I have made some research on this matter few months ago and there is no straight forward answer in regards to the garbage collection in Chrome, but it seems that it is not only linked with the running application, but it also takes into account the running environment.
Kind Regards,
Konstantin Dikov
Progress Telerik