Toolbar Templates
The Kendo UI Grid provides full control over the rendering of its Toolbar content by using the Kendo UI Templates
. The toolbar.template
configuration enables you to specify your own layout instead of using the built-in buttons.
Setting a Toolbar Template as a Function
The template
toolbar configuration enables you to build a Kendo UI Template
by passing a function.
The following example demonstrates how to set the template as a function that is returned by kendo.template
.
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Toolbar command is clicked!");
return false;
}
$("#grid").kendoGrid({
toolbar: [
{ template: kendo.template($("#template").html()) }
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
Setting a Toolbar Template as a String
The template
toolbar configuration enables you to create HTML chunks by passing directly a string
.
The following example demonstrates how to set the template as a string.
<div id="grid"></div>
<script>
function toolbar_click() {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Toolbar command is clicked!");
return false;
}
$("#grid").kendoGrid({
toolbar: [
{ template: "<button id='custom-button' class='k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>Custom command</button>" }
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
KB Articles on Toolbar Templates
- Place Edit or Update Buttons to Grid Toolbar
- Lock and Unlock Grid Columns by Using Toolbar instead of Column Menu
- Find Out More in the Knowledge Base