Setting datasource leaks memory

7 posts, 0 answers
  1. Ernesto
    Ernesto avatar
    4 posts
    Member since:
    Apr 2016

    Posted 25 Oct Link to this post

    Is this the proper way of updating the data for a kendo treeview? If that's the case, then why am I getting some major memory leaks (according to Chrome's allocation profile)? And when I say 'major', I mean relative to our tiny sample data, obviously :).
    Am I missing something?

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
     
      <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
     
    </head>
    <body>
    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
         
        <!-- generate new data and update the datasource-->
        <button ng-click="generate()">Generate</button>
     
        <div kendo-tree-view="treeApi" k-data-text-field="'name'"
             k-data-source="datasource" k-load-on-demand="false">
        </div>
     
      </div>
    </div>
     
    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
             .controller("MyCtrl", function($scope) {
     
            $scope.datasource = new kendo.data.HierarchicalDataSource({
                sort: { field: "name", dir: "asc" },
                data: [],
                schema: {
                    model: {
                        id: 'id',
                        children: 'items'
                    }       
                }
            });
             
            $scope.generate = function() {
                var data = [{
                    id: 1,
                    name: 'name',
                    items: [{
                        id: 2,
                        name: 'name',
                        items: [{
                            id: 3,
                            name: 'name',
                            items: [{
                                id: 4,
                                name: 'name',
                                items: []
                            }]
                        }]
                    }, {
                        id: 5,
                        name: 'name',
                        items: [{
                            id: 6,
                            name: 'name',
                            items: [{
                                id: 7,
                                name: 'name',
                                items: []
                            }]
                        }]
                    }]
                }];     
                 
                $scope.datasource.data(data);
            };
     
            $scope.generate();
        });
     
    </script>
     
    </body>
    </html>

    Dojo: http://dojo.telerik.com/EyuwU/3
  2. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 27 Oct Link to this post

    Hello,

    I could not catch a leak on the dojo provided. Would you please elaborate a little bit what exactly are you having in mind either by sending a video or the exact steps to observe the leak?

    Regards,
    Plamen
    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. Ernesto
    Ernesto avatar
    4 posts
    Member since:
    Apr 2016

    Posted 27 Oct in reply to Plamen Link to this post

    Hello Plamen! Here I attach the allocation profile shown by Chrome's profiler. Each point in time corresponds to a 'Generate' click (i.e. the 'datasource' data is replaced). As you can see, not all memory is been properly deallocated. Hope this helps clarify the problem.

    Thanks in advance.

  5. Ernesto
    Ernesto avatar
    4 posts
    Member since:
    Apr 2016

    Posted 28 Oct in reply to Plamen Link to this post

    Hi Plamen. Follow up.

    According to the Chrome DevTools docs for the profiler:

     

    The height of each bar corresponds to the size of the recently allocated objects, and the color of the bars indicate whether or not those objects are still live in the final heap snapshot. Blue bars indicate objects that are still live at the end of the timeline, Gray bars indicate objects that were allocated during the timeline, but have since been garbage collected...

    So what I gather from this is that, if the bars for previous allocations do not turn gray, it means that that memory is not being collected. Here is the updated Dojo sample which illustrates my point: http://dojo.telerik.com/EyuwU/6 . And I also upload the resulting profile from clicking the 'Generate (unattached)' button, which basically allocates random memory that, as you can see, is later properly GC'ed.

    Regards, Ernesto

  6. Ernesto
    Ernesto avatar
    4 posts
    Member since:
    Apr 2016

    Posted 28 Oct in reply to Ernesto Link to this post

    Forgot to uncomment a line XD. This is the current dojo http://dojo.telerik.com/EyuwU/7

    PS:The option of editing a post would come in handy.

  7. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 31 Oct Link to this post

    Hello,

    We will need some more time to inspect the issue and will contact you as soon as we have more information about the issue.

    Regards,
    Plamen
    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.
     
  8. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 04 Nov Link to this post

    Hello,

    We have inspected the provided scenario deeper but could not find any concrete memory leak traces. We researched the blue lines objects and their valued but could not see anything unusual. We have also tested the scenario with the Resource Monitor in but could not detect any memory leaking while performing the same function multiple times.

    Regards,
    Plamen
    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.
     
Back to Top
Kendo UI is VS 2017 Ready