ComboBox

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

ComboBox - Cascading ComboBoxes

select

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.

C# VB
Show code in new window Demo isolation steps
<%@ 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>ASP.NET ComboBox Demo - Cascading ComboBoxes</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <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>
Telerik UI for ASP.NET AJAX Q3'14 Release is here