Grid View for ASP.NET MVC - Implement cascading combo boxes in batch edit mode

This example demonstrates how to create combo box editors and configure the grid's cell edit functionality in batch mode.

Overview

Follow the steps below to implement cascading combo boxes in batch edit mode:

1. Create a combo box column - call the MVCxGridViewColumn.EditorProperties method and add a MVCxColumnComboBoxProperties object.

   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. Handle the grid's client-side BatchEditStartEditing event. In the handler, get the cell value and call the secondary combo box editor's PerformCallback method to update the editor's data.

   function OnBatchEditStartEditing(s, e) {
       curentEditingIndex = e.visibleIndex;
       var currentCountry = grid.batchEditApi.GetCellValue(curentEditingIndex, "CountryId");
       if (currentCountry != lastCountry && e.focusedColumn.fieldName == "CityId" && currentCountry != null) {
           lastCountry = currentCountry;
           grid.GetEditor("CityId").PerformCallback();        
       }
   }

3. Handle the primary editor's client-side SelectedIndexChanged event. In the handler, get the editor's value and send a callback to the server.

   function CountriesCombo_SelectedIndexChanged(s, e) {
       lastCountry = s.GetValue();
       isCustomCascadingCallback = true;
       grid.GetEditor("CityId").PerformCallback();
   }

4. Use the GetComboBoxCallbackResult method to get the result of callback processing.

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

5. Handle the secondary editor's EndCallback event to select an item after the callback.

   function CitiesCombo_EndCallback(s, e) {
       if (isCustomCascadingCallback) {
           if (s.GetItemCount() > 0)
               grid.batchEditApi.SetCellValue(curentEditingIndex, "CityId", s.GetItem(0).value);
           isCustomCascadingCallback = false;
       }
   }

Files to Review

• HomeController.cs (VB: HomeController.vb)
• ComboBoxPropertiesProvider.cs (VB: ComboBoxPropertiesProvider.vb)
• Customer.cs (VB: Customer.vb)
• CascadingComboBoxesBatchEdit.js (VB: CascadingComboBoxesBatchEdit.js)
• GridViewPartial.cshtml
• Index.cshtml

Documentation

• Batch Edit Mode in Grid
• ComboBox

More Examples

• Grid View for ASP.NET Web Forms - Cascading Combo Boxes in Batch Edit Mode

Does this example address your development requirements/objectives?

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