This is a migrated thread and some comments may be shown as answers.

TreeList | Performance Issue on update

3 Answers 241 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shafaq
Top achievements
Rank 1
Shafaq asked on 05 Sep 2016, 08:24 AM

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.

 

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 06 Sep 2016, 11:49 AM
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.
0
Shafaq
Top achievements
Rank 1
answered on 07 Sep 2016, 04:49 AM

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

0
Dimiter Topalov
Telerik team
answered on 09 Sep 2016, 07:10 AM
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.
Tags
Grid
Asked by
Shafaq
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Shafaq
Top achievements
Rank 1
Share this question
or