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.
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
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 MultiSelectTree component.
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.
Footer Template
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.
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.