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.
- Virtualization with Paging - This feature combines the benefits of both paging and virtual scrolling. It allows you to load only a portion of the data for the currently selected page, while also rendering only the visible rows in the Grid content viewport. This is ideal when working with large datasets, as it reduces the number of DOM elements on the page and improves performance.
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.
The following demo shows the performance of the Kendo UI for Angular Grid when working with large data sets. The demo contains a Grid with 100,000 records and 100 columns.
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:
- Clone or download the source code from GitHub.
- Install the required dependencies using
npm installcommand. - Run the application in production mode using
ng servecommand. - Observe the real performance results from the production build.