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. To define the virtual scrolling functionality, set scrollable
to virtual
.
Generally, to determine when a pageChange
event has to be fired so that the Grid obtains and displays the next or the previous portion (page) of data items, the virtual scrolling functionality of the Grid relies on calculations that are based on the fixed and equal rowHeight
of the rows, the set pageSize
of the Grid, and the scrollTop
position of the scrollable data table container. In master-detail scenarios, you have to predefine both rowHeight
and detailRowHeight
to ensure the proper functioning of the data virtualization, loading, and rendering of the correct items.
Getting Started
To configure the Grid for virtual scrolling:
- Set its height either through its
height
input or through thestyle
property. - Set the regular or detail row height and the number of records.
- Provide the data for each page through the
pageChange
event handler.
To work properly, virtual scrolling requires you to set the following configuration options:
- (Required)
scrollable
—Set it tovirtual
. - (Required)
height
- (Required)
rowHeight
—Has to represent the actualheight
of each Grid row (tr
) element in the DOM. The providedrowHeight
number is used for internal calculations and does not set the row height of the Grid. - (Required)
skip
- (Required)
pageSize
—To avoid unexpected behavior during scrolling, setpageSize
to at least three times 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
—Instruct thedata
option to useGridDataResult
with the configuredtotal
field. - (Optional)
detailRowHeight
—Set thedetailRowHeight
option only when you use detail rows.
Virtualization with Local Data
Virtualization with Remote Data
Virtualization with Grouping
You can use virtual scrolling in combination with grouped data by utilizing the kendoGridGroupBinding
directive. The directive supports only the processing of in-memory data and you have to provide the full set of data that will be processed. The Grid collapseGroup
and expandGroup
methods are not supported when the directive is applied.
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 pageChange
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.