Using Virtualization with Grouping

Updated on Jun 29, 2026

You can use virtual scrolling in combination with grouped data.

1. Set the groupable and group options of the Grid.
2. Set the scrollable option to virtual.
3. Handle the emitted onDatastatechange event. The onDatastatechange event fires upon user interaction with the scrolling or changing the groups, and then processes the data and returns the data to the Grid.

To programmatically implement the processing of the data, either:

• Send a request to the server to execute the grouping on the server side, or
• Use the process method of the DataQuery library which automatically processes the data.

The Grid expects the grouped data to be a collection of GroupResults.

The following example demonstrates how to use virtual scrolling with grouped data by handling the dataStateChange event to process and return paginated grouped results to the grid.

Change Theme

Theme

Loading ...

Suggested Links

• Overview of Grouping
• API Reference of the Grid Component