items.buttonsArray
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.attributesObject
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.clickFunction
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.enableBoolean(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.groupString
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.hiddenBoolean(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.iconString
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.idString
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.imageUrlString
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.selectedBoolean(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.showIconString(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.showTextString(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.spriteCssClassString
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.toggleFunction
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.togglableBoolean
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.textString
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.urlString
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>