Example of Virtual Mask Row in Blazor DataGrid Component
This sample shows the DataGrid component in action by displaying a virtual mask row while scrolling vertically to load a new set of records on demand.
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 |
The Blazor DataGrid component allows you to render only the rows and columns that are visible in the view-port without buffering the entire datasource, and a loading placeholder indicator was displayed while the new data was loaded.
The OverscanCount property is used to render additional items in the DOM before and after the visible items (based on pagesize) during virtual scrolling and initial rendering. This reduces the frequency of rendering during scrolling. In this demo, the OverscanCount property is set to 5.
Set the EnableVirtualMaskRow property value to true to enable mask row support. To improve performance, the same set of DOM elements is used again.