Virtual Scrolling
Virtual scrolling provides an alternative to paging.
While the user is scrolling the table, the TreeList renders only the rows for the current page depending on scroll position. To define the virtual scrolling functionality, set scrollable to virtual.
To determine when a pageChange event is fired so that the TreeList obtains and displays the next or the previous portion (page) of data items, the virtual scrolling functionality of the TreeList relies on calculations that are based on the fixed and equal rowHeight of the rows, the set pageSize of the Treelist, and the scrollTop position of the scrollable data table container.
Getting Started
To configure the TreeList for virtual scrolling:
- Set its height either through its
heightinput or through thestyleproperty. - Set the row height.
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 actualheightof each TreeList row (tr) element in the DOM. The providedrowHeightnumber is used for internal calculations and does not set the row height of the TreeList. - (Required)
pageSize—To avoid unexpected behavior during scrolling, setpageSizeto at least three times the number of the visible TreeList elements. The number of the visible TreeList elements is determined by theheightandrowHeightsettings of the TreeList. - (Required)
data
Virtualization with Local Data
The following example demonstrates the virtualization of local data.
Virtualization with Remote Data
The following example demonstrates the virtualization of remote data.
Virtualization with Aggregates
You can use virtual scrolling in combination with aggregates by utilizing the kendoTreeListFlatBinding or kendoTreeListHierarchyBinding directive. The directives support only the processing of in-memory data and you have to provide the full set of data that will be processed.
The following example demonstrates the virtualization of aggregated hierarchical data.
Virtualization with Responsive Columns
The virtual scrolling functionality requires that all TreeList 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.
Known Limitations
The TreeList's virtual scrolling may be affected by browser-specific limitations in terms of the maximum height of the container element. Values higher than the browser's limit cannot ensure reliable vertical scrolling and the scrollbar's thumb may seem immovable.