Prevent Dragging Nodes to Deep Levels
Your project might require you to prevent the TreeView nodes from being dragged to a deeper level of the tree.
The following example demonstrates how to handle the drag
event to achieve this behavior.
Example
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "foo", expanded: true, items: [
{ text: "bar", expanded: true, items: [
{ text: "baz", expanded: true, items: [
{ text: "qux" },
{ text: "cat" },
{ text: "dog" }
] }
] }
] }
]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("drag", function(e) {
// if the current status is "add", then the node will be appended
if (e.statusClass == "add") {
var destination = this.dataItem(e.dropTarget);
// If the (zero-based) destination level is 3,
// allowing the operation will result in a 5-level tree.
if (destination.level() == 3) {
// Deny the operation
e.setStatusClass("k-denied");
}
}
});
</script>
See Also
- TreeView JavaScript API Reference
- How to Check Nodes Programmatically
- How to Edit Nodes via Form
- How to Filter Out Search Results
- How to Hide Checkboxes for Root Level
- How to Persist Expanded State
- How to Render Multiple TreeViews Using HTML Source Binding
- How to Scroll to Selected Item
- How to Use FontAwesome Icons
For more runnable examples on the Kendo UI TreeView, browse its How To documentation folder.