Drag and Drop Nodes from TreeView to ListBox

Updated on Dec 10, 2025

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.

Example

View Source

<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>