DropDownList - Related DropDownLists

Select Vehicle Type...
Select Vehicle Brand...
Select Vehicle Model...
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This demo presents how to create related RadDropDownList controls. The Data in the Model RadDropDownList depends on the previous selection in the Type and Brand DropDownLists

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DropDownList.Examples.ApplicationScenarios.CascadingDropDownLists.DefaultCS" %>

<!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" />

    <div class="demo-container no-bg">
        <telerik:RadAjaxPanel ID="RadAjaxPanel" runat="server">
            <table>
                <tbody class="order">
                    <tr>
                        <td>
                            <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="DropDownVehicleType" 
                                Skin="Silk" TabIndex="1" Width="200" DropDownWidth="200" DefaultMessage="Select Vehicle Type..."
                                AutoPostBack="true" OnSelectedIndexChanged="DropDownVehicleType_SelectedIndexChanged"
                                DataSourceID="SqlDataSource1" DataTextField="TypeName" DataValueField="ID">
                            </telerik:RadDropDownList>
                        </td>
                        <td>
                            <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="DropDownVehicleBrand" 
                                Skin="Silk" TabIndex="1" Width="200" DropDownWidth="200"
                                DefaultMessage="Select Vehicle Brand..." AutoPostBack="true" OnSelectedIndexChanged="DropDownVehicleBrand_SelectedIndexChanged"
                                DataSourceID="SqlDataSource2" DataTextField="VehicleName" DataValueField="ID">
                            </telerik:RadDropDownList>
                        </td>
                        <td>
                            <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="DropDownVehicleModel" 
                                Skin="Silk" TabIndex="1" Width="200" DropDownWidth="200" DefaultMessage="Select Vehicle Model..."
                                DataSourceID="SqlDataSource3" DataTextField="VehicleName">
                            </telerik:RadDropDownList>
                        </td>
                        <td class="buttons">
                            <telerik:RadButton RenderMode="Lightweight" ID="btnGetData" Skin="Silk" 
                                Text="Select Vehicle" OnClick="btnGetData_Click" runat="server" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <asp:PlaceHolder runat="server" ID="OrderTable" Visible="false">
                <table class="order-summary">
                    <tbody>
                        <tr>
                            <th>Vehicle Type:
                            </th>
                            <td>
                                <asp:Label ID="labelVehicleType" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <th>Vehicle Brand:
                            </th>
                            <td>
                                <asp:Label ID="labelVehicleBrand" runat="server" />
                            </td>
                        </tr>
                        <tr class="price-row">
                            <th>Model:
                            </th>
                            <td>
                                <asp:Label ID="labelModel" runat="server" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </asp:PlaceHolder>
        </telerik:RadAjaxPanel>
    </div>

    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT * FROM [Vehicles] WHERE [VehicleParentID] IS NULL"></asp:SqlDataSource>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT * FROM [Vehicle_Types]"></asp:SqlDataSource>

    <asp:SqlDataSource ID="SqlDataSource3" runat="server"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT * FROM [Vehicles] WHERE [VehicleParentID] = @VehicleID AND [VehicleTypeID] = @VehicleTypeID">
        <SelectParameters>
            <asp:ControlParameter ControlID="DropDownVehicleBrand" PropertyName="SelectedValue" Name="VehicleID" />
            <asp:ControlParameter ControlID="DropDownVehicleType" PropertyName="SelectedValue" Name="VehicleTypeID" />
        </SelectParameters>
    </asp:SqlDataSource>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?