Templates
The MultiColumnComboBox provides templates that enable you to customize the content of its suggestion list table and elements.
Cell Template
To customize the content of the cells in a specified column, nest an <ng-template>
tag with the kendoMultiColumnComboBoxColumnCellTemplate
directive inside the targeted <kendo-combobox-column>
tag.
The current column
and data items are available as context variables:
let-dataItem="dataItem"
(any
)—The current data item. Also available as implicit context variable.let-column="column"
(ColumnComponent
)—The current column configuration object.
Column Header Template
To customize the content of the column header in a specified column, nest an <ng-template>
tag with the kendoMultiColumnComboBoxColumnHeaderTemplate
directive inside the targeted <kendo-combobox-column>
tag.
Header Template
To render a list header element above the suggestion list, nest an <ng-template>
tag with a kendoMultiColumnComboBoxHeaderTemplate
directive inside a <kendo-multicolumncombobox>
tag.
Footer Template
To render a list footer element below the suggestion list, nest an <ng-template>
tag with a kendoMultiColumnComboBoxFooterTemplate
directive inside a <kendo-multicolumncombobox>
tag.
No-Data Template
To customize the content of the suggestion list when no data is available, nest an <ng-template>
tag with a kendoMultiColumnComboBoxNoDataTemplate
directive inside a <kendo-multicolumncombobox>
tag.
Group Header Template
To customize the content of the group headers in the list, nest an <ng-template>
tag with a kendoMultiColumnComboBoxGroupTemplate
directive inside a <kendo-multicolumncombobox>
tag.
The current group name is available as implicit context variable (let-groupName
).
Fixed Group Header Template
To customize the content of the group header that is fixed above the list, nest an <ng-template>
tag with a kendoMultiColumnComboBoxFixedGroupTemplate
directive inside a <kendo-multicolumncombobox>
tag.
The current group name is available as an implicit context variable (let-groupName
).