Example of Default Selection in Blazor DataGrid Component
This sample shows how to use DataGrid's selection feature, which allows you to select rows or cells with a simple mouse down or keyboard interaction.
Order ID | Customer ID | Freight | Ship City | Ship Country |
|---|
| 10001 | ALFKI | $2.30 | Berlin | Denmark |
| 10002 | ANATR | $3.30 | Madrid | Brazil |
| 10003 | ANTON | $4.30 | Cholchester | Germany |
| 10004 | BLONP | $5.30 | Marseille | Austria |
| 10005 | BOLID | $6.30 | Tsawassen | Switzerland |
| 10006 | ALFKI | $4.60 | Berlin | Denmark |
| 10007 | ANATR | $6.60 | Madrid | Brazil |
| 10008 | ANTON | $8.60 | Cholchester | Germany |
| 10009 | BLONP | $10.60 | Marseille | Austria |
| 10010 | BOLID | $12.60 | Tsawassen | Switzerland |
| 10011 | ALFKI | $6.90 | Berlin | Denmark |
| 10012 | ANATR | $9.90 | Madrid | Brazil |
The Blazor DataGrid offers interactive support for highlighting the row or cell that you choose. A simple mouse down or keyboard interaction can be used to make a selection. Set the AllowSelection property to true to enable selection.
DataGrid supports two types of selection, which can be configured via the Type property of the GridSelectionSettings component. They are,
- Single - This option is enabled by default. Allows the user to choose only one row or cell at a time.
- Multiple - Allows the user to select more than one row or cell at the same time.
There are also three modes of selection available, which can be set using the Mode property. They are,
- Row - This option is enabled by default. Allows row selection in DataGrid.
- Cell - Enables the selection of cells in DataGrid.
- Both - Allows row and cell selection in DataGrid. clicking any cell selects both the row and the cell at the same time.
Hold down the Ctrl key and click the desired rows or cells to perform the multi-selection. Hold the Shift key and click the rows or cells to select a range of rows or cells.
More information about the Selection feature can be found in this documentation section.