TreeList | Performance Issue on update

4 posts, 0 answers
  1. Shafaq
    Shafaq avatar
    2 posts
    Member since:
    Sep 2016

    Posted 05 Sep Link to this post

    I am using KendoUi tree list with AngularJs. I have large amount of data (~3000 +) which is being updated after each 4 seconds. I have observed that whenever records are updated, it freeze the screen. Is there any solution?

     

    Here is dojo link.Steps to run the test app:

    1: Click on Add Data button

    2:Turn on "Auto update". It will update records after 4 seconds. Now observe the behavior.

     

    Update code is as follow:

    var record = $scope.gridDataSource.data()[100];
    record.Title = "Updated";
    $scope.gridDataSource.pushUpdate(record);

    Thank you.

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 06 Sep Link to this post

    Hi Shafaq,

    Thank you for considering Kendo UI.

    The described undesired behavior is observed because each call to dataSource.pushUpdate() is causing the TreeList to re-render the items, which slows down the process very much due to the large number of items.

    A feasible workaround in the given scenario would be to avoid the mentioned method, and update the items as follows:

    $scope.updateRecords = function () {
    var records = $scope.gridDataSource.data().toJSON(),
    totalRecords = records.length;

    console.log("**************** Start");

    var startTime = new Date().getTime();
    var updatedRecordsCount = 0;

    for (var i = 0; i < totalRecords; i++) {
    var item = records[i];
    var title = "Z " + item.Title + " updated (" + i + ")";
                               
    item.Title = title;
    i += 100;
    updatedRecordsCount++;
    }
                       
    $scope.gridDataSource.data(records);
     
    console.log(new Date().getTime() - startTime + " ms");
    console.log("**************** Completed ",updatedRecordsCount);
    };

    I have updated the provided dojo to illustrate the suggested approach:

    http://dojo.telerik.com/EFonU/5

    On a side note, it is also worth mentioning that the Kendo UI TreeList does not support paging and virtualization.

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Shafaq
    Shafaq avatar
    2 posts
    Member since:
    Sep 2016

    Posted 06 Sep in reply to Dimiter Topalov Link to this post

    Hi Dimiter,

    Thank you for the reply and suggesting workaround. This approach is less time consuming as compared to pushUpdate. However I 'm also experiencing some performance issue with large amount of data. You can observe below issues on this dojo:

    1. Screen gets freeze for few seconds after "$scope.gridDataSource.data(records);"
    2. Expand/Collapse takes 2~3 seconds. For more records, it even takes 5~6 seconds

    Can we also have some workaround for these performance issues?

    Regards,

     Shafaq Kazmi

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 09 Sep Link to this post

    Hello Shafaq,

    Unfortunately there is no workaround for speeding up the rendering of too many sub-level items when a parent is expanded. You can check out the following forum topic on TreeList with a paging functionality:

    http://www.telerik.com/forums/does-treelist-support-pagination

    Such a feature is not supported, but you can find some of the approaches, proposed by other users useful.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready