Edit this page

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

For more runnable examples on the Kendo UI TreeView, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy