Implementing Cascading DropDownLists in Editable Grids

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

How can I implement cascading drop-downs in an editable Grid?

Solution

To implement cascading DropDownLists when using the inline editing approach in the Grid, follow the steps:

1. Use EditTemplateDirective to implement editable DropDownList controls. For more details, check the article on custom editing and validation controls.

2. Handle the valueChange event of the DropDownList.

   html

   <ng-template kendoGridEditTemplate>
       <kendo-dropdownlist ...
           (valueChange)="onCategoryChange($event)"
       ></kendo-dropdownlist>
   </ng-template>

3. In the valueChange event handler, update the collection of the desired DropDownList control.

   ts

   public onCategoryChange(categoryId: number): void {
      this.names = categoryId ? this.gridData
       .filter((item) => item.CategoryID === categoryId)
       .map(item => item.ProductName) : this.gridData.map((item) => item.ProductName);
   }

The example below demonstrates the cascading functionality in action. If you edit a row and select a category from the DropDownList, the respective names will be loaded in the Name column of the DropDownList control.

Change Theme

Theme

Loading ...