Blazor DataGrid Example - Default Selection
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 |
This sample demonstrates the DataGrid selection feature for interactive row and cell selection.
The Blazor DataGrid provides comprehensive selection support with simple mouse and keyboard interactions. To enable selection, set the AllowSelection property to true.
Selection Types (via GridSelectionSettings):
- Single - Allows selection of one row or cell at a time (default)
- Multiple - Allows selection of multiple rows or cells simultaneously
Selection Modes (via GridSelectionSettings):
- Row - Enables row selection (default)
- Cell - Enables individual cell selection
- Both - Enables both row and cell selection; clicking a cell selects both the row and cell
Keyboard Shortcuts for Multi-Selection:
- Ctrl + Click - Select multiple non-adjacent rows or cells
- Shift + Click - Select a continuous range of rows or cells
For more detailed information about the selection feature, refer to the selection documentation.