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.
- Changing the selectedItem of one DropDown based on another DropDown selected value.
- 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
- Render the Grid control.
MVC
[In View] @(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>)ViewBag.data) .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }) .AllowPaging() .Columns(col => { col.Field("CategoryID").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); col.Field("CategoryName").HeaderText("Name").EditType(EditingType.Dropdown).Width(90).Add(); col.Field("Description").HeaderText("Description").Width(90).EditType(EditingType.Dropdown).Add(); }) .ClientSideEvents(eve => eve.ActionComplete("Complete")) ) [In controller] namespace EJGrid.Controllers { public class HomeController : Controller { public ActionResult Index() { var DataSource = CategoryRepository.GetAllRecords().ToList(); ViewBag.data = DataSource; return View(); } } }
- In the ActionComplete event of the Grid, the function ValChange is bound to the Change event of the ejDropDownList.
<script type="text/javascript"> function Complete(args) { if (args.requestType == "beginedit" || args.requestType == "add") { $("#GridCategoryName").ejDropDownList({ change: "ValChange", enableIncrementalSearch: true });// Binds the change function of the dropdown. $("#GridDescription").ejDropDownList({ change: "ValChange", enableIncrementalSearch: true });// Enables the search operation of the dropdown control. } } </script>
- In the change event of the ejDropDownList control, based on the selected DropDownList element ID, the selectedText of the other DropDownList is refreshed.
<script type="text/javascript"> //Change event of the ejDropdownList. function ValChange(args) { var ob = $(".e-grid").ejGrid("instance");//Gets the grid object, if (this._id == "GridCategoryName") {//when the value of the category field is altered. var text = ej.DataManager(ob.model.dataSource).executeLocal(ej.Query().where("CategoryName", "equal", args.selectedText, false).select("Description"));//Gets the value of the corresponding description filed value for the selected CategoryName from the dataSource. $("#GridDescription").ejDropDownList("setSelectedText", text[0]); //Sets the selectedText value to the description DropDown. } else { var text = ej.DataManager(ob.model.dataSource).executeLocal(ej.Query().where("Description", "equal", args.selectedText, false).select("CategoryName")); $("#GridCategoryName").ejDropDownList("setSelectedText", text[0]); } } </script>
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.
- Render the Grid control.
MVC
[In View] @(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>)ViewBag.data) .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) .ToolbarSettings(toolbar => { toolbar.ShowToolbar().ToolbarItems(items => { items.AddTool(ToolBarItems.Add); items.AddTool(ToolBarItems.Edit); items.AddTool(ToolBarItems.Delete); items.AddTool(ToolBarItems.Update); items.AddTool(ToolBarItems.Cancel); }); }) .AllowPaging() .Columns(col => { col.Field("CategoryID").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); col.Field("CategoryName").HeaderText("Name").EditType(EditingType.Dropdown).Width(90).Add(); col.Field("Description").HeaderText("Description").Width(90).Add(); }) .ClientSideEvents(eve => eve.ActionComplete("Complete")) ) [In controller] namespace EJGrid.Controllers { public class HomeController : Controller { public ActionResult Index() { var DataSource = CategoryRepository.GetAllRecords().ToList(); ViewBag.data = DataSource; return View(); } } }
- In the ActionComplete events of the Grid, the function ValChange is bound to the Change event of the CategoryName field ejDropDownList control.
<script type="text/javascript"> function Complete(args) { if (args.requestType == "beginedit" || args.requestType == "add") { $("#GridCategoryName").ejDropDownList({ change: "ValChange"});// Binds the change function of the DropDown } } </script>
- In the change event of the ejDropDownList control, based on the selected DropDownList value, you can alter the value of another column.
<script type="text/javascript"> //Change event of the ejDropdownList function ValChange(args) { var ob = $(".e-grid").ejGrid("instance");//Gets the grid object var text = ej.DataManager(ob.model.dataSource).executeLocal(ej.Query().where("CategoryName", "equal", args.selectedText, false).select("Description"));//Gets the value of the corresponding Description field value for the selected CategoryName from the dataSource this.element.closest("tr").find("#GridDescription").val(text); //Alters the description field column value } </script>
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