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

Items.buttons

configuration

Specifies the buttons of ButtonGroup.

items.buttons

Array

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

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

items.buttons.attributes

Object

Specifies the HTML attributes of a ButtonGroup's button.

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

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

<script>
    $("#toolbar").kendoToolBar({
        items: [
        { type: "buttonGroup", buttons: [
            { text: "foo", attributes: { "class": "red" } },
            { text: "bar", attributes: { "class": "blue" } }
        ] }
        ]
    });
</script>
<style>
    .red { background-color: red; }
    .blue { background-color: blue; }
</style>

items.buttons.click

Function

Specifies the click event handler of the button. Applicable only for the children of a ButtonGroup.

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

<script>
function onClick() {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("click");
}

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

items.buttons.enable

Boolean

Specifies whether the button is initially enabled or disabled.

Default: true

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

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

items.buttons.group

String

Assigns the button to a group. Applicable only for the children of a ButtonGroup that has togglable true.

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

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

items.buttons.hidden

Boolean

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

Default: false

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

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

items.buttons.icon

String

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

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

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

items.buttons.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: "buttonGroup",
      buttons: [
        { text: "foo", id: "foo" },
        { text: "bar", id: "bar" },
        { text: "baz", id: "baz" }
      ]
    }
  ]
});
</script>

items.buttons.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: "buttonGroup",
      buttons: [
        { text: "foo", imageUrl: baseUrl + "/sports/snowboarding.png" },
        { text: "bar", imageUrl: baseUrl + "/sports/snowboarding.png" }
      ]
    }
  ]
});
</script>

items.buttons.selected

Boolean

Specifies if the toggle button is initially selected. Applicable only for the children of a ButtonGroup that has togglable true.

Default: false

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

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

Applicable only for the buttons of a ButtonGroup. Specifies where the icon of the button will be displayed. Whether it should be displayed always (both), only when the button is visible on the ToolBar (toolbar), or only when the button is overflowed (overflow).

Default: "both"

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

<script>
    $("#toolbar").kendoToolBar({
		items: [{
			type: "button",
			text: "This button has a very long text so the ButtonGroup would be collapsed on larger screen"
		},{
			type: "buttonGroup",
			buttons: [
				{ text: "foo", icon: "clock", showIcon: "overflow" },
				{ text: "bar", icon: "x", showIcon: "both" },
				{ text: "baz", icon: "arrow-rotate-cw", showIcon: "toolbar" }
			]
		}]
	});
</script>

items.buttons.showText

String

Applicable only for the buttons of a ButtonGroup. Specifies where the text of the button will be displayed. Whether it should be displayed always (both), only when the button is visible on the ToolBar (toolbar), or only when the button is overflowed (overflow).

Default: "both"

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

<script>
	$("#toolbar").kendoToolBar({
		items: [{
			type: "button",
			text: "This button has a very long text so the ButtonGroup would be collapsed on larger screen"
		},{
			type: "buttonGroup",
			buttons: [
				{ text: "foo", icon: "clock", showText: "overflow" },
				{ text: "bar", icon: "x", showText: "both" },
				{ text: "baz", icon: "arrow-rotate-cw", showText: "toolbar" }
			]
		}]
	});
</script>

items.buttons.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: "buttonGroup",
		  buttons: [
			{ text: "foo", spriteCssClass: "foo, bar" },
			{ text: "bar", spriteCssClass: "bar" },
			{ text: "baz", spriteCssClass: "baz" }
		  ]
		}
	  ]
	});
</script>

items.buttons.text

String

Specifies the text of the menu button.

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

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

items.buttons.togglable

Boolean

Specifies if the button is togglable, e.g. has a selected and unselected state. Applicable only for the children of a ButtonGroup.

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

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

items.buttons.toggle

Function

Specifies the toggle event handler of the button. Applicable only for the children of a ButtonGroup.

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

<script>
    function toggle(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
        console.log(e.group);
    }

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

items.buttons.url

String

Specifies the url of the button to navigate to.

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

<script>
    $("#toolbar").kendoToolBar({
        items: [
        {
            type: "buttonGroup",
            buttons: [
            { text: "foo", url: "https://www.telerik.com" },
            { text: "bar", url: "https://www.google.com" },
            ]
        }
        ]
    });
</script>