Blazor DataGrid Example - Drag and Drop Rows
This example shows the DataGrid component with the row drag and drop functionality. To move rows, drag and drop them between DataGrids.
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 |
Blazor DataGrid rows can be dragged and dropped to another DataGrid by enabling AllowRowDragAndDrop property. The target control on which the DataGrid rows have to be dropped can be set by using TargetID property of the GridRowDropSettings component.
By default, the AllowEmptyAreaDrop property is enabled, allowing users to drop records into empty areas of the target DataGrid. This enhances the flexibility and usability of the drag-and-drop feature.
To select the rows in this demo, the selection feature should be enabled. Multiple rows can be selected within the DataGrid by simply clicking and dragging them. Row dragging and dropping is enabled in both DataGrids. Drag and drop rows between DataGrids by selecting rows and dragging to the adjacent DataGrid or by utilizing the drag icon.
Rearrange rows within the same grid by dragging and dropping them, with the drag icon located on the left side of the grid column.
More information about the Row drag and drop feature can be found in this documentation section.