Transfer ListBox Items on Double Click

Environment

Product

Progress® Telerik® UI ListBox for UI for ASP.NET Core

Description

How can I transfer items between ListBoxes by double-clicking the Kendo UI ListBox?

Solution

1. Handle the dblclick event on the items in both ListBoxes.
2. In the event handler, based on the ListBox, manually execute the transferTo or transferFrom command.

@(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");
        });
    })