Performance issues with TreeList in AngularJS

10 posts, 0 answers
  1. Juha
    Juha avatar
    6 posts
    Member since:
    Dec 2014

    Posted 09 Oct 2015 Link to this post

    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

     

  2. Juha
    Juha avatar
    6 posts
    Member since:
    Dec 2014

    Posted 09 Oct 2015 in reply to Juha Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Juha
    Juha avatar
    6 posts
    Member since:
    Dec 2014

    Posted 09 Oct 2015 Link to this post

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

  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 13 Oct 2015 Link to this post

    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!
     
  6. Juha
    Juha avatar
    6 posts
    Member since:
    Dec 2014

    Posted 14 Oct 2015 in reply to Alex Gyoshev Link to this post

    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.

  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Oct 2015 Link to this post

    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!
     
  8. Juha
    Juha avatar
    6 posts
    Member since:
    Dec 2014

    Posted 20 Oct 2015 in reply to Alex Gyoshev Link to this post

    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.

  9. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 21 Oct 2015 Link to this post

    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!
     
  10. Juha
    Juha avatar
    6 posts
    Member since:
    Dec 2014

    Posted 29 Oct 2015 in reply to Alex Gyoshev Link to this post

    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,

     

  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 29 Oct 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready