toolbar String|Function|Array
If a String value is assigned to the toolbar configuration option, it will be treated as a single string template for the whole grid Toolbar,
and the string value will be passed as an argument to a kendo.template() function.
If a Function value is assigned (it may be a kendo.template() function call or a generic function reference), then the return value of the function will be used to render the Grid Toolbar contents.
If the grid is instantiated with MVVM, The template passed will not be bound to the grid view model context. You may bind the toolbar element manually afterwards, using
kendo.bind(gridWidgetInstance.element.find("k-grid-toolbar"))
If an Array value is assigned, it will be treated as the list of commands displayed in the grid's Toolbar. Commands can be custom or built-in ("cancel", "create", "save", "excel", "pdf").
The "cancel" built-in command reverts any data changes done by the end user.
The "create" command adds an empty data item to the grid.
The "save" command persists any data changes done by the end user. When executed fires saveChanges grid event.
The "excel" command exports the grid data in MS Excel format. Fires excelExport grid event.
The "pdf" command exports the grid data in PDF format. Fires pdfExport grid event.
The "search" built-in search panel for the grid.
Example - configure the Grid Toolbar as a string template
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: "<button class='k-button' onclick='myClick()'>My Button</button>",
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
],
schema: {
model: { id: "id" }
}
},
editable: true
});
function myClick() {
kendo.alert("Clicked!")
}
</script>
Example - configure the Grid Toolbar template with a function
<script type="x-kendo/template" id="template">
<button class='k-button' onclick='myClick()'>My Button</button>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: kendo.template($("#template").html()),
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
],
schema: {
model: { id: "id" }
}
},
editable: true
});
function myClick() {
kendo.alert("Clicked!")
}
</script>
Example - configure the Grid Toolbar as an array of commands
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: [
{ name: "create" },
{ name: "save" },
{ name: "cancel" }
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
],
schema: {
model: { id: "id" }
}
},
editable: true
});
</script>
Apart from the built-in tools, the Grid fully exposes the ToolBar.items API. This way you can specify any custom tools in the widget using the components available in the ToolBar itself:
Example
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: [ {
type: "button",
text: "Button"
}, {
type: "button",
text: "Toggle",
togglable: true,
icon: "cancel"
}, {
type: "splitButton",
text: "SplitButton",
menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
},{
name: "dropDownButton",
type: "dropDownButton",
text: "Country",
menuButtons: [
{ id: "1", text: "Belgium" },
{ id: "2", text: "France" }
]
},{
name: "buttonGroup",
type: "buttonGroup",
buttons: [
{ text: "Option 1", togglable: true },
{ text: "Option 2", togglable: true },
{ text: "Option 3", togglable: true }
]
}],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
],
schema: {
model: { id: "id" }
}
},
editable: true
});
</script>