toolbarString|Function|Array|Object
- If a
Stringvalue is assigned to thetoolbarconfiguration 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 akendo.template()function. - If a
Functionvalue 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
Arrayvalue 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
Objectvalue is assigned, it will propagate these properties to the underlying Toolbar:items- an array of commands as explained aboveoverflow- an object that configures the overflow behavior of the toolbar. The same asToolbar.overflowproperty
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.clickFunction
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.iconString
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.imageClassString
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.nameString
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.templateString|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.textString
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.itemsArray
A JavaScript array that contains the ToolBar's commands configuration.
toolbar.items.clickFunction
The click handler of the toolbar command. Used for custom toolbar commands.
toolbar.items.iconString
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.imageClassString
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.nameString
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.templateString|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.textString
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.overflowObject
Specifies Toolbar.overflow configuration for the toolbar.
toolbar.overflow.modeString(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.scrollButtonsString(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.scrollButtonsPositionString(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.scrollDistanceNumber(default: 50)
Specifies the distance (in pixels) the toolbar scrolls when a scroll button is clicked.