All Components

DropDownList Overview

The DropDownList is a form component that lets you choose a single predefined value from a list.

It is a richer version of the <select> element and supports data binding, filtering, templates, and default items.

Basic Usage

The following example demonstrates the DropDownList in action.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <p>T-shirt size:</p>
      <kendo-dropdownlist [data]="listItems">
      </kendo-dropdownlist>
    </div>
  `
})
class AppComponent {
    public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
}

Features

The DropDownList delivers the following features:

Events

The valueChange event is triggered when the value is changed.

The selectionChange event is triggered when the item selection is changed.

The filterChange event fires if the filterable property is set to true and the user types inside the filter input. For more details, refer to the section on filtering.

The open and close events are triggered when the visibility state of the suggestion list is about to change. Both events are preventable.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="data"
      [filterable]="true"
      (valueChange)="valueChange($event)"
      (selectionChange)="selectionChange($event)"
      (filterChange)="filterChange($event)"
      (open)="open()"
      (close)="close()"
      (focus)="focus()"
      (blur)="blur()"
    >
    </kendo-dropdownlist>
    <event-log title="Event log" [events]="events">
    </event-log>
  `
})

export class AppComponent {
    public events: string[] = [];
    public source: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
    public data: Array<string>;

    constructor() {
        this.data = this.source.slice();
    }

    public valueChange(value: any): void {
        this.log("valueChange", value);
    }

    public selectionChange(value: any): void {
        this.log("selectionChange", value);
    }

    public filterChange(filter: any): void {
        this.log("filterChange", filter);
        this.data = this.source.filter((s) => s.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
    }

    public open(): void {
        this.log("open");
    }

    public close(): void {
        this.log("close");
    }

    public focus(): void {
        this.log("focus");
    }

    public blur(): void {
        this.log("blur");
    }

    private log(event: string, arg: any): void {
        this.events.push(`${event}`);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent }   from './app.component';
import { EventLogComponent }   from './event-log.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent,
    EventLogComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}
import { AppModule } from './ng.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

On Looping through Items

By default, it is possible to select a DropDownList item by pressing a keyboard key. For example, if the DropDownList items are Foo, Bar, and Baz, and the user presses the B letter key, the first of the DropDownList items, based on their alphabetical order, starting with a B will be selected.

The keyboard selection is available only if filtering is disabled.

Common Scenarios

This section provides suggestions on how to use the configuration options of the DropDownList to achieve the implementation of some common scenarios.

Cascading DropDownLists

The cascading DropDownList is a series of 2 or more DropDownLists where each DropDownList is filtered based on the selected option in the previous DropDownList.

The following example demonstrates how to initialize a cascading DropDownList.

@Component({
  selector: 'my-app',
  template: `
    <div class="container-fluid example-wrapper">
        <div class="row">
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Category:</p>
                <kendo-dropdownlist
                    [data]="dataCategory"
                    [value]="selectedCategory"
                    [defaultItem]="defaultItemCategories"
                    [textField]="'categoryName'"
                    [valueField]="'categoryId'"
                    (valueChange)="handleCategoryChange($event)"
                >
                </kendo-dropdownlist>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Product:</p>
                <kendo-dropdownlist
                    [disabled]="isDisabledProducts"
                    [defaultItem]="defaultItemProducts"
                    [data]="dataResultProducts"
                    [value]="selectedProduct"
                    [textField]="'productName'"
                    [valueField]="'productId'"
                    (valueChange)="handleProductChange($event)"
                >
                </kendo-dropdownlist>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Order:</p>
                <kendo-dropdownlist
                    [disabled]="isDisabledOrders"
                    [defaultItem]="defaultItemOrders"
                    [data]="dataResultOrders"
                    [value]="selectedOrder"
                    [textField]="'orderName'"
                    [valueField]="'orderId'"
                    (valueChange)="handleOrderChange($event)"
                >
                </kendo-dropdownlist>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {

    public isDisabledProducts: boolean = true;
    public isDisabledOrders: boolean = true;

    public defaultItemCategories: { categoryName: string, categoryId: number } = { categoryName: "Select category", categoryId: null };

    public defaultItemProducts: { productName: string, productId: number } = { productName: "Select product", productId: null };

    public defaultItemOrders: { orderName: string, orderId: number } = { orderName: "Select order", orderId: null };

    public dataCategory: Array<{ categoryName: string, categoryId: number }> = [
        { categoryName: "Beverages", categoryId: 1 },
        { categoryName: "Condiments", categoryId: 2 },
        { categoryName: "Seafood", categoryId: 3 }
    ];

    public dataProducts: Array<{ productName: string, productId: number,categoryId:number }> = [
        { productName: "Chai", productId: 1,categoryId: 1 },
        { productName: "Chang", productId: 2,categoryId: 1 },
        { productName: "Aniseed Syrup", productId: 3,categoryId: 2  },
        { productName: "Genen Shouyu", productId: 4,categoryId: 2  },
        { productName: "Ikura", productId: 5,categoryId: 3  },
        { productName: "Konbu", productId: 6,categoryId: 3  },
    ];

    public dataOrders: Array<{ orderName: string,orderId:number, productId: number, }> = [
        { orderName: "Cunewalde", orderId: 1, productId: 1 },
        { orderName: "Albuquerque", orderId: 2, productId: 1 },
        { orderName: "Geneva", orderId: 3, productId: 2 },
        { orderName: "Graz", orderId: 4, productId: 2 },
        { orderName: "London", orderId: 5, productId: 3 },
        { orderName: "I. de Margarita", orderId: 6, productId: 3 },
        { orderName: "Barquisimeto", orderId: 7, productId: 4 },
        { orderName: "Brandenburg", orderId: 8, productId: 4 },
        { orderName: "Cunewalde", orderId: 9, productId: 5 },
        { orderName: "Mexico D.F.", orderId: 10, productId: 5 },
        { orderName: "Mexico D.F.", orderId: 11, productId: 6 },
        { orderName: "Rio de Janeiro", orderId:12, productId: 6 }
    ];

    public dataResultProducts: Array<{ productName: string, productId: number,categoryId:number }>;

    public dataResultOrders: Array<{ orderName: string,orderId:number, productId: number, }>;

    public selectedCategory: { categoryName: string, categoryId: number};
    public selectedProduct: { productName: string, productId: number};
    public selectedOrder: { orderName: string, orderId: number};

    handleCategoryChange(value) {
      this.selectedCategory = value;
      this.selectedProduct = undefined;
      this.selectedOrder = undefined;

      if(value.categoryId == this.defaultItemCategories.categoryId){
        this.isDisabledProducts = true;
        this.dataResultProducts = [];
      } else {
        this.isDisabledProducts = false;
        this.dataResultProducts = this.dataProducts.filter((s) => s.categoryId === value.categoryId )
      }

      this.isDisabledOrders = true;
      this.dataResultOrders = [];
    }

    handleProductChange(value) {
      this.selectedProduct = value;
      this.selectedOrder = undefined;

      if(value.productId == this.defaultItemProducts.productId){
        this.isDisabledOrders = true;
        this.dataResultOrders = [];
      } else {
        this.isDisabledOrders = false;
        this.dataResultOrders = this.dataOrders.filter((s) => s.productId === value.productId )
      }
    }

    handleOrderChange(value) {
      this.selectedOrder = value;
    }

}
In this article