Drag and Drop Nodes from TreeView to ListBox

Environment

Product Progress Kendo UI TreeView Progress Kendo UI ListBox
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){          
    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])
        }
    }
    }
</script>
In this article
Not finding the help you need? Improve this article