ComboBox - Cascading ComboBoxes

select

Isolate this demo as a stand-alone application

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.

<%@ 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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" Skin="Metro" />
    <div class="qsf-demo-canvas">
        <div class="continents">
            <telerik:RadComboBox 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 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 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" />
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?