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