This sample demonstrates row virtualization in the TreeGrid component, enabling smooth scrolling and efficient rendering of large sets of self-referencing records with full CRUD support and custom cell templates.
Row virtualization in TreeGrid displays only the rows currently visible in the viewport, ensuring smooth scrolling and optimal performance with large datasets.
TreeGrid virtualization is enabled by setting the enableVirtualization property to true. The height property must be explicitly defined when virtualization is enabled.
For seamless scrolling, set args.enableSeamlessScrolling = true in the TreeGrid's load event.
This ensures smooth vertical and horizontal transitions, providing a smoother experience during fast scrolling when virtualization is enabled.
This demo showcases a self‑referential data source containing 10,000 records. In the TreeGrid, the hierarchical relationship is established by mapping the parentIdMapping property to the "ParentID" field and the idMapping property to the "TaskID" field in the data source.
The toolbar enables full CRUD operations along with hierarchy management options:
Indent: Moves the selected row to become the last child of the row directly above it.Outdent: Moves the selected row up one level, making it a sibling of its previous parent.Injecting Module:
Tree Grid features are organized into individual feature-specific modules.
To use the virtual scrolling functionality, inject
VirtualScroll module into the services.
More information on the Virtual Scrolling can be found in documentation section.