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

Templates

The DropDownTree provides templates which enable you to customize the content of its drop-down list nodes.

Node Template

To customize the content of the list nodes, use a node template. To define a node template, nest an <ng-template> tag with the kendoDropDownTreeNodeTemplate directive inside a <kendo-dropdowntree> tag.

The template context is set to the current DropDownTree component. To get a reference to the current data item, use the let-dataItem directive.

Example
View Source
Edit In Stackblitz  
Change Theme:

Header Template

To customize the header element of the drop-down list, use a header template. To define a header template, nest an <ng-template> tag with a kendoDropDownTreeHeaderTemplate directive inside a <kendo-dropdowntree> tag.

The template context is set to the current DropDownTree component.

Example
View Source
Edit In Stackblitz  
Change Theme:

To customize the footer element of the drop-down list, use a footer template. To define a footer template, nest an <ng-template> tag with a kendoDropDownTreeFooterTemplate directive inside a <kendo-dropdowntree> tag.

The template context is set to the current DropDownTree component.

Example
View Source
Edit In Stackblitz  
Change Theme:

No-Data Template

To customize the content of the drop-down list when no data is available, use a no-data template. To define a no-data template, nest an <ng-template> tag with a kendoDropDownTreeNoDataTemplate directive inside a <kendo-dropdowntree> tag.

Example
View Source
Edit In Stackblitz  
Change Theme: