New to Kendo UI for Angular? Start a free 30-day trial

Angular TreeList Toolbar Template

The TreeList enables you to customize the content and determine the position of the TreeList toolbar. To achieve this, nest an <ng-template> inside the <kendo-treelist> tag and apply the kendoTreeListToolbarTemplate directive.

The following example demonstrates how to define the toolbar template.

Example
View Source
Change Theme:

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 the position property in action.

Example
View Source
Change Theme:

Defining the Spacing between Toolbar Elements

You can use the TreeListSpacer to add spacing between the toolbar's inner elements and arrange them based on your preferences. By default, each kendo-treelist-spacer element occupies all available space. To override this behavior and specify a custom size, you can use its width property.

The following example demonstrates how to position the export button in the center of the available toolbar space.

Example
View Source
Change Theme: