# Implementing Cascading DropDownLists in Editable Grids

## Environment

<table>
	<tr>
		<td>Product</td>
		<td>Progress® Kendo UI® for Angular Grid</td>
	</tr>
</table>

## 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](https://www.telerik.com/kendo-angular-ui/components/grid/editing/inline-editing), follow the steps:

1. Use [`EditTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/edittemplatedirective) to implement editable DropDownList controls. For more details, check the article on [custom editors](https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-editors).

2. Handle the [`valueChange`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdownlistcomponent#events)  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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/cascading-ddls/source.txt)