Components / Dropdowns / DropDownList

Getting Started with Kendo UI for Angular DropDownList

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"];
}

Functionality and Features

Events

The DropDownList provides events which:

Common Usage

The following example demonstrates basic DropDownList events.

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} ${arg || ''}`);
    }
}

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 './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

Looping through Items

By default, you can 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, based on the alphabetical order of the items, the keypress selects the first item which starts with a B.

The keyboard selection is available only if the filtering functionality is disabled.

In this article