<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AutoCompleteBox.Examples.Templates.DefaultCS" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-containers">
<div class="demo-container">
<h2>Server-side templates</h2>
<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox1" InputType="Token" EmptyMessage="Select Employee"
DataSourceID="SqlDataSource1" Width="320px" DropDownWidth="318px" DataTextField="ContactName"
DropDownHeight="300px" Filter="StartsWith">
<DropDownItemTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 25%">Name:
</td>
<td style="width: 50%">
<%# DataBinder.Eval(Container.DataItem, "ContactName")%>
</td>
</tr>
<tr>
<td>Title:
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "ContactTitle")%>
</td>
</tr>
<tr>
<td>City:
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "City")%>
</td>
</tr>
<tr>
<td>Country:
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "Country")%>
</td>
</tr>
<tr>
<td>Phone:
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "Phone")%>
</td>
</tr>
</table>
</td>
<td align="right" style="width: 25%; padding-left: 10px;">
<telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AlternateText="Contact Photo"
ToolTip="Contact Photo" Width="90px" Height="110px" ResizeMode="Fit" DataValue='<%# DataBinder.Eval(Container.DataItem, "Photo")%>'></telerik:RadBinaryImage>
</td>
</tr>
</table>
</DropDownItemTemplate>
</telerik:RadAutoCompleteBox>
</div>
<div class="demo-container">
<h2>Client-side templates</h2>
<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2" InputType="Token" EmptyMessage="Select Employee"
Filter="StartsWith" Width="320px" DropDownWidth="318px" DropDownHeight="300px">
<WebServiceSettings Path="defaultcs.aspx" Method="GetChildren"></WebServiceSettings>
<ClientDropDownItemTemplate>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 25%">
Name:
</td>
<td style="width: 50%">
#= Text #
</td>
</tr>
<tr>
<td>
Title:
</td>
<td>
#= Attributes.ContactTitle #
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
#= Attributes.City #
</td>
</tr>
<tr>
<td>
Country:
</td>
<td>
#= Attributes.Country #
</td>
</tr>
<tr>
<td>
Phone:
</td>
<td>
#= Attributes.Phone #
</td>
</tr>
</table>
</td>
<td align="right" style="width: 25%; padding-left: 10px;">
<img src="#= Attributes.Photo # " alt=" #= Text # " style="height:80px;width:65px;"/>
</td>
</tr>
</table>
</ClientDropDownItemTemplate>
</telerik:RadAutoCompleteBox>
</div>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [CustomerPhotos]"></asp:SqlDataSource>
</form>
</body>
</html>