Getting Started with the ToolBar
This guide demonstrates how to get up and running with the Kendo UI for jQuery ToolBar.
After the completion of this guide, you will be able to achieve the following end result:
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
size:"large",
items: [
{ type: "button", text: "Button" },
{ type: "button", text: "Toggle", togglable: true },
{ type: "splitButton", text: "SplitButton", menuButtons: [{text: "Option 1"}, {text: "Option 2"}] }
]
});
</script>
1. Create a Div Element
First, create an empty <div> element on the page that will serve as the main container of the ToolBar component.
<div id="toolbar"></div>
2. Initialize the ToolBar
In this step, you will initialize the ToolBar from the <div> element. All settings of the ToolBar will be provided in the initialization script statement and you have to describe its layout and configuration in JavaScript.
<div id="toolbar"></div>
<script>
// Target the div element by using jQuery and then call the kendoToolBar() method.
$("#toolbar").kendoToolBar();
</script>
3. Set the Size of the ToolBar
The ToolBar allows you to change its size. The following example demonstrates how to apply a different size to the component.
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
size:"large"
});
</script>
4. Configure the Items of the ToolBar
The ToolBar enables you to configure its items by using the items property.
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
value: "Some text",
items: [
{ type: "button", text: "Button" },
{ type: "button", text: "Toggle", togglable: true },
{ type: "splitButton", text: "SplitButton", menuButtons: [{text: "Option 1"}, {text: "Option 2"}] }
]
});
</script>