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

Items

configuration

A JavaScript array that contains the ToolBar's commands configuration.

For more information regarding supported commands and their configuration properties check the Getting Started topic.

items

Array

<div id="toolbar"></div>
<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Button" },
            { type: "button", text: "Toggle", togglable: true },
            { type: "splitButton", text: "SplitButton", menuButtons: [{text: "Option 1"}, {text: "Option 2"}] }
        ]
    });
</script>

items.attributes

Object

Specifies the HTML attributes of a ToolBar button.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "button", text: "My Button", attributes: { "class": "red" } }
        ]
    });
</script>

<style>
    .red { background-color: red; }
</style>

items.buttons

Array

Specifies the buttons of ButtonGroup.

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    {
      type: "buttonGroup",
      buttons: [
        { text: "foo" },
        { text: "bar" },
        { text: "baz" }
      ]
    }
  ]
});
</script>

items.click

Function

Specifies the click event handler of the button. Applicable only for commands of type button and splitButton.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "button",
            text: "foo",
            click: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
                console.log(e.target.text() + " is clicked");
            }
        }
        ]
    });
</script>

items.enable

Boolean

Specifies whether the control is initially enabled or disabled. Default value is "true".

Default: true

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "button",
            text: "foo",
            enable: false
        }
        ]
    });
</script>

items.group

String

Assigns the button to a group. Applicable only for buttons with togglable: true.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "button", text: "foo", togglable: true, group: "myGroup" },
        { type: "button", text: "bar", togglable: true, group: "myGroup" },
        { type: "button", text: "baz", togglable: true, group: "myGroup" }
        ]
    });
</script>

items.hidden

Boolean

Determines if a button is visible or hidden. By default buttons are visible.

Default: false

<div id="toolbar"></div>

<script>
$("#toolbar").kendoToolBar({
  items: [
    { type: "button", text: "MyButton 1", hidden: true },
    { type: "button", text: "MyButton 2" }
  ]
});
</script>

items.icon

String

Sets icon for the item. The icon should be one of the existing in the Kendo UI theme sprite.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "button", text: "foo", icon: "clock" },
        { type: "button", text: "bar", icon: "info-circle" },
        { type: "button", text: "baz", icon: "arrow-rotate-cw" }
        ]
    });
</script>

items.id

String

Specifies the ID of the button.

By design the widget will render two buttons - the one located in the ToolBar container will receive the specified ID, the one located in the Overflow Popup container will receive the specified ID but with _overflow suffix. If the ID will be used for determining which button is clicked in the click or toggle event handler, the developer should use the ID property of the event data which always contains the specified ID without suffix.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "button", text: "foo", id: "foo" },
        { type: "button", text: "bar", id: "bar" },
        { type: "button", text: "baz", id: "baz" }
        ]
    });
</script>

items.imageUrl

String

If set, the ToolBar will render an image with the specified URL in the button.

<div id="toolbar"></div>

<script>
    var baseUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons";
    $("#toolbar").kendoToolBar({
      items: [
        { type: "button", text: "foo", imageUrl: baseUrl + "/sports/snowboarding.png" },
        { type: "button", text: "bar", imageUrl: baseUrl + "/sports/snowboarding.png" }
      ]
    });
</script>

items.menuButtons

Array

Specifies the menu buttons of a SplitButton or a DropDownButton.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [ {
            type: "splitButton",
            text: "splitButton",
            menuButtons: [
                { id: "foo", text: "Foo" },
                { id: "bar", text: "Bar" },
                { id: "baz", text: "Baz" }
            ]
        } ]
    });
</script>

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [ {
            type: "dropDownButton",
            text: "dropDownButton",
            menuButtons: [
                { id: "foo", text: "Foo" },
                { id: "bar", text: "Bar" },
                { id: "baz", text: "Baz" }
            ]
        } ]
    });
</script>

Specifies how the button, or the template behaves when the ToolBar is resized. Possible values are: "always", "never" or "auto" (default). If the items contains a template and overflow is set to always, the template will never be rendered. If the item contains an overflowTemplate and the overflow is set to never, the overflowTemplate will never be rendered.

