New to Kendo UI for Angular? Start a free 30-day trial

Templates

The MultiSelectTree 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 a item template. To define a item template, nest an <ng-template> tag with the kendoMultiSelectTreeNodeTemplate directive inside a <kendo-multiselecttree> 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.

Example
View Source
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 kendoMultiSelectTreeTagTemplate directive inside a <kendo-multiselecttree> 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 MultiSelectTree component.

Example
View Source
Change Theme:

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 kendoMultiSelectTreeHeaderTemplate directive inside a <kendo-multiselecttree> tag.

The template context is set to the current MultiSelectTree component.

Example
View Source
Change Theme:

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 kendoMultiSelectTreeFooterTemplate directive inside a <kendo-multiselecttree> tag.

The template context is set to the current MultiSelectTree component.

Example
View Source
Change Theme:

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 kendoMultiSelectTreeNoDataTemplate directive inside a <kendo-multiselecttree> tag.

Example
View Source
Change Theme: