Example of undefined in React Tree Grid Component


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.

More Details...


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.