The Kendo UI for Angular Grid supports virtual scrolling, which allows you to load and display large datasets efficiently by rendering only the visible rows in the viewport. This feature uses DOM virtualization, meaning that only the rows currently visible (plus a small buffer) are rendered in the DOM at any given time, regardless of the total data size. As a result, virtual scrolling provides a smooth scrolling experience without the need for pagination and significantly improves performance when working with large datasets.
To enable virtual scrolling, set the scrollable property to virtual and specify the height of the Grid. The Grid will then automatically calculate the number of records to display based on the pageSize and skip values.
After virtual scrolling is enabled in the Kendo UI for Angular Grid, you can configure the following additional settings:
rowHeight—Sets the height of the rows in the Grid.detailRowHeight—Sets the height of the master detail rows in the Grid.skip—Sets the number of records to skip when loading data. This is useful for implementing server-side paging.pageSize—Sets the number of records to load at once. This is useful for implementing server-side paging. The page size will be internally calculated based on the Grid's content viewport and the rowHeight value if one is set. To ensure smooth rendering and optimal performance, it is advisable to set pageSize to at least three times the number of visible rows in the Grid.loading—Sets the loading state of the Grid. This is useful for displaying a loading indicator while data is being fetched from the server.If you are using a Grid version earlier than 20, see the legacy requirements virtualization article for the requirements and setup.
Depending on your scenario, see the following sections for detailed configuration and examples:
| Section | Description |
|---|---|
| Virtualization with Local Data | Use kendoGridBinding for fast, in-memory operations like paging, sorting, and filtering when all data is available on the client. |
| Virtualization with Remote Data | Bind the Grid to remote sources using the data property, handle pageChange events, and show loading indicators for seamless large-data experiences. |
| Virtualization with Grouping | Combine virtual scrolling with grouped data, supporting both local and remote grouping, and programmatically expand or collapse groups. |
| Virtualization with Paging | Enable paging alongside virtual scrolling by setting the pageable property, allowing navigation through large datasets efficiently. |
| Virtualization with Responsive Columns | Maintain consistent row heights while using responsive columns and flexible cell templates for adaptive layouts. |
Each section provides configuration details and live examples to help you implement the right virtualization setup for your use case.
To bind the Grid to local data, use the kendoGridBinding directive. The directive handles the in-memory data operations such as paging, sorting, grouping, and filtering. The Grid will automatically calculate the number of records to display based on the pageSize and skip values. This allows for efficient data loading and rendering without requiring logic in the component setup.
The following example demonstrates how to use the kendoGridBinding directive with local data. The Grid will display the data with virtual scrolling enabled, allowing for efficient rendering and smooth scrolling experience.
Alternatively, you can use the data property to bind the Grid to a local data array. This approach is useful if you want to manually handle the data operations or use remote data. The next article section covers how to use the Grid with remote data.
To use virtualization with remote data, the data property of the Grid must be bound to a remote data source, such as an Observable or a server request, which retrieves the specific dataset required for the current view. Implement the pageChange event handler to fetch new data from the server as the user scrolls to a new page. This ensures the Grid dynamically fetches and displays the appropriate data while providing a smooth scrolling experience.
To display the loading indicator while the data is being fetched, set the loading property to true when retrieving data from the server. The Grid will then show a loading skeleton in place of the data rows until the new data is available.
The following example demonstrates how to implement virtual scrolling with remote data. The Grid will fetch data from the server as the user scrolls, and the loading indicator will be displayed while the data is being retrieved.
To use the kendoGridBinding directive with remote data and virtualization, you need to configure the directive to handle the remote data operation by following the remote data binding approach.
The following example demonstrates how to extend the kendoGridBinding directive to support remote data and work with virtual scrolling.
To customize the content of the Grid data cells while loading new data and replace the default loading skeleton, use the CellLoadingTemplateDirective.
The following example demonstrates how to render a different loading skeleton based on the type of the column content.
You can use virtual scrolling in combination with grouped data by using the kendoGridBinding directive with grouping enabled (by setting groupable to true or applying GroupableSettings). Alternatively, you can use the data property and provide the full set of grouped data to the Grid.
You can use virtual scrolling with grouped data in the following ways:
Using the kendoGridBinding directive—Enable grouping by setting groupable to true or applying GroupableSettings. This approach handles in-memory data operations, including grouping, paging, and filtering.
Using the data property—Bind the Grid to a grouped data array and provide the full set of grouped data (loaded in-memory) to the Grid.
Starting with Kendo UI for Angular 20.0.0, the
kendoGridGroupBindingdirective is deprecated. UsekendoGridBindingor thedataproperty for grouping with virtual scrolling.
The following example demonstrates the use of virtual scrolling with the kendoGridBinding directive. The Grid will display the grouped data with virtual scrolling enabled, allowing for efficient rendering and smooth scrolling experience.
The following example demonstrates the use of virtual scrolling with the data property. The groupChange event is used to handle the grouping and load the full set of grouped data into the Grid.
You can programmatically expand or collapse a specific group inside a Grid with virtual scrolling enabled by using the built-in expandGroup() and collapseGroup() methods. The two methods accept as an argument the index of the specific group both in root or hierarchical format and modify its expanded state accordingly.
The following example demonstrates how to programmatically expand and collapse the first group of a Grid with virtual scrolling enabled.
Use the kendoGridExpandGroupBy directive and its groupsInitiallyExpanded option to expand or collapse all group rows in one go. To do so, reset the expandedGroupKeys collection and set groupsInitiallyExpanded to the respective value.
The following example demonstrates how to programmatically expand and collapse all root level groups in a virtual scrolling Grid.
You can use virtual scrolling in combination with paging by setting the pageable property to true. The Grid will display a pager at the bottom, allowing you to navigate through the pages of data while maintaining the virtual scrolling functionality.
This setup is available from version 20.0.0 of the Grid.
The following example demonstrates how to use virtual scrolling with paging.
The virtual scrolling functionality requires that all Grid rows have an equal, predefined height. However, you can still keep virtual scrolling and use responsive columns which have different cell templates based on the column width.
When configured for virtualization, the Grid fires the pageChange event as often as possible. This behavior allows for a smoother scrolling experience when the data is available in memory.
If the data is requested from a remote service, it is advisable to debounce or otherwise limit the page changes.
The following example demonstrates how to debounce the pageChange event using the debounceTime operator from the RxJS library.