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

[dhanashri kadam]

HTML code -

@(Html.EJ().Grid<CRM.ViewModel.CityVM>("CityGrid")

               

            .Datasource((IEnumerable<object>)CityList)

             .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

.AllowSorting()

         .AllowPaging().PageSettings(p => { p.PageSize(15); })

      //   .ShowColumnChooser()

         .AllowFiltering()

         .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })

         .AllowSearching()

         .AllowSelection()

   .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);

            });

        })

       

        .Columns(col =>

        {

            col.Field("Id").HeaderText("Id").Visible(false).IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();

            col.Field("Country.Name").HeaderText("Country").Width(90).AllowEditing(true).EditType(EditingType.Dropdown).DataSource((List<object>)CountryList).Add();

            col.Field("State.Name").HeaderText("State").Width(90).AllowEditing(true).EditType(EditingType.Dropdown).DataSource((List<object>)ViewBag.States).Add();

            col.Field("Name").HeaderText("Name").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add();

        })

         .ClientSideEvents(eve => { eve.ActionComplete("complete").ActionBegin("citybegin").EndEdit("cityEdit").EndAdd("cityAdd").EndDelete("cityDelete").DataBound("dataBound");; })

      )

Controller Code  for passing list of state according to country Id -

        public JsonResult GetStates(string countryId)

        {

            StateService StateService = new StateService();

            var states = StateService.GetAll().Where(x => x.CountryId == Convert.ToInt32(countryId)).ToList();

            return Json(states, JsonRequestBehavior.AllowGet);

        }

Jquery code-

 function complete(args) {

     

        if (args.requestType == "beginedit" || args.requestType == "add") {

            $("#CityGridCountry_Name").ejDropDownList({ change: "ValChange" });

        }

        }

    

    function ValChange(args) {

 

        var countryId;      

        var col = @(Html.Raw(Json.Encode(ViewBag.Countries)))

               console.log(col)

        for (var i = 0; i < col.length; i++) {

            console.log(args.model.selectedItemIndex)

            console.log(i)

            if (i == args.model.selectedItemIndex) {

                countryId = col[i].Id;

            }

        }

    

        if (countryId != null)

            {

            args.cancel = true;

            $.ajax({

                url: "/City/GetStates",

                type: "POST",

                data: { countryId: countryId },

                success: function (data) {

                   var refreshDataSource = []; //New data source dropdownlist 

            

                    for (i = 0; i < data.length; i++) {                   

                        var state = {

                            "text": data[i].Name,

                            "value": data[i].Name,

                            "Id": data[i].Id

                        };

                        refreshDataSource.push(state);

                    }

                

                    var gridObj = $("#CityGrid").data("ejGrid");

                    console.log(gridObj.model)

                    for (var i = 0; i < gridObj.model.columns.length; i++)

                    {                    

                        if (gridObj.model.columns[i].field == "State.Name")

                        {

                            gridObj.model.columns[i].dataSource = refreshDataSource;     //here I getting list of states according to selected country   but not bind to state column

                            gridObj.columns(gridObj.model.columns[i], "update");                  

                            break;

                        }

                    }

                }

            });

            }       

    }

I getting list of states according to selected country  but not bind to state column .It shows initially loaded list of state.

[Gowthami V]

Hi Dhanashri,

Thanks for using Syncfusion products.

We have already discussed about the topic “How to render cascading dropdown while editing” in the below KB document,

https://www.syncfusion.com/kb/5445/how-to-render-cascading-dropdown-while-editing

Refer to the below KB link for “how to change the selecteditem of one column dropdown based on the selection of another column”.

https://www.syncfusion.com/kb/5444/how-to-change-the-selecteditem-of-one-column-dropdown-based-on-the-selection-of-another-column

Regards,

Gowthami V.