Performance issues with TreeList in AngularJS

[Juha]

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

 

[Juha]

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.

[Juha]

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" }
                        ]
                    };

[Alex Gyoshev]

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

 

 

[Juha]

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.

[Alex Gyoshev]

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

 

 

[Juha]

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.

[Alex Gyoshev]

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

 

 

[Juha]

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,

 

[Alex Gyoshev]

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