New to Kendo UI for Vue? Start a free 30-day trial

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. 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?