All Components

Templates

The ComboBox provides templates which enable you to customize the content of its suggested list items and the drop-down list elements.

Item Template

To customize the content of each list item, use the item template. To define an item template, nest a <ng-template> tag with an kendoComboBoxItemTemplate directive inside a <kendo-combobox> tag.

The template context is set to the current ComboBox component. To get a reference to the current data item, use the let-dataItem directive.

@Component({
  selector: 'my-app',
  styles: ['.template { display: inline-block; background: #333; color: #fff; border-radius: 50%; width: 18px; height: 18px; text-align: center; } '],
  template: `
    <div class="example-wrapper">
        <kendo-combobox
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="selectedValue"
            [valuePrimitive]="true"
        >
            <ng-template kendoComboBoxItemTemplate let-dataItem>
                <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
            </ng-template>
        </kendo-combobox>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: number = 2;
}

Header Template

To customize the header element of the drop-down list, use the header template. To define a header template, nest a <ng-template> tag with a kendoComboBoxHeaderTemplate directive inside a <kendo-combobox> tag.

The template context is set to the current ComboBox component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-combobox
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
        [valuePrimitive]="true"
    >
        <ng-template kendoComboBoxHeaderTemplate>
            <h4>T-shirt sizes</h4>
        </ng-template>
    </kendo-combobox>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: number = 2;
}

To customize the footer element of the drop-down list, use the footer template. To define a footer template, nest a <ng-template> tag with a kendoComboBoxFooterTemplate directive inside a <kendo-combobox> tag.

The template context is set to the current ComboBox component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-combobox
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
        [valuePrimitive]="true"
    >
        <ng-template kendoComboBoxFooterTemplate>
            <h4>{{listItems.length}} sizes available</h4>
        </ng-template>
    </kendo-combobox>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: number = 2;
}

No-Data Template

To customize the content of the drop-down list when no data is present, use the no-data template. To define a no-data template, nest a <ng-template> tag with a kendoComboBoxNoDataTemplate directive inside a <kendo-combobox> tag.

@Component({
  selector: 'my-app',
  styles: ['.k-i-warning { font-size: 2.5em; } h4 { font-size: 1em;}'],
  template: `
    <kendo-combobox
        [data]="listItems"
    >
        <ng-template kendoDropDownListNoDataTemplate>
            <h4><span class="k-icon k-i-warning"></span><br /><br /> No data here</h4>
        </ng-template>
    </kendo-combobox>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [];
}
In this article