items.menuButtonsArray
Specifies the menu buttons of a SplitButton or a DropDownButton.
Example
<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>Example - DropDownButton
<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>items.menuButtons.attributesObject
Specifies the HTML attributes of a menu button.
HTML attributes which are JavaScript keywords (e.g. class) must be quoted.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
id: "hello",
text: "Insert",
attributes: { "class": "red" },
menuButtons: [
{ text: "Insert above", icon: "insert-top", attributes: { "class": "blue" } },
{ text: "Insert between", icon: "insert-middle" },
{ text: "Insert below", icon: "insert-bottom" }
]
}
]
});
</script>
<style>
.red { background-color: red; }
.blue { color: blue; }
</style>items.menuButtons.enableBoolean
Specifies whether the menu button is initially enabled or disabled.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
text: "splitButton",
menuButtons: [
{ id: "foo", text: "Foo", enable: false },
{ id: "bar", text: "Bar" },
{ id: "baz", text: "Baz" }
]
}
]
});
</script>items.menuButtons.hiddenBoolean(default: false)
Determines if a button is visible or hidden. By default buttons are visible.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
text: "MyButton",
menuButtons: [
{ text: "foo" },
{ text: "bar" },
{ text: "baz", hidden: true }
]
}
]
});
</script>items.menuButtons.iconString
Sets icon for the menu buttons. The icon should be one of the existing in the Kendo UI theme sprite.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
text: "splitButton",
menuButtons: [
{ id: "foo", text: "Foo", icon: "check" },
{ id: "bar", text: "Bar", icon: "info-circle" },
{ id: "baz", text: "Baz", icon: "clock" }
]
}
]
});
</script>items.menuButtons.idString
Specifies the ID of the menu buttons.
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: "splitButton",
text: "splitButton",
menuButtons: [
{ id: "foo", text: "Foo" },
{ id: "bar", text: "Bar" },
{ id: "baz", text: "Baz" }
]
} ]
});
</script>items.menuButtons.imageUrlString
If set, the ToolBar will render an image with the specified URL in the menu button.
Example
<div id="toolbar"></div>
<script>
var baseUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons";
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
text: "splitButton",
menuButtons: [
{ id: "foo", text: "Foo", imageUrl:baseUrl + "/sports/snowboarding.png" },
{ id: "bar", text: "Bar", imageUrl:baseUrl + "/sports/snowboarding.png" }
]
}
]
});
</script>items.menuButtons.spriteCssClassString
Defines a CSS class (or multiple classes separated by spaces) which will be used for menu button icon.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
text: "splitButton",
menuButtons: [
{ id: "foo", text: "Foo", spriteCssClass: "foo" },
{ id: "bar", text: "Bar", spriteCssClass: "bar" },
{ id: "baz", text: "Baz", spriteCssClass: "baz" }
]
}
]
});
</script>items.menuButtons.textString
Specifies the text of the menu buttons.
Example
<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>items.menuButtons.urlString
Specifies the url of the menu button to navigate to.
Example
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{
type: "splitButton",
text: "splitButton",
menuButtons: [
{ id: "foo", text: "Telerik", url: "https://www.telerik.com" },
{ id: "bar", text: "Google", url: "https://www.google.com" }
]
}
]
});
</script>