toolbar String|Function|Array|Object
- 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.If an
Object
value is assigned, it will propagate these properties to the underlying Toolbar:-
items
- an array of commands as explained above -
overflow
- an object that configures the overflow behavior of the toolbar. The same as Toolbar.overflow property
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>
Apart from the built-in tools, the TreeList 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. Note that all tools (commands) must have their name specified:
Example
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
toolbar: [ {
name: "btn-cmd",
type: "button",
text: "Button"
}, {
name: "toggle-cmd",
type: "button",
text: "Toggle",
togglable: true,
icon: "cancel"
}, {
name: "split-cmd",
type: "splitButton",
text: "SplitButton",
menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
} ],
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.icon String
Specifies the icon's 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 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", icon: "info-circle", imageClass: "custom-info" }],
columns: [
"lastName",
"position"
],
dataSource: [
{ id: 1, parentId: null, lastName: "Jackson", position: "CEO" },
{ id: 2, parentId: 1, lastName: "Weber", position: " VP, Engineering" }
]
});
</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", icon: "info-circle", imageClass: "custom-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.template String|Function
The template which renders the command. By default renders a button. Uses the template for a ToolBar item toolbar.items.template
Example - set the template as a function
<div id="treelist"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" 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;
}
$("#treelist").kendoTreeList({
toolbar: [
{ template: kendo.template($("#template").html()) }
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
Check Toolbar template for a live demo.
Example - set the template as a string
<div id="treelist"></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;
}
$("#treelist").kendoTreeList({
toolbar: [
{
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
}
],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</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>
toolbar.items.click Function
The click
handler of the toolbar command. Used for custom toolbar commands.
toolbar.items.icon String
Specifies the icon's 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 name set to the option
value. This approach allows you to display an icon inside your custom toolbar commands.
toolbar.items.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.
toolbar.items.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.
toolbar.items.template String|Function
The template which renders the command. By default renders a button. Uses the template for a ToolBar item toolbar.items.template
Check Toolbar template for a live demo.
toolbar.items.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.
toolbar.overflow Object
Specifies Toolbar.overflow configuration for the toolbar.
toolbar.overflow.mode String
(default: "menu")
Defines the overflow mode. The available options are:
-
"menu"
— Moves overflowing items into a dropdown menu. -
"scroll"
— Keeps items visible and enables horizontal scrolling. -
"section"
— Groups items into collapsible sections. -
"none"
— Disables overflow handling; items may be cut off.
toolbar.overflow.scrollButtons String
(default: "auto")
Defines the visibility of scroll buttons when mode
is "scroll"
. The available options are:
-
"auto"
— Displays scroll buttons only when needed. -
"hidden"
— Hides the scroll buttons at all times. -
"visible"
— Always shows the scroll buttons.
toolbar.overflow.scrollButtonsPosition String
(default: "split")
Defines the placement of scroll buttons. The available options are:
-
"split"
— Scroll buttons appear at both ends of the toolbar. -
"start"
— Scroll buttons appear only at the start of the toolbar. -
"end"
— Scroll buttons appear only at the end of the toolbar.
toolbar.overflow.scrollDistance Number
(default: 50)
Specifies the distance (in pixels) the toolbar scrolls when a scroll button is clicked.