All Components

ComboBox Overview

The ComboBox is a form component that lets you choose from a list of options.

It is a richer version of the <select> element and supports data binding, filtering, templates, and the entering of custom values.

Basic Usage

The following example demonstrates the ComboBox in action.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <input id="ac" type="checkbox" [(ngModel)]="allowCustom">
      <label for="ac">Allow custom values</label>
    </div>
    <div class="example-wrapper">
    <p>Favorite sport:</p>
    <kendo-combobox [data]="listItems" [allowCustom]="allowCustom">
    </kendo-combobox>
    </div>
  `
})
class AppComponent {
    public allowCustom: boolean = true;
    public listItems: Array<string> = ["Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball"];
}

Features

The ComboBox 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-combobox [data]="data"
      [filterable]="true"
      (valueChange)="valueChange($event)"
      (selectionChange)="selectionChange($event)"
      (filterChange)="filterChange($event)"
      (open)="open()"
      (close)="close()"
      (focus)="focus()"
      (blur)="blur()"
    >
    </kendo-combobox>
    <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);

Common Scenarios

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

Cascading ComboBoxes

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

The following example demonstrates how to initialize a cascading ComboBox.

@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-combobox
                    [data]="dataCategory"
                    [placeholder]="'Select category...'"
                    [value]="selectedCategory"
                    [textField]="'category'"
                    [valueField]="'categoryId'"
                    (valueChange)="handleCategoryChange($event)"
                >
                </kendo-combobox>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Product:</p>
                <kendo-combobox
                    [disabled]="isDisabledProducts"
                    [placeholder]="'Select product...'"
                    [data]="dataResultProducts"
                    [value]="selectedProduct"
                    [textField]="'productName'"
                    [valueField]="'productId'"
                    (valueChange)="handleProductChange($event)"
                >
                </kendo-combobox>
            </div>
            <div class="col-xs-12 col-sm-4 example-col">
                <p>Order:</p>
                <kendo-combobox
                    [disabled]="isDisabledOrders"
                    [placeholder]="'Select orders...'"
                    [value]="selectedOrder"
                    [data]="dataResultOrders"
                    [textField]="'orderName'"
                    [valueField]="'orderId'"
                    (valueChange)="handleOrderChange($event)"
                >
                </kendo-combobox>
            </div>
        </div>
    </div>
  `
})
export class AppComponent {


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

    public dataCategory: Array<{ category: string, categoryId: number }> = [
        { category: "Beverages", categoryId: 1 },
        { category: "Condiments", categoryId: 2 },
        { category: "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: "Geneve", 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, }>


    handleCategoryChange(value) {

      this.selectedCategory = value;
      this.selectedProduct = undefined;
      this.selectedOrder = undefined;

      if(value == undefined){
        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 == undefined){
        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