Virtual Scrolling

Premium

Virtual scrolling provides an alternative to paging.

While the user is scrolling the table, the Grid requests and displays only the visible pages.

As of KendoReact 11.0.0, the Grid's default scrollable mode is set to virtual for licensed users. To enable virtualization, simply set the Grid's height using the style property.

Optionally, you can further refine and customize virtualization behavior in the Grid by configuring the following props:

• skip — Specifies the number of records to skip.
• take — Defines the number of records to display.
• total — Sets the total number of records.
• pageSize — Determines the number of records per page.
• rowHeight — Sets the height of each row.
• detailRowHeight — Sets the height of each detail row.

Change Theme

Theme

Loading ...

Using Virtualization with Grouping

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.

Change Theme

Theme

Loading ...

Using Virtualization with Detail Rows

You can also use DOM virtualization in combination with detail rows.

1. Set the detail to the detail component.
2. Set the detailExpand prop to handle the expand state of the Grid internally.
3. Set the onDetailExpandChange

Change Theme

Theme

Loading ...

Using Virtualization with Responsive Columns

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.

Change Theme

Theme

Loading ...

Debouncing pageChange Events

When configured for virtualization, the Grid fires the onPageChange 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.

Change Theme

Theme

Loading ...

Suggested Links

• React Data Grid
• API Reference of the Grid
• API Index of the Grid