Drag and Drop
The TreeView allows the user to reorder its nodes or transfer them to another TreeView instance via Drag and Drop.
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:
nodeDragStart—Fired when the dragging begins. If prevented, the node won't be dragged.
nodeDrag—Fired during dragging.
nodeDrop—Fired when a node is dropped on a valid target. If prevented or marked as invalid, the subsequent
removeItemevents will not be fired.
addItem—Fired on the targeted TreeView after the node is dropped.
removeItem—Fired on the source TreeView after the node is dropped.
nodeDragEnd—Fired when the dragging ends.
In the following example the event arguments are logged to the console as they occur.
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
removeItem events. You can supply your own
EditService to the directive, or use it in combination with one of the two data binding directives.
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.
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.
The following example show-cases a custom directive that handles the remote data binding and editing during Drag and Drop.
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).
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.
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.
When the content of the TreeView overflows, the first scrollable container starting from the TreeView element and going upwards will be scrolled when the drag clue is moved close to the top or the bottom of the container.
To disable this functionality, set the
autoScroll input property to
By default, the scrolling will be performed by 1 pixel at every 1 millisecond, when the dragged item reaches the top or the bottom of the scrollable container.
To customize this behavior, bind the
autoScroll option to a
DragAndDropScrollSettings object with the preferred
During Drag and Drop the indices of the reordered nodes are updated in accordance with their new position. Thus it is not advisable to rely on indices when persisting the expanded, selected, or checked state.
The following example show-cases how the state of each node is tracked by an object property value.
The drag clue and drop hint can easily be customized according the the design needs.
- to customize the drag clue, use the
- to customize the drop hint, use the