Toolbar Templates
The Kendo UI TreeList 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 pass a function and build an HTML chunk.
The following example demonstrates how to set the template as a function that is returned by kendo.template.
<div id="treelist"></div>
<script id="template" type="text/x-kendo-template">
<button id="custom-button">Custom command</button>
</script>
<script>
$("#treelist").kendoTreeList({
toolbar: [
{ template: kendo.template($("#template").html()) }
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
$("#custom-button").kendoButton({
click: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Toolbar command is clicked!");
}
});
</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="treelist"></div>
<script>
$("#treelist").kendoTreeList({
toolbar: [
{ template: "<button id='custom-button'>Custom command</button>" }
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
$("#custom-button").kendoButton({
click: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("Toolbar command is clicked!");
}
});
</script>