Expand Nodes during Drag

The following example demonstrates how to expand the TreeView items that are hovered when the user drags a node.

    <div id="treeview"></div>

    <script>
      $("#treeview").kendoTreeView({
        dragAndDrop: true,
        dataSource: [
          { text: "foo", items: [
            { text: "bar" },
            { text: "baz" }
          ] },
          { text: "qux", items: [
            { text: "cat" },
            { text: "dog" }
          ] }
        ],

        drag: function(e) {
            var dataItem = this.dataItem(e.dropTarget);
            if (dataItem) {
                dataItem.set("expanded", true);
            }
        }
      });
    </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.