Example of Drag Selection in Blazor DataGrid Component
This example shows the Blazor Grid Component with a draggable row and cell selection. By dragging a grid with your mouse or touch, you can select multiple rows or cells.
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 |
The Blazor DataGrid allows you to select a row or a cell by dragging your mouse or touching the screen. Set the AllowDragSelection property of the GridSelectionSettings to true to enable the drag selection feature.
Drag Selection supports two types of cell selection modes, which can be set using the GridSelectionSettings component's CellSelectionMode property. They are,
- Flow - A range of cells is selected between the start and end indexes, which includes cells in between rows.
- Box - A range of cells is selected from the start and end column indexes that include cells in between rows within the range.
In this demo, DataGrid is rendered in Row selection mode. You can change the selection Mode and CellSelectionMode (take note of the selection mode).
Additionally, the Selection Type should be set to Multiple in order to select multiple rows or cells by dragging the mouse.
More information about Drag selection feature can be found in this documentation section.