Edit this page

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy