Edit this page

Transfer ListBox Items on Double Click

Environment

Product Version 2017.3 1026
Product Progress Kendo UI ListBox

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-item", function(e) {
        listBoxA._executeCommand("transferTo");
    });

    listBoxB.wrapper.find(".k-list").on("dblclick", ".k-item", function(e) {
        listBoxA._executeCommand("transferFrom");
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy