toolbar String|Function|Array
- If a
String
value is assigned to thetoolbar
configuration option, it will be treated as a single string template for the whole TreeList 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 akendo.template()
function call or a generic function reference), then the return value of the function will be used to render the contents of the TreeList toolbar. - If an
Array
value is assigned, it will be treated as the list of commands which are displayed in the TreeList toolbar. Commands can be custom or built-in. The supported built-in commands are: -
create
- Adds an empty data item to the treelist. -
excel
- Exports the TreeList data in MS Excel format. -
pdf
- Exports the TreeList data in PDF format. -
search
- built-in search panel for the TreeList.
Example - configuring the TreeList toolbar as a string template
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
toolbar: "<p>My string template in a paragraph.</p>",
columns: [
{ field: "name" },
{ field: "age" }
],
sortable: {
mode: "multiple"
},
dataSource: {
data: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
}
});
</script>
Example - configuring the TreeList Toolbar template with a function and including the built in search functionality
<div id="treeList"></div>
<script type="text/x-kendo-template" id="template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
<span class="k-textbox k-grid-search k-display-flex">
<input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
<span class="k-input-icon">
<span class="k-icon k-i-search"></span>
</span>
</span>
</script>
<script>
function toolbar_click() {
kendo.alert("Toolbar command is clicked!");
return false;
}
$("#treeList").kendoTreeList({
toolbar: kendo.template($("#template").html()),
columns: [
{ field: "name" },
{ field: "age" }
],
sortable: {
mode: "multiple"
},
dataSource: {
data: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
}
});
</script>
Example - configuring the TreeList toolbar as an array of commands
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
toolbar: ["excel", "pdf", "search"],
columns: [
{ field: "name" },
{ field: "age" }
],
sortable: {
mode: "multiple"
},
dataSource: {
data: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
}
});
</script>
toolbar.click Function
The click
handler of the toolbar command. Used for custom toolbar commands.
Example - specifying the name of the command
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
toolbar: [
{ name: "custom", click: function() { alert("custom"); } }
],
columns: [
{ field: "name" },
{ field: "age" }
],
sortable: {
mode: "multiple"
},
dataSource: {
data: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
}
});
</script>
toolbar.imageClass String
A class name that will be rendered inside the toolbar button. When you set this option, the TreeList renders an additional span
element inside the toolbar button which has a class name set to the option
value. This approach allows you to display an icon inside your custom toolbar commands.
Example - specifying the name of the command
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
toolbar: [{name: "custom", text: "About", imageClass: "k-i-info" }],
columns: [
"lastName",
"position"
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: " VP, Engineering" }
]
});
</script>
toolbar.name String
The name of the toolbar command. Can be either a built-in ("create", "excel", or "pdf") or a custom string. The name
is output in the HTML as a value of the data-command
attribute of the button.
Example - specifying the name of the command
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
toolbar: [
{ name: "custom", click: function() { alert("custom"); } }
],
columns: [
{ field: "name" },
{ field: "age" }
],
sortable: {
mode: "multiple"
},
dataSource: {
data: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
}
});
</script>
toolbar.text String
The text that is displayed by the command button. If not set, the TreeList will use the name` option as the button text instead.
Example - specifying the text for the command button
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
toolbar: [
{ name: "custom", text: "My Command" }
],
columns: [
{ field: "name" },
{ field: "age" }
],
sortable: {
mode: "multiple"
},
dataSource: {
data: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
}
});
</script>