With interconnected combo boxes, user input for a combo box determines the values for subsequent combo boxes. For example, if a user needs to define an address in a form, the first combo box requires the user to select a country. The next combo box requires the user to select a city. If you interconnect the combo boxes, the country that the user selects determines the city combo box values.

Prerequisites

Make sure you create at least two combo boxes in a form.

Procedure 

1. For the first combo box, from the Properties panel, select the AutoPostBack check box.
2. Create a function to clear the second combo box.
3. Call this function on the OnClientSelectedIndexChanging and OnClientKeyPressing events for the first combo box.
4. For the second combo box, from the Properties panel, select the EnableAutomaticLoadOnDemand check box.
5. Add where logic to filter the second combo box's data source control based on the first combo box selection.
   • For table-based combo boxes, add a "where" expression in the DataSource, and a WhereParameters section.
   • For service-based combo boxes, add only a WhereParameters section. Define the service ds parameter value as :@[parameter name in WhereParameter] and the Mask = "ln".

<script type="text/javascript">
function ClearCities(sender, eventArgs)
{
var clientId = $sq("[id$='_CitiesComboBox']") [0].id;
var citiesCombo = $find(clientId);
citiesCombo.get_items().clear();
citiesCombo.set_text("");
}
</script>
<asp:UpdatePanel runat="server"><ContentTemplate>


<sq:ComboBox runat="server"
ID="CountriesComboBox"
DataTextField="Name"
DataValueField="fldID"
AutoPostBack="True"
DataSourceID="CountriesDataSource"
OnClientSelectedIndexChanging="ClearCities"
OnClientKeyPressing="ClearCities"
</sq:ComboBox>


<sq:ComboBox runat="server"
ID="CitiesComboBox"
DataTextField="Name"
DataValueField="fldID"
EnableAutomaticLoadOnDemand="True"
DataSourceID="CitiesDataSource"
</sq:ComboBox>


<sq:DataSource runat="server"
ID="CountriesDataSource" QueryName="Countries">
</sq:DataSource>
<sq:DataSource runat="server" ID="CitiesDataSource"
QueryName="Cities"
where="Convert.ToInt32 (it[&quot;CountryId&quot;])=Convert.ToInt32 (@CountryId)">
<WhereParameters>
<asp:ControlParameter ControlId="CountriesComboBox" Name="CountryId" />
</WhereParameters>
</sq:DataSource>
</ContentTemplate>
</asp:UpdatePanel>