Blazor DataGrid Example - Lazy Loading 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.
Looking for the full Blazor DataGrid component overview, features, pricing, and documentation? Visit our Blazor DataGrid component page.