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

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 item 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 obejct.
Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

To render a list footer element below the suggestion list, nest an <ng-template> tag with a kendoMultiColumnComboBoxFooterTemplate directive inside a <kendo-multicolumncombobox> tag.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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

Example
View Source
Edit In Stackblitz  
Change Theme:

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

Example
View Source
Edit In Stackblitz  
Change Theme: