Blazor DataGrid Example - Virtual Mask Rows
Order ID | Customer ID | Order Date | Freight | Ship Name | Ship Country |
|---|
| 1001 | ALFKI | 5/15/1991 | $2.30 | Simons bistro | Denmark |
| 1002 | ANATR | 4/4/1990 | $3.30 | Queen Cozinha | Brazil |
| 1003 | ANTON | 11/30/1957 | $4.30 | Frankenversand | Germany |
| 1004 | BLONP | 10/22/1930 | $5.30 | Ernst Handel | Austria |
| 1005 | BOLID | 2/18/1953 | $6.30 | Hanari Carnes | Switzerland |
| 1006 | ALFKI | 5/15/1991 | $4.60 | Simons bistro | Denmark |
| 1007 | ANATR | 4/4/1990 | $6.60 | Queen Cozinha | Brazil |
| 1008 | ANTON | 11/30/1957 | $8.60 | Frankenversand | Germany |
| 1009 | BLONP | 10/22/1930 | $10.60 | Ernst Handel | Austria |
| 1010 | BOLID | 2/18/1953 | $12.60 | Hanari Carnes | Switzerland |
| 1011 | ALFKI | 5/15/1991 | $6.90 | Simons bistro | Denmark |
| 1012 | ANATR | 4/4/1990 | $9.90 | Queen Cozinha | Brazil |
| 1013 | ANTON | 11/30/1957 | $12.90 | Frankenversand | Germany |
| 1014 | BLONP | 10/22/1930 | $15.90 | Ernst Handel | Austria |
| 1015 | BOLID | 2/18/1953 | $18.90 | Hanari Carnes | Switzerland |
| 1016 | ALFKI | 5/15/1991 | $9.20 | Simons bistro | Denmark |
| 1017 | ANATR | 4/4/1990 | $13.20 | Queen Cozinha | Brazil |
| 1018 | ANTON | 11/30/1957 | $17.20 | Frankenversand | Germany |
| 1019 | BLONP | 10/22/1930 | $21.20 | Ernst Handel | Austria |
| 1020 | BOLID | 2/18/1953 | $25.20 | Hanari Carnes | Switzerland |
| 1021 | ALFKI | 5/15/1991 | $11.50 | Simons bistro | Denmark |
| 1022 | ANATR | 4/4/1990 | $16.50 | Queen Cozinha | Brazil |
| 1023 | ANTON | 11/30/1957 | $21.50 | Frankenversand | Germany |
| 1024 | BLONP | 10/22/1930 | $26.50 | Ernst Handel | Austria |
| 1025 | BOLID | 2/18/1953 | $31.50 | Hanari Carnes | Switzerland |
| 1026 | ALFKI | 5/15/1991 | $13.80 | Simons bistro | Denmark |
| 1027 | ANATR | 4/4/1990 | $19.80 | Queen Cozinha | Brazil |
| 1028 | ANTON | 11/30/1957 | $25.80 | Frankenversand | Germany |
| 1029 | BLONP | 10/22/1930 | $31.80 | Ernst Handel | Austria |
| 1030 | BOLID | 2/18/1953 | $37.80 | Hanari Carnes | Switzerland |
| 1031 | ALFKI | 5/15/1991 | $16.10 | Simons bistro | Denmark |
| 1032 | ANATR | 4/4/1990 | $23.10 | Queen Cozinha | Brazil |
| 1033 | ANTON | 11/30/1957 | $30.10 | Frankenversand | Germany |
| 1034 | BLONP | 10/22/1930 | $37.10 | Ernst Handel | Austria |
| 1035 | BOLID | 2/18/1953 | $44.10 | Hanari Carnes | Switzerland |
| 1036 | ALFKI | 5/15/1991 | $18.40 | Simons bistro | Denmark |
| 1037 | ANATR | 4/4/1990 | $26.40 | Queen Cozinha | Brazil |
| 1038 | ANTON | 11/30/1957 | $34.40 | Frankenversand | Germany |
| 1039 | BLONP | 10/22/1930 | $42.40 | Ernst Handel | Austria |
| 1040 | BOLID | 2/18/1953 | $50.40 | Hanari Carnes | Switzerland |
This sample demonstrates the DataGrid virtual mask row feature for displaying loading indicators during on-demand data loading.
The Blazor DataGrid supports virtual mask rows, which display placeholder elements while new data is being loaded during vertical scrolling. This provides visual feedback to users that data is loading, improving perceived performance and user experience.
The DataGrid virtualization renders only visible rows and columns in the viewport without buffering the entire datasource. Enable virtual mask rows by setting the EnableVirtualMaskRow property to true.
Optimize virtual scrolling performance using the OverscanCount property, which renders additional items in the DOM before and after visible items (based on page size) during virtual scrolling and initial rendering. This reduces rendering frequency during scroll operations. In this demo, OverscanCount is set to 5.
Key features:
- Virtual mask rows display while loading new data sets
- DOM elements are reused to improve performance
- OverscanCount reduces rendering operations during scrolling
- Provides smooth scrolling experience with large datasets
Scroll vertically through the DataGrid to observe the virtual mask row loading indicators in action.