Tree List using AngularJS memory leaks

[Kay]

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

[Stefan]

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

 

 

[Kay]

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

[Kay]

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

[Stefan]

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

[Kay]

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

[Stefan]

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

[Kay]

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

[Stefan]

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

[Kay]

Hi Stefan,

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

 

Thanks and Regards,

Sunil

 

[Kay]

Hi Stefan,

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

 

Thanks again,

Sunil

[Erik]

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.

[Stefan]

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