New to Kendo UI for jQueryStart a free 30-day trial

Transfer ListBox Items on Double Click

Environment

Product Version2017.3 1026
ProductProgress® Kendo UI® ListBox for jQuery

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.
<select id="listBoxA">
      <option>ItemA1</option>
      <option>ItemA2</option>
    </select>
<select id="listBoxB">
      <option>ItemB1</option>
      <option>ItemB2</option>
    </select>

<script>
    var listBoxA = $("#listBoxA").kendoListBox({
        connectWith: "listBoxB",
        toolbar: {
            tools: [
                "transferTo",
                "transferFrom",
                "transferAllTo",
                "transferAllFrom"
            ]
        }
    }).data("kendoListBox");

    var listBoxB = $("#listBoxB").kendoListBox().data("kendoListBox");

    listBoxA.wrapper.find(".k-list").on("dblclick", ".k-list-item", function(e) {
        listBoxA._executeCommand("transferTo");
    });

    listBoxB.wrapper.find(".k-list").on("dblclick", ".k-list-item", function(e) {
        listBoxA._executeCommand("transferFrom");
    });
</script>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support