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

Memory leak on create and destroy grid

30 Answers 257 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rene
Top achievements
Rank 1
Rene asked on 08 May 2013, 03:17 PM
Hi,

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

Sort by
0
Alexander Valchev
Telerik team
answered on 10 May 2013, 04:52 PM
Hello Rene,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rene
Top achievements
Rank 1
answered on 11 May 2013, 08:53 PM
Hello Alexander,

I have included a screencast that shows the nodecount and eventhandlers growinging in the timeline tab of chrome developer tools.

Thanks in advance
0
Alexander Valchev
Telerik team
answered on 14 May 2013, 02:32 PM
Hi Rene,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Rene
Top achievements
Rank 1
answered on 14 May 2013, 03:15 PM
Hello Alexander,

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
0
Alexander Valchev
Telerik team
answered on 16 May 2013, 01:31 PM
Hello Rene,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aditya
Top achievements
Rank 1
answered on 11 Nov 2013, 09:33 PM
Hi Alexander,

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,
0
Alexander Valchev
Telerik team
answered on 13 Nov 2013, 03:39 PM
Hello Aditya,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tim
Top achievements
Rank 1
answered on 14 Nov 2013, 08:22 PM
Good example, 

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.



0
Alexander Valchev
Telerik team
answered on 18 Nov 2013, 05:22 PM
Hi Tim,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
luis
Top achievements
Rank 1
answered on 11 Dec 2013, 02:25 AM
Calling refresh() on the grid or changing the bound datasource also seems to leave behind old tablerows.
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.
0
luis
Top achievements
Rank 1
answered on 11 Dec 2013, 06:08 PM
Pls forget my last post as it had nothing to do with the grid. It was all about the context menu.
0
Vinay
Top achievements
Rank 2
answered on 01 Jan 2014, 11:45 AM
Hi,

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

0
OMER
Top achievements
Rank 1
answered on 14 May 2014, 06:22 PM
Hi,
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.

0
Alexander Valchev
Telerik team
answered on 16 May 2014, 11:17 AM
Hello Omer,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
OMER
Top achievements
Rank 1
answered on 11 Jun 2014, 06:07 PM
Hi,
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.
0
Kiril Nikolov
Telerik team
answered on 13 Jun 2014, 03:45 PM
Hello Omer,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
OMER
Top achievements
Rank 1
answered on 16 Jun 2014, 07:56 AM
Here it is:
http://run.plnkr.co/GGzLFw6MHPjKRx0D/
0
Alexander Valchev
Telerik team
answered on 18 Jun 2014, 07:19 AM
Hello Omer,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Gal
Top achievements
Rank 2
answered on 02 Oct 2015, 07:47 AM

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.

 

0
Kiril Nikolov
Telerik team
answered on 06 Oct 2015, 07:00 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Amit
Top achievements
Rank 1
answered on 07 Jan 2016, 04:33 PM

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.

0
Gal
Top achievements
Rank 2
answered on 11 Jan 2016, 06:31 AM

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"                   
};
 

 

0
lorraine
Top achievements
Rank 1
answered on 27 Oct 2017, 08:39 AM

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;
    });
}

 

 

0
Konstantin Dikov
Telerik team
answered on 31 Oct 2017, 09:50 AM
Hello Lorraine,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
lorraine
Top achievements
Rank 1
answered on 31 Oct 2017, 10:00 AM

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 

0
lorraine
Top achievements
Rank 1
answered on 31 Oct 2017, 12:10 PM

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 

0
lorraine
Top achievements
Rank 1
answered on 31 Oct 2017, 12:12 PM
see attachment with retained ref in yellow
0
Konstantin Dikov
Telerik team
answered on 02 Nov 2017, 07:53 AM
Hello Lorraine,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
lorraine
Top achievements
Rank 1
answered on 02 Nov 2017, 08:52 AM
[quote]Konstantin Dikov said:Hello Lorraine,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

[/quote] 

apologies Konstantin - I can confirm that PDF Dom Row generation does eventually get cleared by chrome browser, thank you for you assistance

 

 

 

0
Konstantin Dikov
Telerik team
answered on 06 Nov 2017, 07:42 AM
Hi Lorraine,

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Rene
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Rene
Top achievements
Rank 1
Aditya
Top achievements
Rank 1
Tim
Top achievements
Rank 1
luis
Top achievements
Rank 1
Vinay
Top achievements
Rank 2
OMER
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Gal
Top achievements
Rank 2
Amit
Top achievements
Rank 1
lorraine
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or