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

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.

Razor

@(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))

JS

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

More ASP.NET MVC ListBox Resources

• ASP.NET MVC ListBox Documentation

• ASP.NET MVC ListBox Demos

• ASP.NET MVC ListBox Product Page

• Telerik UI for ASP.NET MVC Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET MVC Forums

See Also

• Client-Side API Reference of the ListBox for ASP.NET MVC
• Server-Side API Reference of the ListBox for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base