Improve AngularJS performance for Read-Only Grids

13 posts, 0 answers
  1. Nate
    Nate avatar
    17 posts
    Member since:
    Dec 2014

    Posted 26 Jun 2015 Link to this post

    Hello -

    We are making heavy use of Kendo UI Grids in our AngularJS-based application.

     In some views, we may have up to 6 different kendo grids showing data.  We are using remote live scrolling in some and others we are loading all the data (when dataset size is small).

    **All of our grids are READ-ONLY.  In other words, users are just viewing data, not editing, modifying, etc. rows**

    We have discovered that each *ROW* in each table has an angular $watcher attached to it for **each** column value.

    For example:

    1.<tr class="k-alt ng-scope" data-uid="586ee20c-a5a7-4f61-b379-b719b1ca431e" role="row">
    2.  <td style="display:none" role="gridcell">
    3.     <span ng-bind="dataItem.id" class="ng-binding">22</span>
    4.  </td>
    5.  <td role="gridcell">
    6.     <span ng-bind="dataItem.hostname" class="ng-binding">myHost</span>
    7.  </td>
    8.</tr>

    In the example above, **TWO** angular watches will be created for "id" and "hostname" for **each row**.

    If our table has 200 rows x 2 watchers = 400 angular watchers added to the angular $digest cycle (which is run 2x every time there's an "event" that triggers the digest cycle).

    We understand that for **editable** grids these watches may be required to correctly perform two-way data-binding.  However, since our grids are read-only we do **NOT** need these watches created (and they are impacting our application's performance).  

    We have tried setting "editable: false" on both the grid options as well as individual columns, but it seems to have no affect.

    Is there any way to prevent Kendo from creating all these **unnecessary** AngularJS watches and scopes?

  2. Nate
    Nate avatar
    17 posts
    Member since:
    Dec 2014

    Posted 26 Jun 2015 in reply to Nate Link to this post

    As a follow-up, imagine our scenario above:

    - 6 Kendo Grids

    - 200 rows per grid

    - 5 columns per grid

    = 6,000 AngularJS watches added to the $digest cycle.

     

    AngularJS documentation suggests keeping # of watches < 2,000 for good application performance (and the fewer the better).

  3. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 01 Jul 2015 Link to this post

    Hello Nate,

     

    The Kendo UI directives create watches (call $watch manually) in the following cases:

    When creating a data source - to update the widget when the developer manually adds, removes or updates items in the array which acts as a data source.

     

    During initialization when k-ng-delay is used.

     

    To support k-ng-disabled and k-ng-readonlyk-ng-model and k-ng-rebind.

    All other watches are created internally by AngularJS when compiling HTML ($compile). For example the Kendo UI grid compiles every row to allow developers to use angular directives in column templates.

     

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Octavian
    Octavian avatar
    1 posts
    Member since:
    Mar 2015

    Posted 12 Jan 2016 in reply to Nate Link to this post

    Hi Nate,

    If you're still interested in this, I was able to solve this by not using kendo-grid directive, but creating the grid from controller instead, i.e.:

    In html: <div id="grid"></div>

    In controller: $("#grid").kendoGrid(gridOptions);

    This way the watchers will not be created any more and you should still be able use all the features of Kendo grid through its JavaScript API.

     

  5. James
    James avatar
    11 posts
    Member since:
    Jan 2016

    Posted 06 Dec 2016 in reply to Nate Link to this post

    Here here! Please fix this so that it at least as a read-only mode that gets rid of all of those.
  6. Stefan
    Admin
    Stefan avatar
    2819 posts

    Posted 08 Dec 2016 Link to this post

    Hello James,

    As my colleague Atanas explained, this is not in control of the Kendo UI team. Most of the watchers are created internally by AngularJS when compiling HTML ($compile). And this does not change if the Grid is editable or not.

    To generally improve the performance I can suggest using a Grid with virtual scrolling:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#virtual-scrolling

    http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data

    Or using the pageable Grid with a smaller pageSize:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable.pageSize

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-pageSize

    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  7. James
    James avatar
    11 posts
    Member since:
    Jan 2016

    Posted 08 Dec 2016 in reply to Stefan Link to this post

    If the grid is set to readonly (i.e. no editmode specified) then you should be using :: notation and readonly angular. It appears that you aren't, so it's watching stuff that shouldn't be watched because it should be a one way binding.
  8. Nate
    Nate avatar
    17 posts
    Member since:
    Dec 2014

    Posted 08 Dec 2016 in reply to James Link to this post

    +1 on James comment. We actually switched to a competing product b/c Kendo's lack of one-way binding on Kendo grids made our UI unusable.

    I understand on editable grids, Angular is used to watch and update the two-way binding.  But on one way grids, you just need DOM elements displaying the data...no need for $compile or watches or bindings whatsoever.

    If you're not sure what we mean, ask Todd Motto.  He knows exactly why large Kendo Angular-based grids could kill browser performance, especially if they only need to read-only but are not.

  9. Stefan
    Admin
    Stefan avatar
    2819 posts

    Posted 12 Dec 2016 Link to this post

    Hello Nate, James,

    I'm sorry to hear that this is a showstopper when using the Kendo UI Grid with Angular.

    After consulting with the Lead developer of the Kendo UI Grid, I can confirm that for now, we do not plan to change the Grid behaviour because even of the Grid is not editable, its data can be changed from outside(form for example) and this will also require watchers.

    If the requirement is to have a completely static data in the Grid, which cannot be changed from the Grid or outside the Grid, I can suggest submitting a feature request in our UserVoice portal describing the desired functionality. Then based on its popularity among the community we may implement it in a future release:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/category/170280-grid

    Apologies for the inconvenience this may cause you.

    Regards,
    Stefan
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  10. Marius
    Marius avatar
    1 posts
    Member since:
    May 2014

    Posted 14 Dec 2016 Link to this post

    We discovered this issue in production.  We had a grid that loads all data and the grid had 37,000 watchers with 2000 rows.  Fortunately there is a simple workaround that allows you to have one time binding.  Just specify the column template.  You can use either Angular one time binding or Telerik's data binding syntax to get rid of all of the watchers.

     

    gridOptions = {
                dataSource: gridDataSource,
                columns: [
                    {
                        field: "id",
                        headerTemplate: "<span>Identifier</span>",
                        template: "<span ng-bind='::dataItem.id'></span>"
                    }
                ]
            };
  11. Stefan
    Admin
    Stefan avatar
    2819 posts

    Posted 16 Dec 2016 Link to this post

    Hello Marius,

    Thank you for sharing this with the Kendo UI community.

    The workaround does not look complex and it can be easily applied which can reduce the performance issues.

    We greatly appreciate it.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Mac P
    Mac P avatar
    86 posts
    Member since:
    Mar 2010

    Posted 23 Mar 2017 in reply to Nate Link to this post

    Nate, We are seeing lot of performance issue using kendo ui grid angularjs version. Can you please suggest what competing product did you choose? 
  13. Nate
    Nate avatar
    17 posts
    Member since:
    Dec 2014

    Posted 24 Mar 2017 in reply to Mac P Link to this post

    Mac P -

    It sounds like Marius has a valid solution to staying with Kendo if you're ok overriding templates.  If you're using Kendo's other components, it may be worthwhile doing that to stay within the "ecosystem" as well as provide your users with a common look and feel (UX experience) across the UI.

    If, however, you're just looking for a JS performant grid with angular support, google: "fast javascript angular grid".  It will take you to what we're using ;-)

Back to Top