Example of List Binding in Blazor Tree Grid Component

Tree Grid / Virtual Scrolling / List Binding

This sample demonstrates the Tree Grid component with the horizontal and vertical scrollbars to view the exceeded tree grid content in list binding with large data.

Loading 10,000 Rows and 20 Columns

The Tree Grid UI virtualization allows it to render only rows and columns visible within the view-port without buffering the entire datasource. Tree Grid supports both row and column virtualization. To enable row virtualization, set EnableVirtualization property as true. For column virtualization, set EnableColumnVirtualization property as true.

In this demo, Tree Grid is rendered with row and column virtualization for 10,000 rows and 20 columns.

Set the EnableVirtualMaskRow property value to true to enable mask row support.

The OverscanCount property is used to render additional items in the DOM before and after the visible items (based on page size) during virtual scrolling and initial rendering. This reduces the frequency of rendering during scrolling. In this demo, the OverscanCount property is set to 5.

More information on the Virtual Scrolling can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE