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

This example demonstrates how to implement cascading combo box editors in ASPxGridView.

Setup the Grid and its Column Editors

Create an ASPxGridView control, set the grid's edit mode to Batch, and add two columns of the GridViewDataComboBoxColumn type. Add a ASPxHiddenField control to the markup.

<dx:ASPxHiddenField runat="server" ID="hf" ClientInstanceName="hf"></dx:ASPxHiddenField>
<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" KeyFieldName="CustomerId">
    <Columns>
        <%--...--%>
        <dx:GridViewDataComboBoxColumn Caption="Country" FieldName="CountryId">
            <PropertiesComboBox EnableCallbackMode="true" ValueField="CountryId" TextField="CountryName" ValueType="System.Int32">
                <%--...--%>
            </PropertiesComboBox>
        </dx:GridViewDataComboBoxColumn>
        <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityId">
            <PropertiesComboBox EnableCallbackMode="true" CallbackPageSize="20" ValueType="System.Int32" TextField="CityName" ValueField="CityId" ... />
        </dx:GridViewDataComboBoxColumn>
    </Columns>
    <%--...--%>
    <SettingsEditing Mode="Batch" />
</dx:ASPxGridView>

Manually Update the Secondary Combo Box Items

Handle the grid's client-side BatchEditStartEditing event. In the event handler, get the cell value (the batchEditApi.GetCellValue method) and call the ASPxHiddenField control's method to save this value. Call the secondary editor's PerformCallback method to update its data.

<dx:ASPxGridView ID="grid" runat="server"...>
    <%--...--%>
    <ClientSideEvents BatchEditStartEditing="OnBatchEditStartEditing" />
</dx:ASPxGridView>

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

Respond to a Selection Change

Handle the primary editor's client-side SelectedIndexChanged event. In this event handler, get the editor value (the GetValue method) and save it to the ASPxHiddenField control's collection. Call the secondary editor's PerformCallback method to send a callback to the server.

<dx:ASPxGridView ID="grid" runat="server"...>
    <Columns>
        <%--...--%>
        <dx:GridViewDataComboBoxColumn Caption="Country" FieldName="CountryId">
            <PropertiesComboBox ValueField="CountryId" TextField="CountryName" ValueType="System.Int32">
                <ClientSideEvents SelectedIndexChanged="CountriesCombo_SelectedIndexChanged" />
            </PropertiesComboBox>
        </dx:GridViewDataComboBoxColumn>
        <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityId" />
    </Columns>
    <%--...--%>
</dx:ASPxGridView>

var isCustomCascadingCallback = false;
function CountriesCombo_SelectedIndexChanged(s, e) {
    lastCountry = s.GetValue();
    isCustomCascadingCallback = true;
    RefreshData(lastCountry);
}

Filter the Secondary Combo Box Values on the Server Side

In the CellEditorInitialize event handler, access the editors and add a handler to the secondary editor's EndCallback event. In the ItemsRequestedByFilterCondition event handler, filter the secondary editor's data source based on the value from the ASPxHiddenField control's collection and bind the filtered values to the editor.

<dx:ASPxGridView ID="grid" runat="server" OnCellEditorInitialize="grid_CellEditorInitialize" ...>
    <Columns>
        <%--...--%>
        <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityId">
            <PropertiesComboBox OnItemsRequestedByFilterCondition="OnItemsRequestedByFilterCondition" ValueType="System.Int32" TextField="CityName" ValueField="CityId">
    </Columns>
    <%--...--%>
</dx:ASPxGridView>

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

protected void grid_CellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e) {
    if(e.Column.FieldName == "CountryId")
        e.Editor.ClientInstanceName = "CountryEditor";
    if (e.Column.FieldName != "CityId")
        return;
    var editor = (ASPxComboBox)e.Editor;
    editor.ClientInstanceName = "CityEditor";
    editor.ClientSideEvents.EndCallback = "CitiesCombo_EndCallback";
}

protected void OnItemsRequestedByFilterCondition(object source, ListEditItemsRequestedByFilterConditionEventArgs e) {
    ASPxComboBox editor = source as ASPxComboBox;
    IQueryable<City> query;
    var take = e.EndIndex - e.BeginIndex + 1;
    var skip = e.BeginIndex;
    int countryValue = GetCurrentCountry();
    if (countryValue > -1)
        query = entity.Cities.Where(city => city.CityName.Contains(e.Filter) && city.Country.CountryId == countryValue).OrderBy(city => city.CityId);
    else
        query = Enumerable.Empty<City>().AsQueryable();
    query = query.Skip(skip).Take(take);
    editor.DataSource = query.ToList();
    editor.DataBind();
}

Documentation

• ASPxGridView
• GridViewDataComboBoxColumn
• ASPxHiddenField
• BatchEditStartEditing
• SelectedIndexChanged
• PerformCallback
• EndCallback
• CellEditorInitialize

Files to Look At

• BatchEditScript.js (VB: BatchEditScript.js)
• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

More Examples

• Cascading Editors (Batch Editing) Demo
• GridView for ASP.NET MVC- A simple implementation of cascading comboboxes in Batch Edit mode
• Grid View for ASP.NET Web Forms - Cascading Combo Boxes

Does this example address your development requirements/objectives?

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