Blazor DataGrid Example - Drag and Drop Rows
Order ID | Customer ID | Order Date |
|---|
| 10001 | ALFKI | 5/15/2023 | |
| 10002 | ANATR | 4/4/2025 | |
| 10003 | ANTON | 6/30/2024 | |
| 10004 | BLONP | 10/22/2022 | |
| 10005 | BOLID | 2/18/2024 | |
| 10006 | ALFKI | 5/15/2023 | |
| 10007 | ANATR | 4/4/2025 | |
| 10008 | ANTON | 6/30/2024 | |
| 10009 | BLONP | 10/22/2022 | |
| 10010 | BOLID | 2/18/2024 | |
| 10011 | ALFKI | 5/15/2023 | |
| 10012 | ANATR | 4/4/2025 |
Order ID | Customer ID | Order Date |
|---|
| No records to display |
This sample demonstrates the DataGrid row drag and drop functionality for moving rows between multiple DataGrids.
The Blazor DataGrid supports row drag and drop operations across different grids. Enable this feature by setting the AllowRowDragAndDrop property to true.
Configure the drop target using the TargetID property of the GridRowDropSettings component to specify which grid will receive the dropped rows.
By default, the AllowEmptyAreaDrop property is enabled, allowing users to drop records into empty areas of the target grid, enhancing usability.
In this demo:
- Selection is enabled for row selection
- Multiple rows can be selected by clicking and dragging
- Rows can be dragged between DataGrids or within the same grid
- The drag icon on the left side of the grid column facilitates row selection and dragging
- Drop rows into the target grid to complete the transfer
For more detailed information about row drag and drop, refer to the row drag and drop documentation.