Angular TreeList Toolbar Template
Starting with version
17.0.0, the ToolBar component was introduced in the Kendo UI for Angular TreeList and is now the recommended approach for configuring the TreeList's toolbar. You can use the toolbar template as an alternative to the ToolBar component to achieve highly customized solutions.
The ToolbarTemplateDirective enables you to customize the Angular TreeList toolbar by adding components like buttons, inputs, dropdowns, and others. To further enhance the functionality of the TreeList's toolbar and personalize the user experience, you can also add HTML elements, flexible positioning, and spacing.
To achieve this toolbar customization, nest an <ng-template> inside the <kendo-treelist> tag and apply the kendoTreeListToolbarTemplate directive. Inside the template, add the desired elements and configure them as needed.
<kendo-treelist>
<ng-template kendoTreeListToolbarTemplate position="bottom">
<button kendoTreeListAddCommand>Add new</button>
<kendo-treelist-spacer></kendo-treelist-spacer>
<button kendoTreeListExcelCommand>Export to Excel</button>
</ng-template>
</kendo-treelist>The
ToolbarTemplateDirectivedoes not support the built-in overflow modes available in the ToolBar component. To utilize overflow functionality, use the ToolBar component in the TreeList instead of the template approach.
The following example demonstrates how to define the toolbar template.
Setting the Toolbar Position
You can display the toolbar above the TreeList, below the TreeList, or both. To configure this behavior, define its position option, which accepts the following values:
top—Locates the toolbar above the group panel or header.bottom—Locates the toolbar under the pager.both—Displays one toolbar above the group panel or header and another under the pager.
The following example demonstrates setting the toolbar position to 'top', 'bottom', or 'both' to control where it renders relative to the TreeList.
Defining the Spacing between Toolbar Elements
The TreeListSpacer enables you to define spacing between the toolbar inner elements and arrange them in accordance with your preferences. By default, each kendo-treelist-spacer element occupies all available space. To override this behavior and specify a custom size, you utilize its width property.
The following example demonstrates how to position the export button in the center of the available toolbar space.
Focusing Custom Toolbar Elements
When the TreeList is navigable and the kendoTreeListToolbarTemplate contains focusable elements, use the TreeListToolbarFocusableDirective to ensure proper navigation and prevent the click event from propagating. You can apply the directive to any focusable component, including:
ComboBoxDropDownListMultiSelectAutoCompleteDatePickerNumericTextBoxTextBox- Native HTML elements such as
<button>or<input>
Apply the kendoTreeListToolbarFocusable directive to the component or custom element that you want to include in keyboard navigation. To prevent the click event from propagating, also add (click)="$event.stopPropagation()" to the element.
<ng-template kendoTreeListToolbarTemplate>
<kendo-combobox [data]="listItems" kendoTreeListToolbarFocusable (click)="$event.stopPropagation()"></kendo-combobox>
<kendo-dropdownlist [data]="listItems" kendoTreeListToolbarFocusable (click)="$event.stopPropagation()"></kendo-dropdownlist>
<kendo-textbox kendoTreeListToolbarFocusable (click)="$event.stopPropagation()"></kendo-textbox>
</ng-template>The following example demonstrates using the kendoTreeListToolbarFocusable directive to manage focus and keyboard navigation for a DropDownList and TextBox inside the TreeList toolbar.
Handling Components with Internal Navigation
To ensure proper navigation for focusable components with internal navigation, such as TextBox, wrap the component in a custom container element and apply the kendoTreeListToolbarFocusable directive.
To navigate within the TextBox, focus the component. To keep navigating between the TreeList toolbar elements, focus the TextBox container instead.
<ng-template kendoTreeListToolbarTemplate>
...
<div #wrapper kendoTreeListToolbarFocusable (keydown.enter)="textbox.focus()">
<kendo-textbox #textbox
(click)="$event.stopImmediatePropagation()"
(keydown)="onKeydown($event, wrapper)"
></kendo-textbox>
</div>
</ng-template>public onKeydown(ev: KeyboardEvent, wrapper: HTMLDivElement): void {
if (ev.key === 'Escape') {
wrapper.focus();
}
if (ev.key === 'ArrowLeft' || ev.key === 'ArrowRight') {
ev.stopImmediatePropagation();
}
}The following example demonstrates combining kendoTreeListToolbarFocusable with keyboard event handlers to manage focus and Tab navigation for a TextBox inside the TreeList toolbar.