Combo Box for ASP.NET Web Forms - How to Implement Cascading Combo Boxes

This demo shows how to use two ASPxComboBox editors to implement cascading combo boxes. In the demo, the selection in the first combo box (Country) filters the item list of the second combo box (City).

Use the following technique to setup a cascade of ASPxComboBox editors:
Respond to a selection change of the first combo box (in its client SelectedIndexChanged event) and initiate a callback request for the second combo box to filter data source items on the server (use a combination of the client PerformCallback method and server Callback event).

Setup Combo Boxes and Their Data Sources

Create two ASPxComboBox editors and define their data sources (SqlDataSource instances in this sample). Implement a select parameter for the second combo box's data source to dynamically filter its items based on the first combo box's selected value.

<dx:ASPxComboBox runat="server" ID="CountryCombo" ClientInstanceName="countryCombo" DataSourceID="CountryDataSource"...>
<dx:ASPxComboBox runat="server" ID="CityCombo" ClientInstanceName="cityCombo" DataSourceID="CityDataSource" OnCallback="CityCombo_Callback"...>

<asp:SqlDataSource ID="CountryDataSource" runat="server" ...
    SelectCommand="SELECT * FROM [Countries]"/>

<asp:SqlDataSource ID="CityDataSource" runat="server" ...
    SelectCommand="
        SELECT ct.City 
        FROM [Cities] ct, [Countries] cntr 
        WHERE (ct.CountryId = cntr.CountryId) AND (cntr.Country = @CountryName) 
            order by ct.City">
    <SelectParameters>
        <asp:Parameter Name="CountryName" />
    </SelectParameters>/>

On Client: Respond to a Selection Change and Initiate a Callback

Handle the first combo box's client-side SelectedIndexChanged event. In the event handler, call the client-side PerformCallback method of the second combo box. This sends a callback to the server for the second editor to filter its item list. In the PerformCallback method's parameter, pass the first combo box's selected value to use it as a filter criterion on the server.

<script>
    function OnCountryChanged(selectedValue) {
        cityCombo.PerformCallback(selectedValue);
    }
</script>
    ...
<dx:ASPxComboBox runat="server" ID="CountryCombo" ClientInstanceName="countryCombo" ...>
    <ClientSideEvents SelectedIndexChanged="function(s,e){OnCountryChanged(s.GetSelectedItem().value.toString());}"/>
    ...

On Server: Filter Data Source Items

Handle the second combo box's server-side Callback event that fires in response to a call to the client-side PerformCallback method. In the handler, use the event argument's Parameter property to obtain the first combo box's selected value passed from the client side. Use this value to filter the second combo box's data source.

protected void CityCombo_Callback(object source, DevExpress.Web.CallbackEventArgsBase e) {
    FillCityCombo(e.Parameter);
}
protected void FillCityCombo(string country) {
    if (string.IsNullOrEmpty(country)) return;

    //Update the data source bound to the second combo box.
    CityDataSource.SelectParameters["CountryName"].DefaultValue = country;
    CityCombo.DataBind();

    //Select the first city in a list.
    CityCombo.SelectedIndex = 0;
}

Files to Look At

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

Documentation

• ASPxComboBox
• Callbacks
• PerformCallback

More Examples

• 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)