Virtual Scrolling
The Kendo UI for Angular TreeList supports virtual scrolling as an alternative to paging. Virtual scrolling renders only the rows currently visible in the viewport, regardless of the total data size. As the user scrolls, the TreeList calculates which rows to display based on the scroll position, the fixed rowHeight, and the configured pageSize, swapping rows in and out of the DOM to maintain a smooth experience with large datasets.
Virtual scrolling in the TreeList requires the following settings:
- (Required)
scrollable—Set tovirtual. - (Required)
height—Sets the height of the TreeList. - (Required)
rowHeight—Must match the actual height of each TreeList row (tr) element in the DOM. The value is used for internal calculations and does not directly set the row height. - (Required)
pageSize—To avoid unexpected behavior during scrolling, setpageSizeto at least three times the number of visible rows. The number of visible rows is determined by theheightandrowHeightsettings. - (Required) Data source—Provide data through one of the following:
- The
dataproperty combined with thefetchChildrenandhasChildrencallbacks. Use this approach when you manage the tree structure manually or load data from a remote source. - The
kendoTreeListHierarchyBindingorkendoTreeListFlatBindingdirective. These directives handle in-memory data operations automatically and are the recommended approach for local data.
- The
Depending on your scenario, see the following sections for configuration and examples:
| Section | Description |
|---|---|
| Virtualization with Local Data | Use kendoTreeListHierarchyBinding or kendoTreeListFlatBinding for fast, in-memory operations when all data is available on the client. |
| Virtualization with Manual Data Binding | Use the data property with fetchChildren and hasChildren callbacks for manual tree structure control or when not using a binding directive. |
| Virtualization with Remote Data | Bind the TreeList to remote sources, handle pageChange events, and display loading indicators for large-data experiences. |
| Virtualization with Aggregates | Combine virtual scrolling with aggregated hierarchical data using the binding directives. |
| Virtualization with Responsive Columns | Maintain consistent row heights while using responsive columns that adapt to the viewport width. |
Virtualization with Local Data
To bind the TreeList to local data with virtual scrolling, use the kendoTreeListHierarchyBinding or kendoTreeListFlatBinding directive. The directive handles in-memory data operations and the TreeList calculates which rows to display based on the pageSize and scroll position.
The following example demonstrates virtual scrolling with local data.
Virtualization with Manual Data Binding
Use manual data binding when you need more control over the tree structure, such as when loading data from a remote source, implementing custom logic for determining parent-child relationships, or managing data that doesn't fit a standard hierarchical format.
Instead of using a binding directive, you can provide data directly through the data property and control the tree structure with two callbacks:
fetchChildren—Returns the child nodes for a given parent item.hasChildren—Determines whether a given item has child nodes.
When you use fetchChildren, the TreeList maintains an internal flat list of all expanded nodes and renders only the pageSize rows that fall within the current viewport. Virtualization is active regardless of whether the pageChange event is handled.
Pass the array of root items to data and return each item's children array in fetchChildren.
Build a parentId-to-children map before binding. Pass the root items (those with no parent) to data and use the map inside fetchChildren and hasChildren.
Virtualization with Remote Data
To use virtualization with remote data, bind the data property to a remote source. Implement the fetchChildren event handler to fetch new data from the server as the user expands nodes.
The following example demonstrates virtual scrolling with remote data.
Virtualization with Aggregates
You can use virtual scrolling in combination with aggregates by using the kendoTreeListFlatBinding or kendoTreeListHierarchyBinding directive. The directives support only in-memory data processing, so you must provide the full dataset.
The following example demonstrates virtual scrolling with 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 use responsive columns that show or hide based on the viewport width by setting the media property on each column.
The following example demonstrates virtual scrolling with responsive columns.
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.