Grid View for ASP.NET MVC - How to implement cascading combo boxes in the grid's edit form

This example demonstrates how to create cascading combo box editors and use them to edit grid data.

Overview

Follow the steps below to implement cascading combo boxes in the grid's edit form:

1. Call a column's MVCxGridViewColumn.EditorProperties method to add a combo box editor to the column.

   settings.Columns.Add(c => c.CountryId, country =>{
   	country.Caption = "Country";
   	country.EditorProperties().ComboBox(cs => cs.Assign(ComboBoxPropertiesProvider.Current.CountryComboBoxProperties));
   });
   settings.Columns.Add(c => c.CityId, city =>{
   	city.Caption = "City";
   	city.EditorProperties().ComboBox(cs => cs.Assign(ComboBoxPropertiesProvider.Current.CityComboBoxProperties));
   });

2. Add a MVCxColumnComboBoxProperties object to specify an editor's settings and call the MVCxColumnComboBoxProperties.BindList method to bind the column to a data source.

   MVCxColumnComboBoxProperties countryComboBoxProperties;
   public MVCxColumnComboBoxProperties CountryComboBoxProperties {
       get {
           if(countryComboBoxProperties == null)
               countryComboBoxProperties = CreateCountryComboBox();
           return countryComboBoxProperties;
       }
   }
   protected MVCxColumnComboBoxProperties CreateCountryComboBox() {
       MVCxColumnComboBoxProperties cs = new MVCxColumnComboBoxProperties();
       cs.CallbackRouteValues = new { Controller = "Home", Action = "ComboBoxCountryPartial" };
       // ...
       cs.ClientSideEvents.SelectedIndexChanged = "CountriesCombo_SelectedIndexChanged";
       cs.BindList(WorldCities.Countries.ToList());
       return cs;
   }

3. Specify the secondary editor's CallbackRouteValue parameters.

4. Handle the primary editor's SelectedIndexChanged event. In the handler, call the secondary editor's PerformCallback method to update the editor's data.

   function CountriesCombo_SelectedIndexChanged(s, e) {
       customCallback = true;
       grid.GetEditor('CityId').PerformCallback();
   }

5. Handle the secondary editor's client-side BeginCallback event and pass the selected value of the secondary editor as a parameter.

   function CitiesCombo_BeginCallback(s, e) {
       e.customArgs['CountryId'] = grid.GetEditor('CountryId').GetValue();
   }

6. Use the grid's GetComboBoxCallbackResult method to get the result of callback processing.

   public ActionResult ComboBoxCountryPartial(){
       return GridViewExtension.GetComboBoxCallbackResult(ComboBoxPropertiesProvider.Current.CountryComboBoxProperties);
   }

7. Call the secondary editor's CallbackRouteValues.Action method to populate the editor with values based on the passed parameter.

Files to Review

• HomeController.cs (VB: HomeController.vb)
• Global.asax (VB: Global.asax)
• Global.asax.cs (VB: Global.asax.vb)
• City.cs (VB: City.vb)
• ComboBoxPropertiesProvider.cs (VB: ComboBoxPropertiesProvider.vb)
• Country.cs (VB: Country.vb)
• Customer.cs (VB: Customer.vb)
• WoldCitiesModel.Context.cs (VB: WoldCitiesModel.Context.vb)
• WoldCitiesModel.cs (VB: WoldCitiesModel.vb)
• GridViewPartial.cshtml
• Index.cshtml

Documentation

• MVC ComboBox Extension - How to implement cascaded combo boxes
• Passing Values to a Controller Action through Callbacks

More Examples

• ComboBox for ASP.NET MVC - How to implement cascading combo boxes

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)