A Grid with Larger Data Sets Hangs or Freezes the Application

Environment

Description

When I load a large data set such as 10,000 records in the Kendo UI for Angular Grid, or when I add more Grid columns (for example, 100), the application hangs for a while. Is there a data limit that the Grid can display without causing performance issues?

Cause

The performance of the Angular application is directly affected by the number of DOM elements you want to render on the page. This is valid for all browsers.

When a Kendo UI for Angular Grid component is used within an Angular template, the generated HTML contains multiple elements like table, tr, td, and so on, that need to be rendered on the page. The greater the number of Grid columns and rows is, the heavier the generated DOM and the related performance issues will be.

A universal limit for the number of Grid columns or data items that ensures optimal performance does not exist as the performance is affected by multiple factors that are specific to the client browser and machine.

Solution

Limiting the number of rendered rows and columns at once trough paging or virtual scrolling, and column virtualization is the most effective optimization. For more information on the most common performance optimization techniques, refer to the article on performance tips.