Blazor DataGrid Example - Drag Selection
Order ID | Customer ID | Order Date | Freight |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 |
| 10002 | ANATR | 4/4/1990 | $3.30 |
| 10003 | ANTON | 11/30/1957 | $4.30 |
| 10004 | BLONP | 10/22/1930 | $5.30 |
| 10005 | BOLID | 2/18/1953 | $6.30 |
| 10006 | ALFKI | 5/15/1991 | $4.60 |
| 10007 | ANATR | 4/4/1990 | $6.60 |
| 10008 | ANTON | 11/30/1957 | $8.60 |
| 10009 | BLONP | 10/22/1930 | $10.60 |
| 10010 | BOLID | 2/18/1953 | $12.60 |
| 10011 | ALFKI | 5/15/1991 | $6.90 |
| 10012 | ANATR | 4/4/1990 | $9.90 |
Properties
| Selection Mode | |
| Cell Selection Mode |
This sample demonstrates the Blazor DataGrid with draggable row and cell selection functionality.
The Blazor DataGrid allows you to select multiple rows or cells by dragging your mouse or using touch interactions. To enable this feature, set the AllowDragSelection property to true in the GridSelectionSettings component.
Drag selection supports two cell selection modes, configurable using the GridSelectionSettings component's CellSelectionMode property:
- Flow - A range of cells is selected between the start and end indexes, including all cells in between rows.
- Box - A range of cells is selected from the start and end column indexes, including cells within rows in the specified range.
In this demo, the DataGrid is configured in row selection mode. You can change the selection Mode and CellSelectionMode using the provided options.
To enable multi-selection by dragging, set the selection Type property to Multiple.
For more detailed information about drag selection, refer to the selection documentation.