New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Cascading ComboBoxes

This demo demonstrates how to create related RadComboBox controls.
When you change the selection in the first RadComboBox - an asynchronous call is made through the RadAjaxManager instance on the page that has been configured to refresh the related combos. For example Country RadComboBox will be populate country names that correspond to the current Continent RadComboBox selection and so on.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.MultipleComboBoxes.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-container no-bg">
<telerik:RadFormDecorator RenderMode="Lightweight" ID="FormDecorator1" runat="server" Skin="Metro" />
    <div class="qsf-demo-canvas">
        <div class="continents">
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Width="186px"
                AutoPostBack="true" EmptyMessage="- Select a Continent -" 
                OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged"
                Skin="Metro">
            </telerik:RadComboBox>
        </div>
        <div class="countries">
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox2" runat="server" Width="186px"
                AutoPostBack="true" EmptyMessage="- Select a Country -" 
                OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged"
                Skin="Metro">
            </telerik:RadComboBox>
        </div>
        <div class="cities">
            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox3" runat="server" Width="186px" Skin="Metro"
                EmptyMessage="- Select a City -" >
            </telerik:RadComboBox>
        </div>
        <p class="buttons">
            <asp:Button ID="Button1" runat="server" Text="Explore" OnClick="Button1_Click" />
        </p>
        <div class="result">
            <asp:Label runat="server" ID="Literal1" />
        </div>
    </div>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadComboBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox2" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox3" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadComboBox2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox3" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
            </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance