Performance Tips

Not all browsers perform equally well in all scenarios, especially in cases which involve large data-sets.

To achieve better performance results when using the Kendo UI Grid for Angular, combine any of the following approaches which are applicable to your project:

  • Work with the latest versions of the Kendo UI components for Angular which contain recent enhancements, fixes, and optimizations.
  • Enable the Angular production mode.
  • Reduce the number of the DOM elements that are rendered by the Grid through its paging or virtual scrolling configuration options.

Reusing Data Items

The browser-performance optimization of the Grid by reusing its data items is now available as a built-in configuration. For more information, refer to the Introducing the 60fps Grid in Kendo UI for Angular blog post.

Grids which have their paging or virtual scrolling functionality enabled normally render each row from scratch during the paging or scrolling processes. If the cell contains complex components, this behavior worsens the performance of the component. To improve the efficiency, you can reuse the cell content and update only the template context through the based on the built-in Angular Change Detection mechanism and by mutating the data items instead of replacing them with new instances.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?