Example of Virtual Scrolling in ASP.NET MVC Tree Grid Control
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 as 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.
More information on the Virtual Scrolling can be found in documentation section.