How to change the selectedItem of one column dropdown based on the selection of another column dropdown value?

In certain cases, while editing you may want to change a column value based on the value selected in the ejDropdownlist control of another column.

Solution

On editing a record in the Grid, you can change the value of one column based on another columns’ value.

1. Changing the selectedItem of one DropDown based on another DropDown selected value.
2. Changing the value of a column based on the value selected in a DropDownList.

Changing the selectedItem of one DropDown based on another DropDown selected value

1. Render the Grid control.

MVC

2. In the ActionComplete event of the Grid, the function ValChange is bound to the Change event of the ejDropDownList.

3. In the change event of the ejDropDownList control, based on the selected DropDownList element ID, the selectedText of the other DropDownList is refreshed.

Figure 1: Initial rendering – Grid

Figure 2: On editing a record in Grid

Figure 3: SelectedItem in Description field corresponding to Sea Food name

Figure 4: On changing the value of the Name DropDown, the value of the Description field is changed and selectedItem is refreshed

Changing the value of a column based on the value selected in the DropDownList

Similarly on editing a Grid record, you can just change a column value based on another column DropDownList selected value. You can see in detail how to achieve this requirement.

1. Render the Grid control.

MVC

2. In the ActionComplete events of the Grid, the function ValChange is bound to the Change event of the CategoryName field ejDropDownList control.

3. In the change event of the ejDropDownList control, based on the selected DropDownList value, you can alter the value of another column.

Figure 5: Initial rendering – Grid

Figure 6: On editing a record in Grid

Figure 7: On changing the value of the Name DropDown, the value of the Description field column is changed