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.

Defining the Template

To define an item template, nest an <ng-template> tag with the kendoMultiSelectItemTemplate directive inside a <kendo-multiselect> tag.

The template context is set to the current MultiSelect component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Rendering Item Checkboxes

The MultiSelect enables you to render checkboxes for its items by using the item template.

Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Item Template

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 TagTemplate enables you customize a single tag, the GroupTagTemplate enables you to customize the selected items in the single-tag mode.

The template context is set to the current MultiSelect component.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

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 the no-data template. To define a no-data template, nest an <ng-template> tag with a kendoMultiSelectNoDataTemplate directive inside a <kendo-multiselect> tag.

Example
View Source
Edit In Stackblitz  
Change Theme: