Templates
The DropDownTree provides templates which enable you to customize the content of its drop-down list items.
Item Template
To customize the content of the list items, use an item template. To define an item template, nest an <ng-template> tag with the kendoDropDownTreeNodeTemplate directive inside a <kendo-dropdowntree> tag.
Use the let-dataItem directive to access the template context that is established based on the current data item displayed in the component list.
Value Template
To customize the content of the element which holds the selected text, use the value template. To define a value template, nest an <ng-template> tag with a kendoDropDownTreeValueTemplate directive inside a <kendo-dropdownlist> 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.
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.
Footer Template
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.
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.