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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

123263 Mar 2,2016 05:48 AM UTC Mar 3,2016 05:13 AM UTC ASP.NET MVC 1
loading
Tags: Grid
dhanashri kadam
Asked On March 2, 2016 05:48 AM UTC

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 [Syncfusion]
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;