# 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`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/columncelltemplatedirective) directive inside the targeted [`<kendo-combobox-column>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent) tag.

The current [`column`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent) 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`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent))—The current column configuration object.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/templates/column-cell/source.txt)

## Column Header Template

To customize the content of the column header in a specified column, nest an `<ng-template>` tag with the [`kendoMultiColumnComboBoxColumnHeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/columnheadertemplatedirective) directive inside the targeted [`<kendo-combobox-column>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/comboboxcolumncomponent) tag.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/templates/column-header/source.txt)

## Header Template

To render a list header element above the suggestion list, nest an `<ng-template>` tag with a [`kendoMultiColumnComboBoxHeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/headertemplatedirective) directive inside a [`<kendo-multicolumncombobox>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multicolumncomboboxcomponent) tag.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/templates/header/source.txt)

## Footer Template

To render a list footer element below the suggestion list, nest an `<ng-template>` tag with a [`kendoMultiColumnComboBoxFooterTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/footertemplatedirective) directive inside a [`<kendo-multicolumncombobox>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multicolumncomboboxcomponent) tag.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/templates/footer/source.txt)

## No-Data Template

To customize the content of the suggestion list when no data is available, nest an `<ng-template>` tag with a [`kendoMultiColumnComboBoxNoDataTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/nodatatemplatedirective) directive inside a [`<kendo-multicolumncombobox>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multicolumncomboboxcomponent) tag.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/templates/no-data/source.txt)

## Group Header Template

To customize the content of the group headers in the list, nest an `<ng-template>` tag with a [`kendoMultiColumnComboBoxGroupTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/grouptemplatedirective) directive inside a [`<kendo-multicolumncombobox>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multicolumncomboboxcomponent) tag.

The current group name is available as implicit context variable (`let-groupName`).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/templates/group-header/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/fixedgrouptemplatedirective) directive inside a [`<kendo-multicolumncombobox>`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multicolumncomboboxcomponent) tag.

The current group name is available as an implicit context variable (`let-groupName`).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/multicolumncombobox/templates/fixed-group-header/source.txt)

## Suggested Links

* [API Reference of the MultiColumnComboBox](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/multicolumncomboboxcomponent)