New to Kendo UI for Angular? Start a free 30-day trial

Performance

The Kendo UI for Angular Grid can work with large data sets containing hundreds of fields, that result in rendering millions of table-cells.

Key Performance Features

These features enable the Kendo UI for Angular Grid to display millions of records:

  • Column Virtualization - The column virtualization can reduce the number of DOM elements on the page. This feature will render only the visible columns dynamically when the user scrolls horizontally. This allows only rendering a portion of the data when the user needs it.
  • Virtual Scrolling (row virtualization) - This feature will only render a portion of the data initially, and it will dynamically render the rest of the data based on the scroll position. This is ideal when working with millions of records, as the Grid will render only a small subset of the data at a time.
  • Paging - Similar to the virtual scrolling, this will render only a portion of the data for the currently selected page. This feature can be used like an alternative to the virtual scrolling to cover other UX scenarios.

When testing the performance of the Kendo UI for Angular Grid, please make sure to build your application in production mode. Enabling production mode improves application performance by disabling development-only safety checks and debugging utilities, such as the expression-changed-after-checked detection. This is closer to what the end-user will experience when using the final deployed.

Example
View Source
Change Theme:

Testing Performance

We know that sometimes the numbers can tell everything better than words. That is why we have made a sample Angular application to test the actual performance numbers of the Kendo UI for Angular Grid. This sample application allows you to see how different features impact the performance.

You can download the sample application from GitHub.

To play with the demo and see how we built it, you may want to run it locally:

  1. Clone or download the source code from GitHub.
  2. Install the required dependencies using npm install command.
  3. Run the application in production mode using ng serve command.
  4. Observe the real performance results from the production build.