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.
The template context is set to the current MultiSelectTree component. To get a reference to the current data item, use the let-dataItem
directive.
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, theGroupTagTemplate
enables 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.