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

On Changing the Item Selection

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-dropdownlist
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            (selectionChange)="handleSelection($event)"
        >
        </kendo-dropdownlist>
    </div>
    <div class="example-config">
        <h4>Last 10 calls:</h4>
        <p *ngFor="let call of eventCalls">{{ call.name }}: <strong>{{ call.value | json }}</strong></p>
    </div>
  `
})
class AppComponent {
    public data: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public eventCalls: Array<any> = [];

    last10Calls() {
        const end = this.eventCalls.length;

        return this.eventCalls.slice(Math.max(0, end - 10), end);
    }

    handleSelection(value) {
        this.eventCalls = this.last10Calls().concat([ { name: 'select', value: value } ]);
    }
}

On Changing the Value

The valueChange event is triggered when the selected value is changed. If the drop-down list is open, the valueChange event will not fire. To raise the change event when the drop-down list is still open, either blur the component or press ENTER.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-dropdownlist
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            (valueChange)="handleValue($event)"
        >
        </kendo-dropdownlist>
    </div>
    <div class="example-config">
        <h4>Last 10 calls:</h4>
        <p *ngFor="let call of eventCalls">{{ call.name }}: <strong>{{ call.value | json }}</strong></p>
    </div>
  `
})
class AppComponent {
    public data: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public eventCalls: Array<any> = [];

    last10Calls() {
        const end = this.eventCalls.length;

        return this.eventCalls.slice(Math.max(0, end - 10), end);
    }

    handleValue(value) {
        this.eventCalls = this.last10Calls().concat([ { name: 'change', value: value } ]);
    }
}

On Changing the Filter

The filterChange event fires when the user types inside the filter input. For more details, refer to the section on filtering.

On Closing and Opening the Drop-Down List

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

To manually open or close the drop-down list, use the toggle method.

import { ViewChild, Component } from '@angular/core';
import { PreventableEvent, DropDownsModule, DropDownListComponent } from '@progress/kendo-angular-dropdowns';

@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-config">
        <p>Use the button to open and close the drop-down list.</p>     
        <button class="k-button" (click)="toggle()">
            <span *ngIf="opened">Close DropDownList</span>
            <span *ngIf="!opened">Open DropDownList</span>
        </button>
    </div>
    <div class="row">
        <div class="col-xs-12 example-col">
          <p>DropDownList with prevented open and close.</p>
          <kendo-dropdownlist
              #dropdownlist
              [data]="listItems"
              [textField]="'text'"
              [valueField]="'value'"
              (open)="onOpen($event)"
              (close)="onClose($event)"
          >
          </kendo-dropdownlist>
        </div>
    </div>
  `
})
class AppComponent {
    @ViewChild('dropdownlist') public dropdownlist: DropDownListComponent;

    public opened: boolean = false;

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

    public onOpen(event: PreventableEvent) {
        event.preventDefault(); /* prevent opening */
    }

    public onClose(event: PreventableEvent) {
        event.preventDefault(); /* prevent closing */
    }

    public toggle() {
      this.dropdownlist.toggle();
      this.opened = this.dropdownlist.isOpen;
   }
}

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