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

Tree List using AngularJS memory leaks

12 Answers 106 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Kay
Top achievements
Rank 1
Kay asked on 09 Nov 2016, 09:38 AM

Hi

I am using multiple tree lists in my project so have it set up using a directive. I am getting some serious memory leaks that is rendering the app and browser unusable and I have narrowed it down to one area. I have managed to recreate this in a dojo as well and you can test the memory leak by changing the template variable and then keep expanding columns.

in the setupTree() in the directive I have a column with checkboxes that uses angular. Using the normal template and expanding the rows in the tree chromes memory starts climbing and goes up over 1gb of usage and over time will keep climbing, sometimes going over 2gb. I found that by taking everything out except for an ng-disabled the memory usage goes up slower but it still keeps climbing and never comes down. If I take out all of the angular the memory climbs a bit but then gets garbage collected and stays low.

I would like to add that the data used for this tree is relatively small compared to some of the real data that will be used.

Thanks and regards,

Simon

dojo.telerik.com/@Simon245/ewawi

12 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 11 Nov 2016, 09:35 AM
Hello Simon,

Thank you for the provided example.

I was able to observe the described memory leak on my side.

After testing different scenarios, I noticed that if the TreeList is not used inside a custom directive but still using the same data and template, the memory leak is not observable.

Could you please check in your application, if using the TreeList component without a custom directive will prevent the memory leak?

I understand that the custom directive is made for reusability, but this can be used for confirming if the issue is actually coming from the directive.

If you can share with us more details that you found during your investigation, we will be happy to assist further. 

Regards,
Stefan
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Kay
Top achievements
Rank 1
answered on 14 Nov 2016, 09:57 AM

Hi Stefan,

I created another test in dojo using kendo tree list directly in a controller and am still getting the same results with the memory leak. If I expand every row Chromes memory usage is going over 2gb and does not come down, even with a manual garbage collection it stays above 2gb.

Regards,

Simon

dojo.telerik.com/@Simon245/OnAlA

0
Kay
Top achievements
Rank 1
answered on 15 Nov 2016, 04:02 AM

Hi Stefan,

I came across another example for angular causing memory leaks when I was looking at update a field in all child nodes example. At first I thought it was just something small so I created a new dojo and added a bit of extra data by duplicating the CEO object. If I then expand and collapse that row 20times my memory eventually ran over 1gb usage and would not come down. I then removed the ng-model='dataItem.checked' ng-change='checkChildren(dataItem) from the template in the treeListOptions and ran the same test, this time my memory went up to about 400mb but then cleaned down again below 300mb

 

dojo.telerik.com/@Simon245/eMEnU

0
Stefan
Telerik team
answered on 15 Nov 2016, 01:57 PM
Hello Kay,

Thank you for the provided examples.

After testing them in different scenarios with the lead developer of the TreeList, it was not possible to isolate which is the reason for this leak when using ng-model and other ng-directive. I was able to observe stable behaviour with some of the ng-directives, but the most significant issue is coming from ng-model.

We apologise for this, but for now, we cannot offer any solution. 

Depending on the desired result, if you can use another approach without ng-model we will be happy to assist if you encounter any additional questions or issues with it.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kay
Top achievements
Rank 1
answered on 16 Nov 2016, 09:58 AM

Hi Stefan,

Instead of using angular directives, I've used kendo's api to create a binding.  The binding works fine when I click a checkbox, but as soon as I expand or collapse a node, it seems to break.  I can't tell why.

I've noticed when the click a checkbox the dataBound events fire.  However after expanding a node and clicking on a checkbox does not fire a dataBound event anymore.

Please help, you can find my sample code at http://dojo.telerik.com/okUyi

 

Simon

0
Stefan
Telerik team
answered on 18 Nov 2016, 08:45 AM
Hello Kay,

Thank you for the provided example.

In fact, we do have a similar example using Kendo UI binding with checkboxes which I modify to work as expected with AngularJS. Please note that in order to work as expected with Angular templates, we have to clear the state of the checkboxes on expand and collapse. But as the binding occurs on dataBound, we should add the same binding on the collapse and expand events also. Additionally, the expand and collapse events are preventable so, in order to execute the logic at the correct moment, we need to use the setTimeout method.

Please check the Dojo example demonstrating this implementation:

http://dojo.telerik.com/afAdi

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Kay
Top achievements
Rank 1
answered on 21 Nov 2016, 01:49 AM

Hi Stefan,

Thanks for your help again.

Unfortunately, rebinding is causing the same issue I had with angularJS.  Once I add more data to your example, then repeatedly expand and collapse the nodes, the memory usage goes up and won't come back down to it's original value.  There isn't that much data in the tree either. 

I've created an example here: http://dojo.telerik.com/@spawn57/ABITU. Please have a look.

Is rebinding the reason why there is a memory leak?  Would a possible workaround be to let expand and collapse events to bubble up and add one listener to the kendo tree list element.  The respective handler can then select the checkboxes in the tree?  This way there will be no need for rebinding.

 

Thanks and Regards,

Sunil

0
Stefan
Telerik team
answered on 22 Nov 2016, 02:01 PM
Hello Kay,

After additional investigation and testing, I can suggest before binding the rebind function, to unbind the current handler.

I made an example with 1000 items and it is working as expected. Still, the memory is growing but it get reduced and it is staying at acceptable levels:

http://dojo.telerik.com/UzEHIY

Regards,
Stefan
Telerik by Progress
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Kay
Top achievements
Rank 1
answered on 25 Nov 2016, 01:32 AM

Hi Stefan,

This looks like it will work.  Thanks for your help.

 

Thanks and Regards,

Sunil

 

0
Kay
Top achievements
Rank 1
answered on 02 Dec 2016, 04:21 AM

Hi Stefan,

The solution you provided for my other problem also works great.  I don't notice a memory leak anymore.

 

Thanks again,

Sunil

0
Erik
Top achievements
Rank 1
answered on 28 Jan 2017, 02:29 PM
Is this problem solved in the latest (2017.1) release? We are having the same problem with an older (2015.2) version. I've updated to 2017.1 but the memory keeps increasing every time I collapse or expand. I've switch to using de Kendo template (the one with the #) instead of angular and that seems to help a little bit.
0
Stefan
Telerik team
answered on 01 Feb 2017, 08:40 AM
Hello Erik,

There were not specific changes to the TreeList implementation in the latest release as it is a very complex one.

In the thread, there is a workaround provided to remove the memory leak.

Please check the example demonstrating the needed changes.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeList
Asked by
Kay
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Kay
Top achievements
Rank 1
Erik
Top achievements
Rank 1
Share this question
or