jQuery TreeList Drag & 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:
API REFERENCEDescription
Kendo UI for jQuery 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 Kendo UI for jQuery 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 Kendo UI for jQuery TreeList supports editing by dragging and dropping.
This demo shows how to initialize the TreeList with the drag-and-drop feature enabled. Setting the editable.move.reorderable
property to true
enables the nodes of the TreeList to be dragged and dropped across all levels allowing the child nodes to change also their order within the same parent scope.
This TreeList example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.