Templates
The MultiSelect 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 list items, use the item template.
The MultiSelect supports the following scenarios for using its item template:
Defining the Item Template
To define an item template, nest an <ng-template> tag with the kendoMultiSelectItemTemplate directive inside a <kendo-multiselect> 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.
Rendering Custom Item Content
To configure the content of the custom value item in the list, use the custom item template. To define a custom item template, nest an <ng-template> tag with an kendoMultiSelectCustomItemTemplate directive inside a <kendo-multiselect> tag.
The template context is set to the current text of the MultiSelect.
Tag Template
To customize the content of the element that holds the selected text, use the tag template. To define a tag template, nest an <ng-template> tag with a kendoMultiSelectTagTemplate directive inside a <kendo-multiselect> tag.
- To render the selected items as a single summary tag, enable the single-tag mode through the
GroupTagTemplate.- While the
TagTemplateenables you customize a single tag, theGroupTagTemplateenables you to customize the selected items in the single-tag mode.
The template context is set to the current MultiSelect component.
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 kendoMultiSelectHeaderTemplate directive inside a <kendo-multiselect> tag.
The template context is set to the current MultiSelect 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 kendoMultiSelectFooterTemplate directive inside a <kendo-multiselect> tag.
The template context is set to the current MultiSelect 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 kendoMultiSelectNoDataTemplate directive inside a <kendo-multiselect> tag.
Group Header Template
To customize the content of the group headers in the list, nest an <ng-template> tag with a kendoMultiSelectGroupTemplate directive inside a <kendo-multiselect> 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 kendoMultiSelectFixedGroupTemplate directive inside a <kendo-multiselect> tag.
The current group name is available as an implicit context variable (let-groupName).