Grid View for ASP.NET Web Forms - Cascading Combo Boxes

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

Setup the Grid and its Column Editors

Create an ASPxGridView control, assign its data source, and set the grid's edit mode to Inline. Add two columns of the GridViewDataComboBoxColumn type and specify their data sources.

<dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="false" DataSourceID="Customers"
    KeyFieldName="CustomerID" ClientInstanceName="grid">
    <Columns>
        <%--...--%>
        <dx:GridViewDataComboBoxColumn Caption="Country" FieldName="CountryID">
            <PropertiesComboBox DataSourceID="Countries" ValueField="CountryID" ValueType="System.Int32"
                <%--...--%>
            </PropertiesComboBox>
        </dx:GridViewDataComboBoxColumn>
        <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityID">
            <PropertiesComboBox DataSourceID="AllCities" ValueField="CityID" ValueType="System.Int32"
                <%--...--%>
            </PropertiesComboBox>
        </dx:GridViewDataComboBoxColumn>
    </Columns>
    <SettingsEditing Mode="Inline" />
</dx:ASPxGridView>
<asp:ObjectDataSource ID="Customers" runat="server" ... />
<asp:ObjectDataSource ID="Countries" runat="server" ... />
<asp:ObjectDataSource ID="AllCities" runat="server" ... />

Respond to a Selection Change on the Client Side

Handle the primary editor's client-side SelectedIndexChanged event. In this event handler, get the editor value (the GetValue method) and pass it as a parameter in the PerformCallback method of the secondary editor. To access the secondary editor, call the GetEditor method.

<dx:ASPxGridView ID="Grid" runat="server" ... >
    <Columns>
        <%--...--%>
        <dx:GridViewDataComboBoxColumn Caption="Country" FieldName="CountryID" ...>
            <PropertiesComboBox DataSourceID="Countries" ValueField="CountryID" ...>
                <ClientSideEvents SelectedIndexChanged="CountriesCombo_SelectedIndexChanged" />
            </PropertiesComboBox>
        </dx:GridViewDataComboBoxColumn>
        <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityID" ... />
    </Columns>
</dx.ASPxGridView>

function CountriesCombo_SelectedIndexChanged(s, e) {
    grid.GetEditor("CityID").PerformCallback(s.GetValue());
}

Filter the Secondary Combo Box Values on the Server Side

In the CellEditorInitialize event handler, access the secondary editor and add a handler to its Callback event. In the handler, use the Parameter argument property to obtain the primary editor's value from the client side. Filter the secondary editor's data source based on this value and bind the filtered values to the editor.

protected void Grid_CellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e) {
    if(e.Column.FieldName == "CityID") {
        var combo = (ASPxComboBox)e.Editor;
        combo.Callback += new CallbackEventHandlerBase(combo_Callback);

        var grid = e.Column.Grid;
        if (!combo.IsCallback) {
            var countryID = -1;
            if (!grid.IsNewRowEditing)
                countryID = (int)grid.GetRowValues(e.VisibleIndex, "CountryID");
            FillCitiesComboBox(combo, countryID);
        }
    }
}

private void combo_Callback(object sender, CallbackEventArgsBase e) {
    var countryID = -1;
    Int32.TryParse(e.Parameter, out countryID);
    FillCitiesComboBox(sender as ASPxComboBox, countryID);
}

protected void FillCitiesComboBox(ASPxComboBox combo, int countryID) {
    combo.DataSourceID = "Cities";
    Cities.SelectParameters["CountryID"].DefaultValue = countryID.ToString();
    combo.DataBindItems();

    combo.Items.Insert(0, new ListEditItem("", null)); // Null Item
}

Documentation

• ASPxGridView
• SelectedIndexChanged
• GridViewDataComboBoxColumn
• PerformCallback
• Callback
• CellEditorInitialize

Files to Look At

• DataProvider.cs (VB: DataProvider.vb)
• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

More Examples

• Cascading Editors Demo
• ASPxGridView - How to implement cascading comboboxes in Batch Edit mode
• MVC ComboBox Extension - Cascading Combo Boxes

Does this example address your development requirements/objectives?

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