Kendo Grid with Angular 6 performance issue

[Dinakar]

Hi,

We are using the Kendo grid with Angular 6 in our project. We are using grid features like Inline editing, Lock, Sorting(server-side), Filtering(server-side), Paging(server-side), Keyboard Navigation etc.
Grid responds very slow when the number of columns is more. When we have 50 to 60 columns. Single Click navigation, Keyboard navigation, Row editing etc. are taking 3 to 4 seconds delay. 

I have tested after reducing the number of columns to10 to 15. then it works fine.

Could you please help us in resolving the same. 

[1222]

Hello Kendo-UI Team

We are using the Kendo grid with Angular 11 in our project. We are using grid features like Inline editing, Lock, Sorting(server-side), Filtering(server-side), Paging(server-side), Keyboard Navigation etc.
Grid responds very slow when the number of columns is more. When we have 10 columns and 150 to 200 Rows. at that time Single Click navigation, Keyboard navigation, Row editing etc. are taking 3 to 4 seconds delay. 

I have tested after reducing the number of  rows to 50. then it works fine.

Could you please help us in resolving the same. 

[Martin]

Hi,

Please check the following article about different mechanism for improving Grid performance:

https://www.telerik.com/kendo-angular-ui/components/grid/browser-performance/

Regards

[Dimiter Topalov]

Hello Dinakar,

Indeed, there are system and browser-specific limitations to the performance and the number of elements that can be rendered seamlessly in an Angular application. The IE browser especially is notoriously lacking in performance when compared to Chrome and FireFox in general, and when rendering Angular applications in particular. Typically the main bottleneck is rendering a large number of DOM elements, and the Angular change detection mechanism. 

The general recommendations are to enable the production mode for the application and to limit the number of DOM elements in terms of reducing the page size, the number of columns, or both, as described in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/browser-performance/

Utilizing the Grid paging or virtual scrolling functionalities typically provides both performant and rich in functionality Grids with good UX. As more than 50 rows can be hardly visible simultaneously on most screens, choosing a similar page size seems reasonable and not restraining the end user from browsing through large data sets (they will just need to be separated in portions that can be loaded without causing performance issues).

Heavy usage of templates in the Grid cells can also cause performance issues, especially when a property is bound to a function call that performs some heavy computation.

Recently we introduced enhancements in the Grid rendering that significantly improved the performance, especially in IE, but there are still limits to the number of DOM elements that can be rendered preserving an acceptable performance.

When using virtual scrolling instead of regular paging, the recommended page size for most seamless scrolling experience, is ~3 times the visible number of items (so for example if the Grid height is such that it accommodates displaying 10-11 visible items, the recommended page size would be ~30-35).

The editor templates are created when the Grid is in editing mode only, so this should not have any impact on performance.

Virtualization of Grid columns is currently not supported, but it is among our future plans to introduce such functionality. If you have the time, please support this feature request in our Feedback portal to help us estimate the customer demand for such an enhancement, and prioritize accordingly when updating our roadmap:

https://feedback.telerik.com/kendo-angular-ui/1360857-horizontal-virtual-scrolling-for-grid-virtual-columns

Thank you in advance.
 
For suggestions for improving the performance of the Angular applications in general, I can recommend the following resources (among many others available online):

https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354

https://blog.mgechev.com/tags/performance/

https://www.youtube.com/watch?v=WP-d5CCuS60

https://www.youtube.com/watch?v=ybNj-id0kjY

https://blog.angular.io/3-tips-for-angular-runtime-performance-from-the-real-world-d467fbc8f66e

The Grid is treated as a regular child component, and all checks, related to its built-in functionality will be performed each time the change detection is triggered. As described in the generic Angular performance-related resources (especially the talks by Minko Gechev), this can be avoided if the Grid is moved to a sibling component so that all other components, triggering change detection on the page, and the Grid itself, are not interfering with one another, and for example pressing a button outside of the Grid does not trigger the change detection, related to the Grid.

A page size of 30-40 items should yield a reasonable performance as far as the Grid is concerned, even with 50 columns, but of course - the less, the better. Introducing virtualization of the Grid columns in a future version of the Grid package should resolve this issue altogether, but meanwhile both page size, and the number of columns will affect performance.

Regards,
Dimiter Topalov
Progress Telerik

[Sunil]

Hello ,

     

[Sunil]

Hi ,

   I was looking for Server side pagination in Kendo Angular grid with filters . Could you please provide me any reference so that i can use and implement in our Project . Any working example would be really Appreciated if you can provide ASAP .Thanks

[Dimiter Topalov]

Hello Sunil,

The following Grid online demos feature server-side data operations like paging, filtering, and sorting:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/#toc-indicating-ongoing-data-operations

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started // second example - remote data

To enable the filtering functionality, set filterable to true, and bind the Grid filter input to the current state object.

Here are the updated examples:

https://stackblitz.com/edit/angular-jaepws?file=app/app.component.ts

https://stackblitz.com/edit/angular-kcp5ve?file=app/app.component.ts

Further details for enabling the filtering functionality are available in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/

In the virtual scrolling example, use the dataStateChange event handler as opposed to pageChange to handle all data operations simultaneously in one place only.

Sample apps that feature server-side data operations are also available in the following .NET Core integration article:

https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik