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 nodes.

Node Template

To customize the content of the list nodes, use a node template. To define a node template, nest an <ng-template> tag with the kendoMultiSelectTreeNodeTemplate directive inside a <kendo-multiselecttree> tag.

The template context is set to the current MultiSelectTree component. To get a reference to the current data item, use the let-dataItem directive.

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 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
Edit In Stackblitz  
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
Edit In Stackblitz  
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
Edit In Stackblitz  
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
Edit In Stackblitz  
Change Theme: