Grids
Example of Drag And Drop in ASP.NET Core Tree Grid Control
This sample demonstrates the TreeGrid component's row drag and drop feature, enabling users to transfer tasks between tree grids effortlessly via drag and drop actions.
Task ID | Task Name | Start Date |
|---|---|---|
| 1 | Planning | 3/2/2017 |
| 2 | Plan timeline | 3/2/2017 |
| 3 | Plan budget | 3/2/2017 |
| 4 | Allocate resources | 3/2/2017 |
| 5 | Planning complete | 7/2/2017 |
| 6 | Design | 10/2/2017 |
| 7 | Software Specification | 10/2/2017 |
| 8 | Develop prototype | 10/2/2017 |
| 9 | Get approval from customer | 2/13/2017 |
| 10 | Design complete | 2/14/2017 |
Task ID | Task Name | Start Date |
|---|---|---|
| No records to display |
Enabling the
allowRowDragAndDrop
property facilitates drag and drop functionality for Tree Grid rows. Additionally, when performing row drag and drop between tree grids,
the
TreeGridRowDropSettings
component's
targetID
property specifies the target onto which the Tree Grid rows should be dropped.
For the row drag and drop feature to function correctly, it's essential to have a primary key column. To define this primary key, ensure that
isPrimaryKey
is set to true for a unique data column.
To select the rows, enable the
Selection
feature. Selecting multiple rows within the Tree Grid is as simple as clicking and dragging them.
The Row drag and drop feature is enabled in both TreeGrids in this demo. Drag and drop rows between TreeGrids by selecting the rows and dragging them to the adjacent TreeGrid.
More information on the row drag and drop can be found in this documentation section.