Example of Checkbox Selection in Blazor DataGrid Component
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 GridColumn component's Type property.
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 GridColumn component's IsPrimaryKey property for persisting selection on the DataGrid.
DataGrid multi-selection is enabled in this demo, along with selection persistence.
More information about the Checkbox selection feature can be found in this documentation section.