toolbar Object

Defines the settings for displaying the toolbar of the ListBox. The toolbar allows you to execute a set of predefined actions.

By default, the toolbar is not displayed. If the tools array is populated, then the toolbar and the corresponding tools are displayed.

Example

<select id="listBox"></select>
<script>
    $("#listBox").kendoListBox({
        dataSource: [ "Item 1", "Item 2", "Item 3", "Item 4" ],
        toolbar: {
            tools: [ "moveUp", "moveDown" ]
        }
    });
</script>

toolbar.position String (default: "right")

The relative position of the ListBox element at which the toolbar will be displayed. The possible values are "left", "right", "top", and "bottom".

Example

<select id="listBox">
    <option>Item 1</option>
    <option>Item 2</option>
    <option>Item 3</option>
    <option>Item 4</option>
</select>
<script>
    $("#listBox").kendoListBox({
        toolbar: {
            position: "left",
            tools: [ "moveUp", "moveDown" ]
        }
    });
</script>

toolbar.tools Array

A collection of tools that are used to interact with the ListBox.

The built-in tools are:

• "moveUp" - Moves up the selected ListBox items.
• "moveDown" - Moves down the selected ListBox items.
• "remove" - Removes the selected ListBox items.
• "transferTo" - Moves the selected items from the current ListBox to the target that is defined in the connectWith option.
• "transferFrom" - Moves the selected items from the ListBox that is defined in the connectWith option to the current ListBox.
• "transferAllTo" - Moves all items from the current ListBox to the target that is defined in the connectWith option.
• "transferAllFrom" - Moves all items from the ListBox that is defined in the connectWith option to the current ListBox.

Example

<select id="listBoxA"></select>
<select id="listBoxB"></select>

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

    $("#listBoxB").kendoListBox({
        connectWith: "listBoxA",
        dataSource: [ "ItemB1", "ItemB2" ]
    });
</script>