<%@ 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>
<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] < @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>