Default: "auto"

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            {
                type: "splitButton",
                text: "splitButton",
                menuButtons: [
                    { id: "foo", text: "Foo" },
                    { id: "bar", text: "Bar" }
                ],
                overflow: "never"
            },
            {
                type: "button",
                text: "Button",
                overflow: "auto"
            },
            {
                type: "buttonGroup",
                buttons: [
                    { text: "Option 1", togglable: true },
                    { text: "Option 2", togglable: true },
                    { text: "Option 3", togglable: true }
                ],
                overflow: "always"
            }
        ]
    });
</script>

items.overflowTemplate

String|Function

Specifies what element will be added in the command overflow popup. Applicable only for items that have a template.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            {
                template: "<span>Toolbar template</span>",
                overflowTemplate: "<span>Overflow template</span>"
            }
        ]
    });
</script>

items.primary

Boolean

Specifies whether the button is primary. Primary buttons receive different styling.

Default: false

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "button", text: "Primary", primary: true },
        { type: "button", text: "Standard" }
        ]
    });
</script>

items.selected

Boolean

Specifies if the toggle button is initially selected. Applicable only for buttons with togglable: true.

Default: false

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "button", text: "Foo", togglable: true, selected: true }
        ]
    });
</script>

items.showIcon

String

Specifies where the button icon will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Foo", icon: "check", showIcon: "toolbar" }
        ]
    });
</script>

items.showText

String

Specifies where the text will be displayed. Possible values are: "toolbar", "overflow" or "both" (default).

Default: "both"

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Foo", icon: "check", showText: "overflow" }
        ]
    });
</script>

items.spriteCssClass

String

Defines a CSS class (or multiple classes separated by spaces) which will be used for button icon.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Foo", icon: "check", spriteCssClass: "tick-icon" }
        ]
    });
</script>

items.template

String|Function

Specifies what element will be added in the ToolBar wrapper. Items with template does not have a type.

If overflowTemplate is not defined for a template command, than the command will be treated as overflow: "never".

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            {
                template: "<span>Toolbar template</span>"
            }
        ]
    });
</script>

items.text

String

Sets the text of the button.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Foo" }
        ]
    });
</script>

items.togglable

Boolean

Specifies if the button is togglable, e.g. has a selected and unselected state.

Buttons with togglable: true will fire the toggle event. click event will not be fired.

Default: false

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { type: "button", text: "Foo", togglable: true }
        ]
    });
</script>

items.toggle

Function

Specifies the toggle event handler of the button. Applicable only for commands of type button and togglable: true.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "button",
            text: "Foo",
            togglable: true,
            toggle: function() {
/* The result can be observed in the DevTools(F12) console of the browser. */
                console.log("toggle!");
            }
        }
        ]
    });
</script>

items.type

String

Specifies the command type. Supported types are "button", "splitButton", "dropDownButton", "buttonGroup", "separator", "spacer".

Specifying the type is mandatory. Only commands that have a template do not need a type.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            {
                type: "splitButton",
                text: "splitButton",
                menuButtons: [
                    { id: "foo", text: "Foo" },
                    { id: "bar", text: "Bar" }
                ]
            },
            {
                type: "dropDownButton",
                text: "dropDownButton",
                menuButtons: [
                    { id: "foobar", text: "FooBar" },
                    { id: "barbaz", text: "BarBaz" }
                ]
            },
            {
                type: "separator"
            },
            {
                type: "button",
                text: "Button"
            },
            {
                type: "buttonGroup",
                buttons: [
                    { text: "Option 1", togglable: true },
                    { text: "Option 2", togglable: true },
                    { text: "Option 3", togglable: true }
                ]
            }
        ]
    });
</script>

items.url

String

Specifies the url to navigate to.

<div id="toolbar"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "button",
            text: "Foo",
            url: "https://www.google.com"
        }
        ]
    });
</script>

Related Members