New to Telerik UI for ASP.NET MVC? Download free 30-day trial
ASP.NET MVC TreeView Drag and Drop
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
CLIENT-SIDE API SERVER-SIDE APIDescription
Telerik UI for ASP.NET MVC supports the drag-and-drop feature for many of its components. Depending on the specific component and scenario, dragging and dropping enable you to perform various operations in a fast and efficient way by dragging an element to a dropzone. For example, you can reorder rows inside and outside a table, implement the editing functionality in a component, or reorder tree nodes.
Whatever dragging and dropping target as a scenario, the drag-and-drop feature of the Telerik UI for ASP.NET MVC components is based and built upon on the Kendo UI for jQuery Drag and Drop approach. The Drag and Drop combines the kendoDraggable
and kendoDropTarget
controls, whose capabilities seamlessly integrate with the whole suite components.
The Telerik UI for ASP.NET MVC TreeView exposes a drag and drop functionality. To enable it, enable the DragAndDrop()
option. Now, you can drag and drop nodes at all levels within the TreeView or between multiple TreeViews. The dragged node has a tooltip, which indicates where it can be dropped. Also, if the dragged node has child nodes, they are moved along with their parent at the destination node.
You can customzie the default drag-and-drop behavior by handling the DragStart
, Drag
, DragEnd
, and Drop
TreeView events. For more information on the Treeview event handling, refer to the Events section in the documentation.
This example demonstrates how you can drag and drop nodes between different parents in the same TreeView or between different component instances.