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
