Skip to content

Create combo box editors and configure the grid's cell edit functionality in batch mode.

License

Notifications You must be signed in to change notification settings

DevExpress-Examples/asp-net-mvc-grid-cascading-combo-boxes-in-batch-edit-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Cascading Editors

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

Documentation

More Examples

Does this example address your development requirements/objectives?

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