toolbar

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

configuration

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.

Object

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

toolbar.position

String

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

Default: "right"

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

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

toolbar

toolbar.position

toolbar.tools