Example of Drag and Drop in ASP.NET MVC 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.

DEMO
SOURCE

Enabling the allowRowDragAndDrop opens in a new tab property facilitates drag and drop functionality for Tree Grid rows. Additionally, when performing row drag and drop between tree grids, the TreeGridRowDropSettings opens in a new tab component's targetID opens in a new tab 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 opens in a new tab is set to true for a unique data column.

To select the rows, enable the Selection opens in a new tab 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 opens in a new tabsection.

Transform your ASP.NET MVC web apps today with Syncfusion® ASP.NET MVC components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab