All Components

Data Binding

The DropDownList enables you to bind to a list of possible values.

The list can consist of primitive (strings and numbers) or complex (objects) items.

Bind to Local Data

When binding it to local data, the DropDownList provides options for:

Bind to Arrays of Primitive Data

The following example demonstrates how to bind the DropDownList to an array of primitive data.

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

Bind to Arrays of Complex Data

When the component is bound to complex data (objects), define the textField and valueField properties. The DropDownList will extract the value and text values from the selected data item and in this way will set the selected value and text.

The following example demonstrates how to bind the DropDownList to an array of complex data.

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

Bind to Remote Data

When binding it to remote data, the DropDownList provides options for:

Use Services

The following example demonstrates how to bind the DropDownList to remote data by using a service.

import { Component, OnInit, Inject } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';

import { DataService } from './data.service';
import { Product } from '../common/product.model'

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="listItems"
      [textField]="'ProductName'"
      [valueField]="'ProductId'"
      [defaultItem]="placeHolder" >
    </kendo-dropdownlist>
  `,
  providers: [DataService]
})

export class AppComponent {

    public listItems: Array<Product> = [];
    public placeHolder: Product = { ProductName: "Select product...", ProductId: null };


    constructor (@Inject(DataService) private dataService: DataService) { }

    ngOnInit() {
      this.dataService.fetchData().subscribe(
      (data) => this.listItems = data
      )
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, JsonpModule } from '@angular/http';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent }   from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { AppModule } from './ng.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
export class Product {
    constructor(
        public ProductID?: number,
        public ProductName?: string,
        public UnitPrice?: number,
        public UnitsInStock?: number,
        public Discontinued?: boolean
    ) { }
}
import { Injectable, Inject } from '@angular/core';
import { Jsonp, JsonpModule } from '@angular/http';
import { Product } from './product.model';
import { Observable } from 'rxjs/Rx';

@Injectable()

export class DataService {


  constructor(@Inject(Jsonp) private jsonp: Jsonp) { }

  fetchData(action: string = "", data?: Product): Observable<Product[]>{
    return this.jsonp.get(`http://demos.telerik.com/kendo-ui/service/Products/${action}?callback=JSONP_CALLBACK${this.serializeModels(data)}`).map(response => response.json())
  }

  private serializeModels(data?: Product): string {
    return data ? `&models=${JSON.stringify([data])}` : '';
  }

}

Use the Async Pipe

The following example demonstrates how to bind the DropDownList to an asynchronous source.

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { CategoriesService } from './categories.service';

@Component({
  providers: [CategoriesService],
  selector: 'my-app',
  template: `
      <kendo-dropdownlist
          [data]="view | async"
          [textField]="'CategoryName'"
          [valueField]="'CategoryID'"
        >
      </kendo-dropdownlist>
  `
})
export class AppComponent {
    constructor(private service: CategoriesService) {
        this.view = service;

        this.service.query();
    }

    private view: Observable<any>;
}
import { Injectable } from '@angular/core';
import { Http, HttpModule } from '@angular/http';

import { BehaviorSubject } from 'rxjs/Rx';

@Injectable()
export class CategoriesService extends BehaviorSubject<any> {
    constructor(private http: Http) {
        super(null);
    }

    public query(): void {
        this.fetch(this.tableName)
            .subscribe(x => super.next(x));
    }

    private BASE_URL: string = 'http://services.odata.org/V4/Northwind/Northwind.svc/';
    private tableName: string = "Categories";

    private fetch(tableName: string): any {
        const queryStr = `$skip=0&$count=true`;
        return this.http
            .get(`${this.BASE_URL}${tableName}?${queryStr}`)
            .map(response => response.json().value);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, JsonpModule } from '@angular/http';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent }   from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }
import { AppModule } from './ng.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

Stream Data by Using the Async Pipe

The DropDownList provides an option to bind it to asynchronous data (observables) by using the async pipe.

The following example demonstrates how to apply this behavior. It starts with an empty observable, produces one random value each second, and emits values in batches of five.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/bufferCount';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <p>The selected value will disappear when the new data is set.</p>
      <p>New data will be available every 5 seconds (initially the DropDownList will be empty).</p>
    </div>
    <kendo-dropdownlist [data]="listItems | async"></kendo-dropdownlist>
  `
})
export class AppComponent {
  public listItems: Observable<string[]>;

  constructor() {
    this.listItems = Observable.interval(1000).map((x) =>  "New item " + x).bufferCount(5);
  }
}
In this article