• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

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.

DEMO
SOURCE

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.

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