Tree List using AngularJS memory leaks

11 posts, 0 answers
  1. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 09 Nov Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 11 Nov Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 14 Nov in reply to Stefan Link to this post

    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

  5. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 14 Nov in reply to Kay Link to this post

    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

  6. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 15 Nov Link to this post

    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.
  7. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 16 Nov in reply to Stefan Link to this post

    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

  8. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 18 Nov Link to this post

    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.
  9. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 20 Nov in reply to Stefan Link to this post

    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

  10. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 22 Nov Link to this post

    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.
  11. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 24 Nov Link to this post

    Hi Stefan,

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

     

    Thanks and Regards,

    Sunil

     

  12. Kay
    Kay avatar
    16 posts
    Member since:
    Aug 2013

    Posted 2 days and 23 hours ago Link to this post

    Hi Stefan,

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

     

    Thanks again,

    Sunil

Back to Top
Kendo UI is VS 2017 Ready