Virtual Scrolling
Virtual scrolling provides an alternative to paging.
While the user is scrolling the table, the Grid requests and displays only the visible pages.
Getting Started
To set up the Grid for virtual scrolling:
- Set its height either through its
styleproperty. - Set the regular or detail row height and the number of records.
- Provide the data for each page through the
onPageChangeevent handler. You can also pass all the data.
To work properly, the virtualization requires you to set the following configuration options:
- (Required)
scrollable—Set it tovirtual. - (Required)
heightthroughstyle - (Required)
skip - (Required)
total - (Required)
pageSize—To avoid unexpected behavior during scrolling, setpageSizeto at least twice the number of the visible Grid elements. The number of the visible Grid elements is determined by theheightandrowHeightsettings of the Grid. - (Required)
data - (Required)
rowHeight
Using Virtualization with Grouping
You can use virtual scrolling in combination with grouped data.
- Set the
groupableandgroupoptions of the Grid. - Set the
scrollableoption tovirtual. - Handle the emitted
onDataStateChangeevent. TheonDataStateChangeevent 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
processmethod of theDataQuerylibrary which automatically processes the data.
The Grid expects the grouped data to be a collection of GroupResults.
Using Virtualization with Detail Rows
You can also use DOM virtualization in combination with detail rows.
- Set the
detailto the detail component. - Set the
detailRowHeightto the detail component height. - Set the
detailExpandprop to handle the expand state of the Grid internally. - Set the
onExpandChange
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.
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.