Virtual Scrolling with Grouping

The native Vue Grid by Kendo UI enables you to use virtualization with grouped data.

To enable grouping:

1. Set the groupable and group options of the Grid.
2. Set the scrollable option to virtual.
3. Set the all-grouped-items so that the scroll experience is as smooth as possible.
4. Set the collapsed-groups so that the collapesd groups are persisted correctly.
5. Set the unique-field to the field that is unique for the items.
6. Handle the emitted datastatechange event. The datastatechange event fires when the user interacts with the Grid by scrolling or changing its groups, then processes the data, and returns the requested page to the Grid. To implement the processing of the data programmatically, send a request to the server to execute the grouping for the current page on 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.

Suggested Links

• Overview of Grouping
• API Reference of the Grid Component