ToolBar JSP Tag Overview
The ToolBar JSP tag is a server-side wrapper for the Kendo UI ToolBar widget.
Getting Started
Initialization
The example below demonstrates how to initialize the ToolBar and also its basic usage.
<kendo:toolBar name="toolbar">
<kendo:toolBar-items>
<!-- regular button -->
<kendo:toolBar-item type="button" text="Button"></kendo:toolBar-item>
<!-- toggle button -->
<kendo:toolBar-item type="button" togglable="true" text="Toggle Button"></kendo:toolBar-item>
<!-- split button -->
<kendo:toolBar-item type="splitButton" text="Split Button">
<kendo:toolBar-item-menuButtons>
<kendo:toolBar-item-menuButton text="Option 1" id="option1"></kendo:toolBar-item-menuButton>
<kendo:toolBar-item-menuButton text="Option 2" id="option2"></kendo:toolBar-item-menuButton>
<kendo:toolBar-item-menuButton text="Option 3" id="option3"></kendo:toolBar-item-menuButton>
</kendo:toolBar-item-menuButtons>
</kendo:toolBar-item>
<!-- button group -->
<kendo:toolBar-item type="buttonGroup">
<kendo:toolBar-item-buttons>
<kendo:toolBar-item-button text="Left" togglable="true" group="text-align" spriteCssClass="k-tool-icon k-justifyLeft"></kendo:toolBar-item-button>
<kendo:toolBar-item-button text="Center" togglable="true" group="text-align" spriteCssClass="k-tool-icon k-justifyCenter"></kendo:toolBar-item-button>
<kendo:toolBar-item-button text="Right" togglable="true" group="text-align" spriteCssClass="k-tool-icon k-justifyRight"></kendo:toolBar-item-button>
</kendo:toolBar-item-buttons>
</kendo:toolBar-item>
<!-- separator -->
<kendo:toolBar-item type="separator"></kendo:toolBar-item>
<!-- custom template -->
<kendo:toolBar-item template="<input id='dropdown' style='width: 150px' />" overflow="never"></kendo:toolBar-item>
</kendo:toolBar-items>
</kendo:toolBar>
Configuration
Below are listed the steps for you to follow when configuring the Kendo UI ToolBar.
Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for JSP.
Step 2 Create a new action method.
@RequestMapping(value = {"index"}, method = RequestMethod.GET)
public String index() {
return "web/window/index";
}
Step 3 Add the Kendo UI taglib mapping to the page.
<%@taglib prefix="kendo" uri="https://www.telerik.com/kendo-ui/jsp/tags"%>
Step 4 Add a toolbar tag and specify the widget controls.
<kendo:toolBar name="toolbar">
<kendo:toolBar-items>
<kendo:toolBar-item type="button" text="Button"></kendo:toolBar-item>
</kendo:toolBar-items>
</kendo:toolBar>
For more information on the supported command types, refer to this link.
Event Handling
Subscribe to Events
You can subscribe to all events exposed by Kendo UI ToolBar by the handler name.
<kendo:toolBar name="toolbar" click="onClick" toggle="onToggle"></kendo:toolBar>
<script>
function onClick(e) {
//Handle the click event
}
//.....
</script>
Reference
Existing Instances
You are able to reference an existing ToolBar instance via the jQuery.data(). Once a reference is established, you are able to use the ToolBar API to control its behavior.
// Put this after your Kendo ToolBar tag declaration
<script>
$(function() {
var toolbar = $("#container").data("kendoToolBar");
});
</script>