Dragging and Dropping
To enable the drag-and-drop feature of the ListBox, call its Draggable()
method with true
as a parameter.
You can also customize the drag-and-drop appearance of the ListBox by using its Draggable.Placeholder
and Draggable.Hint
options.
@(Html.Kendo().ListBox()
.Name("listbox1")
.DataValueField("ProductID")
.DataTextField("ProductName")
.Draggable(true) // Enable drag and drop
.DropSources("listbox2") // Specify the drop target
.Events(ev=>ev
.Add("function(e){setDiscontinued(e, true)}")
.Remove("function(e){setDiscontinued(e, false)}"))
.ConnectWith("listbox2")
.BindTo(new List<string>())
.Selectable(ListBoxSelectable.Single)
)
@(Html.Kendo().ListBox()
.Name("listbox2")
.Draggable(true)
.DropSources("listbox1")
.DataValueField("ProductID")
.DataTextField("ProductName")
.ConnectWith("listbox1")
.BindTo(new List<string>())
.Selectable(ListBoxSelectable.Single)
)