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

Improve AngularJS performance for Read-Only Grids

12 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nate
Top achievements
Rank 1
Nate asked on 26 Jun 2015, 07:17 PM

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?

12 Answers, 1 is accepted

Sort by
0
Nate
Top achievements
Rank 1
answered on 26 Jun 2015, 07:18 PM

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).

0
Atanas Korchev
Telerik team
answered on 01 Jul 2015, 07:03 AM

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!
 
0
Octavian
Top achievements
Rank 1
answered on 12 Jan 2016, 02:08 PM

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.

 

0
James
Top achievements
Rank 1
answered on 06 Dec 2016, 03:25 PM
Here here! Please fix this so that it at least as a read-only mode that gets rid of all of those.
0
Stefan
Telerik team
answered on 08 Dec 2016, 12:20 PM
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.
0
James
Top achievements
Rank 1
answered on 08 Dec 2016, 01:07 PM
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.
0
Nate
Top achievements
Rank 1
answered on 08 Dec 2016, 06:01 PM

+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.

0
Stefan
Telerik team
answered on 12 Dec 2016, 08:46 AM
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.
0
Marius
Top achievements
Rank 1
answered on 14 Dec 2016, 04:33 PM

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>"
                }
            ]
        };
0
Stefan
Telerik team
answered on 16 Dec 2016, 11:26 AM
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 (charts) and form elements.
0
Mac P
Top achievements
Rank 1
answered on 23 Mar 2017, 02:04 PM
Nate, We are seeing lot of performance issue using kendo ui grid angularjs version. Can you please suggest what competing product did you choose? 
0
Nate
Top achievements
Rank 1
answered on 24 Mar 2017, 03:12 PM

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 ;-)

Tags
Grid
Asked by
Nate
Top achievements
Rank 1
Answers by
Nate
Top achievements
Rank 1
Atanas Korchev
Telerik team
Octavian
Top achievements
Rank 1
James
Top achievements
Rank 1
Stefan
Telerik team
Marius
Top achievements
Rank 1
Mac P
Top achievements
Rank 1
Share this question
or