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

Editable angular grid performance problem

1 Answer 24 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anna
Top achievements
Rank 1
Anna asked on 02 Feb 2017, 08:06 PM
We have an editable grid (angular) that's suffering badly with performance. Our customer reports editing grid cell becomes slower and slower and becomes unresponsive very quickly.

We tried to dig into the problem, and notice the angular watch # increases and digest cycle takes longer to execute as user edit each cell. We use angular expression in cell template, and attaches data-ng-model to the td's attribute. 

Below is demo we created that has similar but much simpler setup as our own grid. It you install Chrome extension AngularJS Batarang, you can use to monitor angular digest cycle time and watch #. You will notice these 2 numbers slowly and steadily increases over time.
https://plnkr.co/edit/s4nhIh?p=preview

It's not too bad of a increase in the above, but our own grid is much larger and much more complicated, and performance suffers badly.

Could you explain why is watch# and digest cycle time increases as I edit cell? It seems to be the <td> DOM is not recreated every time on user enter and exit a cell for edit. 

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 06 Feb 2017, 01:30 PM
Hello Anna,

Thank you for the runnable example and the recommended tool for testing.

After testing and consulting with the developers' team this is an AngularJS specific and we have no control over it. Once the cell is switched from read-only to edit mode and vice versa the tr elements content is changed.

Also, the additional added ng-attributes are adding more watchers in the Grid.

In a scenario like this one, I can suggest using smaller page size to improve the performance.

Apologies for the inconvenience this may cause you.

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.
Tags
Grid
Asked by
Anna
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or