TreeList | Performance Issue on update

[Shafaq]

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.

 

[Dimiter Topalov]

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

[Shafaq]

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

[Dimiter Topalov]

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