Drag drop from both a TreeView and a ListBox to another ListBox?

[DR]

I have

@(Html.Kendo().TreeView()
    .Name("treeviewAvail")

...and...

 @(Html.Kendo().ListBox()
      .Name("listboxAvail")

How can I 'have both of those so that I can drag/drop from either into another list box?  (It's not needed to go the other way.)

@(Html.Kendo().ListBox()
    .Name("listboxSelected")

 

I've seen this topic, but it does not handle what I need for TreeView too

https://www.telerik.com/forums/listbox-drag-and-drop-1557506

 

[Alexander]

Hi Dennis,

I noticed that this forum thread is a duplicate of a recently created ticket thread on your end. Nevertheless, for the benefit of the community, I am posting my answer here as well:

Generally, The Telerik UI for ASP.NET Core ListBox and the Telerik UI for ASP.NET Core TreeView expose draggable functionalities that separate one from the other. There is no direct integration between the two. Regardless,  I can suggest reviewing this Knowledgebase article on dragging nodes from a TreeView to a ListBox:

• Drag and Drop Nodes from TreeView to ListBox (Knowledge Base Article)

In addition, this article demonstrates a possible approach to detecting the drop target:

• Find the dataItem target of a drag and drop in ListView (Knowledge Base Article)

You can combine the two approaches to detect where the item was dropped. Although the examples target the Kendo UI for the jQuery suite and a ListView widget scenario, the same approach is also applicable to the Telerik UI for ASP.NET Core as well as for the ListBox integration on your end as well.

For example, here is a Telerik REPL example demonstrating a possible approach on how to add the TreeView item after the item in the ListBox, over which it was dropped. You can customize the example further to match your requirements.

Notice, that I have added an additional layer of logic that asserts whether the items from the TreeView are dropped only within the boundaries of the second ListBox item via the following:

<script>
    function onDrop(e){
       // Detect drop location and get element.
        var dropTarget = document.elementFromPoint(event.clientX,event.clientY);
        var listBoxWrapper = $(dropTarget).parents("div.k-widget.k-listbox");

        var select = $(listBoxWrapper.find("select"));
        if(select != undefined && select.is("#listbox2")){ // Assert whether the dropped item is within the boundaries of the second ListBox.
            // Add dropped node after the target item over which it was dropped.
            var item = e.sender.dataItem(e.sourceNode);  
            var lb = $("#listbox2").getKendoListBox();
            var target = lb.dataItem(e.dropTarget);

            var targetIndex = lb.dataSource.indexOf(target); // Get the index of the target element.
            lb.dataSource.insert(targetIndex+1, {"Text": item.text, "Value": item.index}); // Insert the TreeView item into the ListBox's DataSource.
        }
    }
</script> 

Where the utilized components are as follows:

<div>
<h2>TreeView</h2>
@(Html.Kendo().TreeView()
    .Name("treeview-left")
    .DragAndDrop(true)
    .Events(e => e.Drop("onDrop"))
    ...
)
</div>
<div>
<h2>ListBox 1</h2>
@(Html.Kendo().ListBox()
    .Name("listbox1")
    ...
)
</div>
<div>
<h2>ListBox 2</h2>
@(Html.Kendo().ListBox()
    ...
)
</div>

This would produce the following result:

Kind Regards,
Alexander
Progress Telerik