Blazor Tree Grid Example - Drag and Drop
This sample shows the Tree Grid component with the row drag and drop functionality. To move rows, drag and drop them between TreeGrids.
Task ID | Task Name | Progress |
|---|
| 1 | Planning | Open | |
| 2 | Plan timeline | In Progress | |
| 3 | Plan budget | Started | |
| 4 | Allocate resources | Open | |
| 5 | Planning complete | Open | |
| 6 | Design | In Progress | |
| 7 | Software specification | Started | |
| 8 | Develop prototype | In Progress | |
| 9 | Get approval from customer | In Progress | |
| 10 | Design complete | In Progress |
Task ID | Task Name | Progress |
|---|
| No records to display |
By enabling the AllowRowDragAndDrop property, Tree Grid rows can be dragged and dropped into another Tree Grid. The TreeGridRowDropSettings component's TargetID property can be used to specify the target Tree Grid for dropped rows.
To select rows, enable the Selection feature. Selecting multiple rows within the Tree Grid is as simple as clicking and dragging.
In this demo, row drag and drop is enabled in both TreeGrids. Drag and drop rows between TreeGrids by selecting the rows and dragging them to the adjacent TreeGrid.
More information about the row drag and drop feature can be found in this documentation section.