ListBox - Related RadListBoxes

Real estate /Worldwide Search
Country City Neighbourhood
  • South Africa South Africa
  • Kenya Kenya
  • Australia Australia
  • New Zealand New Zealand
  • China China
  • India India
  • England England
  • France France
  • Germany Germany
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo demonstrates cascade listboxes. The second listbox is filtered by the selected value of the first listbox. On a click on the second listbox, the third one is filtered based on the selected value of the former.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.RelatedListBoxes.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" href="styles.css" type="text/css"/>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div id="container" class="demo-container">
        <div class="header">
            <div style="left: 20px; top: 15px;">
                <span style="font-size: 30px">Real estate </span><span style="font-size: 18px">/Worldwide
                    Search </span>
            </div>
            <div style="top: 65px">
                <span style="font-size: 16px; left: 43px">Country </span><span style="font-size: 16px;
                    left: 258px">City </span><span style="font-size: 16px; left: 505px">Neighbourhood
                </span>
            </div>
        </div>
        <div>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" CssClass="example-panel"
                EnableAJAX="true">
                <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" CssClass="RadListBox1" runat="server" Width="256px" Height="320" Skin="Black"
                    AutoPostBack="true" DataSourceID="DataSourceCountries" DataKeyField="ID" DataValueField="ID"
                    DataTextField="Name">
                    <ItemTemplate>
                        <img class="img-countries" alt='<%# Container.Text %>' src='<%# String.Format("Images/Countries/{0}.png", Container.Text) %>' />
                        <span class="countryName">
                            <%# Container.Text %>
                        </span>
                    </ItemTemplate>
                </telerik:RadListBox>
                <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox2" CssClass="RadListBox2" Width="270px" Height="320px"
                    Skin="Black" AutoPostBack="true" DataSourceID="DataSourceCities" DataKeyField="ID"
                    DataValueField="ID" DataTextField="Name" Visible="false">
                    <ItemTemplate>
                        <span class="cities">
                            <img class="img-cities" alt='<%# Container.Text %>' src='<%# String.Format("Images/Cities/{0}.jpg", Container.Text) %>' />
                            <span class="cityName">
                                <%# Container.Text %>
                            </span></span>
                    </ItemTemplate>
                </telerik:RadListBox>
                <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox3" CssClass="RadListBox3" Width="256px" Height="320px"
                    Skin="Black" Visible="false">
                </telerik:RadListBox>
            </telerik:RadAjaxPanel>
        </div>
    </div>
    <asp:SqlDataSource runat="server" ID="DataSourceCountries" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [Name], [ID] FROM [Countries] WHERE ([ID] &lt; @ID)">
        <SelectParameters>
            <asp:Parameter DefaultValue="12" Name="ID" Type="Int32"></asp:Parameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource runat="server" ID="DataSourceCities" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [ID], [Name] FROM [Cities] WHERE ([CountryID] = @ID)">
        <SelectParameters>
            <asp:ControlParameter ControlID="RadListBox1" Name="ID" PropertyName="SelectedValue"
                Type="Int32"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?