ListBox Drag and Drop

[Kerri]

Is there a way to drag and drop from one ListBox to any number of other ListBoxes? I have a use case where I have a list of items and I want to be able to drag those items to any one of multiple other ListBoxes to assign them to a group. The documentation and examples show being able to drag to ony one other ListBox.  

Has anyone done this before and can point me to some example code?

 

Thank you!

[Aleksandar]

Hi Kerri,

You can set the DropSources and ConnectWith to point to multiple ListBoxes. It is however important to note that it is not recommended to set the same ConnectWith option on two or more ListBoxes because the behavior of the transferFrom and transferAllFrom tools is not deterministic.

Configuring a bi-directional relationship between two ListBoxes results in duplicated behavior of their transferTo and transferFrom options, and transferAllTo and transferAllFrom tools. If your project does not require such behavior, remove some of the relationships from the tools option.

With that said, here is an example where tools are disabled and you can drag from the first ListBox to the second or third and from them back to the first.

@{
    var data = Enumerable.Range(1,10).Select(x=>new SelectListItem(){
        Text = "Item "+x,
        Value = x.ToString()
    }).ToList();
}

<div id="example" role="application">
    <div class="demo-section k-content wide">
        <div>
        <h2>ListBox 1</h2>
        @(Html.Kendo().ListBox()
            .Name("listbox1")
            .DataValueField("Value")
            .DataTextField("Text")
            .Draggable(true)
            .DropSources(new string[]{"listbox2","listbox3"})
            .ConnectWith("listbox2,listbox3")
            .BindTo(data)
            .Selectable(ListBoxSelectable.Single)
        )
        </div>
        <div>
        <h2>ListBox 2</h2>
        @(Html.Kendo().ListBox()
            .Name("listbox2")
            .Draggable(true)
            .DropSources("listbox1")
            .DataValueField("Value")
            .DataTextField("Text")
            .ConnectWith("listbox1")
            .BindTo(new List<SelectListItem>())
            .Selectable(ListBoxSelectable.Single)
        )
        </div>
        <div>
        <h2>ListBox 3</h2>
        @(Html.Kendo().ListBox()
            .Name("listbox3")
            .Draggable(true)
            .DropSources("listbox1")
            .DataValueField("Value")
            .DataTextField("Text")
            .ConnectWith("listbox1")
            .BindTo(new List<SelectListItem>())
            .Selectable(ListBoxSelectable.Single)
        )
		</div>
    </div>
</div>

Regards,
Aleksandar
Progress Telerik