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.
The template context is set to the current DropDownTree component. To get a reference to the current data item, use the let-dataItem
directive.
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.