Templates
The DropDownList provides templates which enable you to customize the content of its drop-down list items and elements.
Item Template
To customize the content of the suggestion list items, use the item template. To define an item template, nest an <ng-template>
tag with the kendoDropDownListItemTemplate
directive inside a <kendo-dropdownlist>
tag.
The template context is set to the current DropDownList 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 kendoDropDownListValueTemplate
directive inside a <kendo-dropdownlist>
tag.
The template context is set to the current DropDownList 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 the header template. To define a header template, nest an <ng-template>
tag with a kendoDropDownListHeaderTemplate
directive inside a <kendo-dropdownlist>
tag.
The template context is set to the current DropDownList component.
Footer Template
To customize the footer element of the drop-down list, use the footer template. To define a footer template, nest an <ng-template>
tag with a kendoDropDownListFooterTemplate
directive inside a <kendo-dropdownlist>
tag.
The template context is set to the current DropDownList component.
No-Data Template
To customize the content of the drop-down list when no data is available, use the no-data template. To define a no-data template, nest an <ng-template>
tag with a kendoDropDownListNoDataTemplate
directive inside a <kendo-dropdownlist>
tag.
Group Header Template
To customize the content of the group headers in the list, nest an <ng-template>
tag with a kendoDropDownListGroupTemplate
directive inside a <kendo-dropdownlist>
tag.
The current group name is available as implicit context variable (let-groupName
).
Fixed Group Header Template
To customize the content of the group header that is fixed above the list, nest an <ng-template>
tag with a kendoDropDownListFixedGroupTemplate
directive inside a <kendo-dropdownlist>
tag.
The current group name is available as an implicit context variable (let-groupName
).