Prevent Dragging Nodes to Root Level

Your project might require you to prevent the TreeView nodes from being dragged to the root level of the tree.

The following example demonstrates how to handle the drag event to achieve this behavior.

Example

    <div id="tree"></div>

    <script>
      $("#tree").kendoTreeView({
        dragAndDrop: true,
        dataSource: [
          { text: "root 1", expanded: true, items: [
            { text: "bar", expanded: true, items: [
              { text: "baz" },
              { text: "foo" }
            ] }
          ] },
          { text: "root 2" }
        ],
        drag: function(e) {
          if (e.statusClass == "denied") {
            // treeview already denies this operation
            return;
          } else {
            // whether the action is related to a root node
            var targetsRoot = $(e.dropTarget).parentsUntil(".k-treeview", ".k-item").length == 1;

            // if targeting a root node, and the operation isn't add
            // (this means that the operation is to insert before/after the root,
            //  which will create another root)
            if (targetsRoot && e.statusClass != "add") {
                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.