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

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-combobox
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            (selectionChange)="handleSelection($event)"
        >
        </kendo-combobox>
    </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 opened, either blur the component or press ENTER.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-combobox
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            (valueChange)="handleValue($event)"
        >
        </kendo-combobox>
    </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, ComboBoxComponent } 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 ComboBox</span>
            <span *ngIf="!opened">Open ComboBox</span>
        </button>
    </div>
    <div class="row">
        <div class="col-xs-12 example-col">
          <p>ComboBox with prevented open and close.</p>
          <kendo-combobox
              #combobox
              [data]="listItems"
              [textField]="'text'"
              [valueField]="'value'"
              (open)="onOpen($event)"
              (close)="onClose($event)"
          >
          </kendo-combobox>
        </div>
    </div>
  `
})

class AppComponent {
    @ViewChild('combobox') public combobox: ComboBoxComponent;

    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.combobox.toggle();
      this.opened = this.combobox.isOpen;
    }
}

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