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.