Example of Drag and Drop in Blazor DataGrid Component
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/1991 | |
| 10002 | ANATR | 4/4/1990 | |
| 10003 | ANTON | 11/30/1957 | |
| 10004 | BLONP | 10/22/1930 | |
| 10005 | BOLID | 2/18/1953 | |
| 10006 | ALFKI | 5/15/1991 | |
| 10007 | ANATR | 4/4/1990 | |
| 10008 | ANTON | 11/30/1957 | |
| 10009 | BLONP | 10/22/1930 | |
| 10010 | BOLID | 2/18/1953 | |
| 10011 | ALFKI | 5/15/1991 | |
| 10012 | ANATR | 4/4/1990 |
Order ID | Customer ID | Order Date |
|---|
| No records to display |
The Blazor DataGrid rows can be dragged and dropped to another DataGrid by enabling AllowRowDragAndDrop property. The target control on which the DataGrid rows has to be dropped can be set by using TargetID property of the GridRowDropSettings component.
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, using the drag icon located on the left side of the grid column.