items.buttons Array
Specifies the buttons of ButtonGroup.
Example
<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.
Example
<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.
Example
<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 (default: true)
Specifies whether the button is initially enabled or disabled.
Example
<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.
Example
<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 (default: false)
Determines if the button is visible or hidden. By default the buttons are visible.
Example
<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.
Example
<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
clickortoggleevent handler, the developer should use the ID property of the event data which always contains the specified ID without suffix.
Example
<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.
Example
<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 (default: false)
Specifies if the toggle button is initially selected. Applicable only for the children of a ButtonGroup that has togglable true.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "buttonGroup",
buttons: [
{ text: "foo", togglable: true, selected: true },
{ text: "bar", togglable: true },
]
}
]
});
</script>
items.buttons.showIcon String (default: "both")
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).
Example
<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-outline", showIcon: "both" },
{ text: "baz", icon: "arrow-rotate-cw", showIcon: "toolbar" }
]
}]
});
</script>
items.buttons.showText String (default: "both")
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).
Example
<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-outline", 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.
Example
<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.toggle Function
Specifies the toggle event handler of the button. Applicable only for the children of a ButtonGroup.
Example
<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.togglable Boolean
Specifies if the button is togglable, e.g. has a selected and unselected state. Applicable only for the children of a ButtonGroup.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "buttonGroup",
buttons: [
{ text: "foo", togglable: true },
{ text: "bar", togglable: true }
]
}
]
});
</script>
items.buttons.text String
Specifies the text of the menu button.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "buttonGroup",
buttons: [
{ text: "foo" },
{ text: "bar" }
]
}
]
});
</script>
items.buttons.url String
Specifies the url of the button to navigate to.
Example
<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>