Blazor DataGrid Example - Checkbox Selection
This sample demonstrates the DataGrid's checkbox selection functionality. Using the header checkbox, you can select or deselect all rows. Click the desired row checkbox to select or deselect it.
Order ID | Customer ID | Order Date | Freight | Shipped Date |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 | 7/16/1996 | |
| 10002 | ANATR | 4/4/1990 | $3.30 | 9/11/1996 | |
| 10003 | ANTON | 11/30/1957 | $4.30 | 10/7/1996 | |
| 10004 | BLONP | 10/22/1930 | $5.30 | 12/30/1996 | |
| 10005 | BOLID | 2/18/1953 | $6.30 | 12/3/1997 | |
| 10006 | ALFKI | 5/15/1991 | $4.60 | 7/16/1996 | |
| 10007 | ANATR | 4/4/1990 | $6.60 | 9/11/1996 | |
| 10008 | ANTON | 11/30/1957 | $8.60 | 10/7/1996 | |
| 10009 | BLONP | 10/22/1930 | $10.60 | 12/30/1996 | |
| 10010 | BOLID | 2/18/1953 | $12.60 | 12/3/1997 | |
| 10011 | ALFKI | 5/15/1991 | $6.90 | 7/16/1996 | |
| 10012 | ANATR | 4/4/1990 | $9.90 | 9/11/1996 |
The Blazor DataGrid supports multi-selection through the use of checkboxes in each row. To display a checkbox in each DataGrid row, set the column type to CheckBox in the Type property of the GridColumn component.
The PersistSelection property of the GridSelectionSettings component can be used to persist selection across all operations. Any one of the columns should be defined as a primary key using the IsPrimaryKey property of the GridColumn component for persisting selection on the DataGrid.
In this demo, multi-selection is enabled along with selection persistence. Remote data support has been enhanced, allowing you to dynamically switch the DataGrid's data source between local and remote data seamlessly. You can shift from local data to remote data by checking the Remote Data check box provided in the sample.
More information about the Checkbox selection feature can be found in this documentation section.