We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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.




1 Reply

GV Gowthami V Syncfusion Team March 3, 2016 05:13 AM UTC

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.

Loader.
Live Chat Icon For mobile
Up arrow icon