New to Kendo UI for jQuery? Start a free 30-day trial

ConnectWith

configuration

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.

connectWith

String

Default: null

<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>

<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>