Transfer ListBox Items on Double Click
Environment
| Product | Progress® Telerik® UI ListBox for UI for ASP.NET MVC |
Description
How can I transfer items between ListBoxes by double-clicking the Telerik UI for ASP.NET MVC ListBox?
Solution
- Handle the
dblclickevent on the items in both ListBoxes. - In the event handler, based on the ListBox, manually execute the
transferToortransferFromcommand.
@(Html.Kendo().ListBox()
.Name("listBoxA")
.ConnectWith("listBoxB")
.BindTo(new List<string>() { "Value 1", "Value 2", "Value 3"}))
@(Html.Kendo().ListBox()
.Name("listBoxB")
.BindTo(new List<string>())
.Selectable(ListBoxSelectable.Multiple))
$(document).ready(function () {
var listBoxB = $("#listBoxB").data("kendoListBox");
var listBoxA = $("#listBoxA").data("kendoListBox");
listBoxA.wrapper.find(".k-list").on("dblclick", ".k-item", function (e) {
listBoxA._executeCommand("transferTo");
});
listBoxB.wrapper.find(".k-list").on("dblclick", ".k-item", function (e) {
listBoxA._executeCommand("transferFrom");
});
})