Issue Updating a DropdownEdit Based on Another DropdownEdit in Normal Edit Mode

I am using a Syncfusion Grid in Normal Edit Mode in an Angular application. The grid contains two columns, both using editType: 'dropdownedit'.

My requirement is that when the value of Dropdown A is changed, the available options (or selected value) in Dropdown B should be updated accordingly. However, I am unable to find a way to achieve this in Normal Edit Mode.

Steps to Reproduce:

  1. The grid has two dropdown columns: Dropdown A and Dropdown B.
  2. The user edits a row and changes the value in Dropdown A.
  3. Based on the selection in Dropdown A, Dropdown B should either:
    • Have its selected value updated automatically.
    • Have its data source updated dynamically.
  4. Currently, I am unable to update the value or refresh the dropdown list for Dropdown B when Dropdown A changes.

Expected Behavior:

  • When the user selects a new value in Dropdown A, Dropdown B should update accordingly in the same row.

Question:

How can I dynamically update the value or the data source of Dropdown B when the user changes the selection in Dropdown A in Normal Edit Mode?

Thank you for your support!


1 Reply

RR Rajapandi Ravi Syncfusion Team February 24, 2025 12:27 PM UTC

Hi Giuseppe,


Greetings from Syncfusion support,


We understand that you are using two 'dropdownedit' editType columns having dropdownA and dropdownB and you want to change values in dropdownB based on the changes in dropdownA. You can achieve this by using cascading DropDownList. It allows you to render the cascading DropDownList within the edit form by using the cell edit template feature. We already have documentation regarding this scenario. Please refer to the documentation for more information.


Documentation : https://ej2.syncfusion.com/angular/documentation/grid/editing/edit-types#render-cascading-dropdownlist-component-in-edit-form
 

If you need further assistance, feel free to let us know!


Regards,

Rajapandi R


Loader.
Up arrow icon