Blazor DataGrid Example - Checkbox Selection
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 |
This sample demonstrates the DataGrid's checkbox selection functionality for multi-row selection.
The Blazor DataGrid supports multi-selection through checkboxes in each row. Use the header checkbox to select or deselect all rows at once, or click individual row checkboxes to select or deselect specific rows.
To display checkboxes in each DataGrid row, set the column Type property to CheckBox in the GridColumn component.
The PersistSelection property of the GridSelectionSettings component enables selection persistence across DataGrid operations. To use this feature, define at least one column as a primary key using the IsPrimaryKey property.
In this demo, multi-selection is enabled with selection persistence. The sample also includes the ability to dynamically switch between local and remote data sources by checking the Remote Data checkbox.
For more detailed information about checkbox selection, refer to the checkbox selection documentation.