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
style
property. - Set the regular or detail row height and the number of records.
- Provide the data for each page through the
onPageChange
event handler.
To work properly, virtual scrolling requires you to set the following configuration options:
- (Required)
scrollable
—Set it tovirtual
. - (Required)
height
throughstyle
- (Required)
skip
- (Required)
total
- (Required)
pageSize
—To avoid unexpected behavior during scrolling, setpageSize
to at least the number of the visible Grid elements. The number of the visible Grid elements is determined by theheight
androwHeight
settings of the Grid. - (Required)
data
- (Optional)
rowHeight
Using Virtualization with Grouping
A groupable Grid with enabled virtualization does not support the expand and collapse functionalities.
You can use virtual scrolling in combination with grouped data.
Set the
scrollable
option tovirtual
.Handle the emitted
onDataStateChange
event. TheonDataStateChange
event fires upon user interaction with the scrolling or changing the groups, and then processes the data and returns the requested page to the Grid.To programmatically implement the processing of the data, either:
- Send a request to the server to execute the grouping for the current page on the server side, or
- Use the
process
method of theDataQuery
library which automatically processes the data.
The Grid expects the grouped data to be a collection of GroupResults
.
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.