Blazor DataGrid Example - Lazy Load with Virtual Scrolling
Generating Data
Drag a column header here to group its column
Order ID Press Enter to sort | ProductID Press Enter to sort. Press Ctrl space to group | Product Name Press Enter to sort. Press Ctrl space to group | Customer ID Press Enter to sort. Press Ctrl space to group | Units In Stock Press Enter to sort. Press Ctrl space to group |
|---|
| No records to display |
This sample demonstrates lazy loading grouping with virtual scrolling for efficient rendering of large hierarchical datasets.
The Blazor DataGrid is configured for lazy loading with virtualization by:
- Setting the EnableLazyLoading property to true in the GridGroupSettings
- Setting the EnableVirtualization property to true
When enabling virtualization, you must define:
- PageSize property from
GridPageSettings - RowHeight property for accurate virtual scrolling calculations
In this demo:
- Data is grouped by Product Name and Customer ID columns
- Grid initially renders only collapsed caption rows
- Grouped data is loaded on-demand when expanding caption rows
- Only relevant data in the viewport is rendered, providing excellent performance with large datasets
For more detailed information about lazy loading with virtualization, refer to the lazy load grouping documentation.