Introduction
AI Components & Features
Contribution
Knowledge Base
ListBox

connectWithString(default: null)

The id of the target ListBox to which items from the source ListBox will be transferred and vice versa. If you have to transfer items from the target ListBox over its toolbar, then you also need to set its connectWith option.

  • It is not recommended to set the same connectWith option on two or more ListBoxes because the behavior of the transferFrom and transferAllFrom tools is not deterministic.
  • Configuring a bi-directional relationship between two ListBoxes results in duplicated behavior of their transferTo and transferFrom options, and transferAllTo and transferAllFrom tools. If your project does not require such behavior, remove some of the relationships from the tools option.

Example - set up a one-way connection from ListBoxA to ListBoxB 

<select id="listBoxA">
    <option>ItemA1</option>
    <option>ItemA2</option>
</select>
<select id="listBoxB">
    <option>ItemB1</option>
    <option>ItemB2</option>
</select>

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

    $("#listBoxB").kendoListBox();
</script>

Example - set up a bidirectional connection between ListBox widgets 

<select id="listBoxA">
    <option>ItemA1</option>
    <option>ItemA2</option>
</select>
<select id="listBoxB">
    <option>ItemB1</option>
    <option>ItemB2</option>
</select>

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

    $("#listBoxB").kendoListBox({
        connectWith: "listBoxA",
        toolbar: {
            tools: [
                "transferTo",
                "transferFrom",
                "transferAllTo",
                "transferAllFrom"
            ]
        }
    });
</script>
In this article
connectWith
Not finding the help you need?
Contact Support