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