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

Toolbar Template

The toolbar template enables you to customize the content and determine the position of the TreeList toolbar.

To define a toolbar template, nest an <ng-template> tag with the kendoTreeListToolbarTemplate directive inside the <kendo-treelist> tag.

The following example demonstrates how to define the toolbar template.

Example
View Source
Edit In Stackblitz  
Change Theme:

Toolbar Position

The toolbar provides the following options for defining its position:

  • topLocates the toolbar above the header.
  • bottomLocates the toolbar under the pager.
  • bothDisplays one toolbar above the header, and the another toolbar under the pager.

The following example demonstrates the position property in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Define Spacing between the Toolbar Elements

The TreeListSpacer enables you to define spacing between the toolbar inner elements and arrange them in accordance with your preference. By default, each kendo-treelist-spacer element occupies all available space. To override this behavior and specify a custom size you could utilize the width property.

Example
View Source
Edit In Stackblitz  
Change Theme: