Drag and Drop Nodes from TreeView to ListBox

Environment

Product	Progress® Kendo UI® TreeView for jQuery	Progress® Kendo UI® ListBox for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I drag a node from the TreeView and drop it in the ListBox?

Solution

In the drop event handler of the TreeView, get the dropped node and add it to the ListBox.

<div id="treeview-left"></div>
<select id="optional" ></select>

<script>
    $("#treeview-left").kendoTreeView({
    dragAndDrop: true,
    drop: onDrop,
    dataSource: [
        { id: 1, text: "Furniture", expanded: true, items: [
        { id: 2, text: "Tables & Chairs" },
        { id: 3, text: "Sofas" },
        { id: 4, text: "Occasional Furniture" }
        ] },
        { id: 5, text: "Decor", items: [
        { id: 6, text: "Bed Linen" },
        { id: 7, text: "Curtains & Blinds" },
        { id: 8, text: "Carpets" }
        ] }
    ]
    });

    $("#optional").kendoListBox({
        dataTextField: "text",
        dataValueField: "id",
        dataSource: [{ id: 8, text: "Other products" }]
    });

    function onDrop(e){          
        if($(e.dropTarget).hasClass('k-list-content')){
          var item = e.sender.dataItem(e.sourceNode);         
          var listbox = $('#optional').data('kendoListBox');         
          listbox.add(item)
          if(item.hasChildren){
            for(var p=0; p <item.items.length;p++){
              listbox.add(item.items[p])
            }
          }
        }else{
          e.preventDefault()
          alert('Please drop the node in the ListBox')
        }
    }
</script>