Articles in this section
Category / Section

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

2 mins read

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

[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();
        }
    }
}
  1. 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>
  1. 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.

  1. 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();
        }
    }
}
  1. 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>
  1. 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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied