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

Performance issues with TreeList in AngularJS

9 Answers 276 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Juha
Top achievements
Rank 1
Juha asked on 09 Oct 2015, 11:32 AM

Hi,

 I have a simple angular module with the treelist and it seems really slow. There are 4 second pauses every time the treelist tries to render. The same done without angular, in kendo dojo works as expected: http://dojo.telerik.com/iVixe

The template, which angular is using, is simply the following:
<div id="treelist"></div>

The zipped module javascript file is attached to this message.

 

Used components:

AngularJS v1.3.6
Kendo UI v2015.1.318

 

9 Answers, 1 is accepted

Sort by
0
Juha
Top achievements
Rank 1
answered on 09 Oct 2015, 11:36 AM

So the question is: what makes it slow? How can it be made faster?

Preliminary tests show that the 4 second delay is due to the treelists jQuery calls. This happens on expand/collapse node as well.

0
Juha
Top achievements
Rank 1
answered on 09 Oct 2015, 12:04 PM

The same behavior also occurs with angular style implementation.
Template:
<div ng-controller="testCtrl">
<div id="treelist" kendo-treelist="treelist"
 k-options="treelistOptions"></div>
</div>

And respective angular scope variables:
 $scope.treelistData = new kendo.data.TreeListDataSource({data: [...], schema: {model: {id: "id",expanded: true}}});

    $scope.treelistOptions = {
                        dataSource: $scope.treelistData,
                        height: 540,
                        columns: [
                            { field: "name" },
                            { field: "type" },
                            { field: "base" }
                        ]
                    };

0
Alex Gyoshev
Telerik team
answered on 13 Oct 2015, 01:17 PM

Hello Juha,

To improve the performance of a TreeList bound to a large data set, utilize load on demand, as shown in the remote loading demo. This will significantly improve the performance, as only a fraction of the data set will be bound to the angular model.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Juha
Top achievements
Rank 1
answered on 14 Oct 2015, 05:35 AM

Hi Alex,

 So the performance issue is due to Kendo UIs Angular integration? If I use the same dataset on the online demo (which runs without angular) I get a really good performance, as seen here: http://dojo.telerik.com/iVixe

I was hoping that this could be resolved without load on demand, as it would be too slow to expand nodes manually to see the data (I wish to show a large dataset like this, so the user can skim through it and find the important bits highlighted).

How would the remote loading work, if the user tries to click open all the nodes? It would still have performance issues after opening multiple nodes? I guess there could be some code written to close the nodes after a few have been openned, but this might (and probably would) result in a bad UX.

0
Alex Gyoshev
Telerik team
answered on 15 Oct 2015, 12:38 PM

Hello Juha,

The issue is caused by the compilation of angular directives in the TreeList rendering. We are currently looking for ways to improve this, and will follow up with any information in this thread.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Juha
Top achievements
Rank 1
answered on 20 Oct 2015, 10:00 AM

Hello Alex,

 Thank you for the information. Do you have any preliminary schedule for these improvements?

Meanwhile we'll try to limit the data loaded. However, the use case is such that large trees with treelist will be mandatory. This came as a surprise to us as the demo without angular was working fine with large data sets. This was a key feature which influenced us with the purchase of Kendo UI and now this is quite a large blocker for the usability of our system.

0
Alex Gyoshev
Telerik team
answered on 21 Oct 2015, 03:26 PM

Hello Juha,

We have pushed out a fix today that should resolve the issue. Take note that if you use templates in angular the performance penalty will still be there, as the templates need to be reevaluated by angular on each interaction.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Juha
Top achievements
Rank 1
answered on 29 Oct 2015, 09:50 AM

Hi,

That's good. Can you tell when this fix will be available for download or is it possible already? If so, can you give me a download link.

 Thanks,

 

0
Alex Gyoshev
Telerik team
answered on 29 Oct 2015, 01:13 PM

Hello Juha,

This issue should already been fixed in the latest internal builds. Please upgrade and let us know if the problem persists.

Regards,
Alex Gyoshev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeList
Asked by
Juha
Top achievements
Rank 1
Answers by
Juha
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or