Cascading ComboBoxes
The cascading ComboBox is a series of two or more ComboBoxes where each ComboBox is filtered based on the selected option in the previous ComboBox.
The following example demonstrates how to render cascading ComboBoxes.
@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;
}
}