<%@ Page Inherits="Telerik.QuickStart.QsfPage" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<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 size-narrow">
<label for="RadSearchBox1"></label>
<telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server" Width="500"
DataSourceID="SqlDataSource1"
EmptyMessage="Search for athlete"
MaxResultCount="20"
DataTextField="Name">
<DropDownSettings Height="400">
<HeaderTemplate>
<ul>
<li class="col1">Name</li>
<li class="col2">Country</li>
<li class="col3">Sport</li>
</ul>
</HeaderTemplate>
<ItemTemplate>
<ul>
<li class="col1">
<%# DataBinder.Eval(Container.DataItem, "Name") %></li>
<li class="col2">
<%# DataBinder.Eval(Container.DataItem, "Country") %></li>
<li class="col3">
<%# DataBinder.Eval(Container.DataItem, "Sport") %></li>
</ul>
</ItemTemplate>
</DropDownSettings>
</telerik:RadSearchBox>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT TOP 20 athletes.fullName AS Name, countries.name AS Country, sports.name AS Sport
FROM [athletes] as athletes
JOIN [countries] as countries
ON athletes.country = countries.id
JOIN [sports] as sports
ON athletes.sport = sports.id"></asp:SqlDataSource>
</form>
</body>
</html>