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.
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.