All Components

Templates

The DropDownList provides templates which enable you to customize the content of its 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 kendoDropDownListItemTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownList 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-dropdownlist
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="selectedValue"
            [valuePrimitive]="true"
        >
            <ng-template kendoDropDownListItemTemplate let-dataItem>
                <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
            </ng-template>
        </kendo-dropdownlist>
    </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;
}

Value Template

To customize the element content that holds the selected text, use the value template. To define a value template, nest a <ng-template> tag with a kendoDropDownListValueTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownList 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: `
    <kendo-dropdownlist
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
    >
        <ng-template kendoDropDownListValueTemplate let-dataItem>
            <span class="template">{{ dataItem?.value }}</span>&nbsp;{{ dataItem?.text }}
        </ng-template>
    </kendo-dropdownlist>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public selectedValue: { text: string, value: number } = { text: "Foo", value: 1 };
}

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 kendoDropDownListHeaderTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownList component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-dropdownlist
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
        [valuePrimitive]="true"
    >
        <ng-template kendoDropDownListHeaderTemplate>
            <h4>T-shirt sizes</h4>
        </ng-template>
    </kendo-dropdownlist>
  `
})
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 kendoDropDownListFooterTemplate directive inside a <kendo-dropdownlist> tag.

The template context is set to the current DropDownList component.

@Component({
  selector: 'my-app',
  styles: ['h4 { font-size: 1em; font-weight: bold; padding: 0 8px; }'],
  template: `
    <kendo-dropdownlist
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
        [valuePrimitive]="true"
    >
        <ng-template kendoDropDownListFooterTemplate>
            <h4>{{listItems.length}} sizes available</h4>
        </ng-template>
    </kendo-dropdownlist>
  `
})
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 kendoDropDownListNoDataTemplate directive inside a <kendo-dropdownlist> tag.

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