All Components

Default Item

The DropDownList enables you to configure its default item.

The defaultItem property type has to match the data type. For example, if the data property contains a list of objects, the defaultItem has to be defined as an object with the same textField and valueField as the data items.

The following example demonstrates how to define a defaultItem as a primitive value.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-dropdownlist
            [defaultItem]="'Select item...'"
            [data]="listItems"
            [valuePrimitive]="true"
        >
        </kendo-dropdownlist>
    </div>
  `
})
class AppComponent {
    public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];
}

The following example demonstrates how to define a defaultItem as an object value.

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist
        [defaultItem]="defaultItem"
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
    >
    </kendo-dropdownlist>
  `
})
class AppComponent {
    public defaultItem: { text: string, value: number } = { text: "Select item...", value: null };

    public listItems: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];
}
In this article