Drag and Drop

The TreeView allows the user to reorder its nodes or transfer them to another TreeView instance via Drag and Drop.

Setup

To activate the Drag and Drop functionality, apply the kendoTreeViewDragAndDrop directive on a TreeView component.

The directive allows the nodes to be dragged and the TreeView will emit the following events:

  • nodeDragStartFired when the dragging begins. If prevented, the node won't be dragged.
  • nodeDragFired during dragging.
  • nodeDropFired when a node is dropped on a valid target. If prevented or marked as invalid, the subsequent addItem and removeItem events will not be fired.
  • addItemFired on the targeted TreeView after the node is dropped.
  • removeItemFired on the source TreeView after the node is dropped.
  • nodeDragEndFired when the dragging ends.

In the following example the event arguments are logged to the console as they occur.

Example
View Source
Edit In Stackblitz  
Change Theme:

Built-in Editing Directive

The kendoTreeViewDragAndDrop directive allows for items to be dragged and triggers the corresponding events. It doesn't, however, make any changes to the nodes' order out-of-the-box, as the TreeView does not manage its own data.

Persisting and displaying the changes during Drag and Drop can be achieved either by manually handling the corresponding events and mutating the data, or by using the kendoTreeViewDragAndDropEditing directive. The latter uses an EditService which handles the addItem and removeItem events. You can supply your own EditService to the directive, or use it in combination with one of the two data binding directives.

Using with the Hierarchy Binding Directive

When the kendoTreeViewDragAndDropEditing directive is used in combination with the kendoTreeViewHierarchyBinding directive, the data binding directive sets the EditService of the editing directive. And the initially passed data gets updated on every Drag and Drop interaction with no further setup.

Example
View Source
Edit In Stackblitz  
Change Theme:

Using with the Flat Binding Directive

The kendoTreeViewDragAndDropEditing directive can also be used with the kendoTreeViewFlatDataBinding directive to get out-of-the-box data editing.

Example
View Source
Edit In Stackblitz  
Change Theme:

Remote Binding

In order to display the changes from Drag and Drop interaction, a local data set with the fetched nodes has to be persisted and mutated.

Flat Homogeneous Data

The following example show-cases a custom directive that handles the remote data binding and editing during Drag and Drop.

Example
View Source
Edit In Stackblitz  
Change Theme:

Hierarchical Heterogeneous Data

When using the Drag and Drop with heterogeneous data, some constraints need to be applied on which Drag and Drop operations are allowed.

The following example demonstrates remote binding to heterogeneous data, where items are allowed to be moved only in the same hierarchical level (categories can only be reordered, products can only be reordered or transferred to another category).

Example
View Source
Edit In Stackblitz  
Change Theme:

Multiple TreeViews

The Drag and Drop directive allows for items to be transferred from one TreeView to another. To mark a TreeView instance as a valid drop target, list it under the dropZoneTreeViews property of the other TreeView.

Note that the nodeDrop and addItem events are triggered on the target TreeView, while the removeItem event - on the source TreeView.

The following example also demonstrates the node copy functionality (allowCopy), and a custom emptyItemPlaceholder directive which adds an item placeholder to the TreeView once all its items are transferred away.

Example
View Source
Edit In Stackblitz  
Change Theme:

Expanded, Selected, Checked State

During Drag and Drop the indices of the reordered nodes are updated according to their new position, so in order to persist the expanded, selected or checked state, it's best not to rely on indices at all.

The following example show-cases how the state of each node is tracked by an object property value.

Example
View Source
Edit In Stackblitz  
Change Theme:

Templates

The drag clue and drop hint can easily be customized according the the design needs.

Example
View Source
Edit In Stackblitz  
Change Theme: