Configuring the ToolBar in the Angular TreeList
Starting with version 17.0.0, you can use the ToolBar component in the Kendo UI for Angular TreeList instead of the toolbar template. The ToolBar offers a set of built-in features and control types, and also allows you to include custom controls to enhance the TreeList's functionality.
To use the ToolBar component in the TreeList, define the kendo-toolbar component inside the <kendo-treelist> tag, add the desired elements, and configure them.
<kendo-treelist>
<kendo-toolbar>
</kendo-toolbar>
</kendo-treelist>Built-In TreeList Toolbar Tools
With the introduction of the ToolBar component in the TreeList, new directives have been added to integrate dedicated toolbar tools for performing common data operations. The following tables list all of the available built-in directives of the TreeList's toolbar:
| Toolbar Tool | Description |
|---|---|
kendoTreeListPDFTool | Directive that triggers the TreeList's PDF export feature. |
kendoTreeListExcelTool | Directive that triggers the TreeList's Excel export feature. |
kendoTreeListAddTool | Directive for adding a new item to the TreeList. Triggers the TreeList's add event. |
Including the Built-In Toolbar Tools
You can integrate each directive as a toolbar tool in the TreeList by applying it to a <kendo-toolbar-button> component, nested within the TreeList's toolbar:
<kendo-treelist>
<kendo-toolbar>
<kendo-toolbar-button kendoTreeListAddTool></kendo-toolbar-button>
<kendo-toolbar-separator></kendo-toolbar-separator>
<kendo-toolbar-spacer></kendo-toolbar-spacer>
<kendo-toolbar-button kendoTreeListPDFTool></kendo-toolbar-button>
<kendo-toolbar-button kendoTreeListExcelTool></kendo-toolbar-button>
</kendo-toolbar>
</kendo-treelist>Customizing the Toolbar Tools Rendering
You can control the visibility of the text and icons for the tools displayed in the TreeList's toolbar or in its overflow popup. To customize the appearance of an individual toolbar tool, use the showText or showIcon properties of the corresponding tool.
You can also define the showText and showIcon properties on the ToolBar component to customize the appearance of all tools globally.
The showText and showIcon properties accept the following values of type DisplayMode:
always—The text or icon is always visible, regardless of the overflow mode set for the ToolBar.toolbar—The text or icon is displayed in the ToolBar and in the overflow popup ifsectionoverflow mode is used.menu—The text or icon is displayed only in the overflow popup ifmenuoverflow mode is used.never—The text or icon is never displayed.
<kendo-treelist>
<kendo-toolbar [showText]="showText" [showIcon]="showIcon">
...
</kendo-toolbar>
</kendo-treelist>The following example demonstrates how the icons and text of the TreeList toolbar tools behave depending on the values of the showText and showIcon properties.
Implementing a Responsive ToolBar in TreeList
The TreeList's toolbar inherits the responsive behavior of the ToolBar component and supports all of the different overflow modes that the ToolBar provides. The available overflow modes are:
- Scroll Mode—The ToolBar becomes scrollable, which allows you to display all tools regardless of the component's width.
- Section Mode—The toolbar tools that do not fit the component's width are displayed in a popup element while maintaining their initial rendering.
- Menu Mode—The toolbar tools that do not fit the component's width are displayed in a popup list.
The following example demonstrates the behavior of the TreeList's toolbar when the overflow mode is set to section.
Including Custom Control Types
The ToolBar component provides generic control types that can be added to the TreeList's toolbar, alongside the built-in toolbar directives of the TreeList. The ToolBar component also allows you to include custom control types in the TreeList's toolbar such as dropdowns, inputs, and others.
The following example demonstrates how to include custom control types in the TreeList's toolbar, different from the built-in toolbar directives.