<%@ Page Inherits="Telerik.QuickStart.QsfPage" %>
<%@ 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 href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</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:RadODataDataSource runat="server" ID="RadODataDataSource1">
<Transport>
<Read Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/" DataType="JSONP"></Read>
</Transport>
<Schema>
<telerik:DataModel ModelID="Employee" Set="Employees">
<telerik:DataModelField FieldName="City" />
<telerik:DataModelField FieldName="Address" />
<telerik:DataModelField FieldName="LastName" />
<telerik:DataModelField FieldName="FirstName" />
<telerik:DataModelField FieldName="HomePhone" />
<telerik:DataModelField FieldName="City" />
<telerik:DataModelField FieldName="TitleOfCourtesy" />
<telerik:DataModelField FieldName="BirthDate" />
<telerik:DataModelField FieldName="PostalCode" />
<telerik:DataModelField FieldName="Country" />
</telerik:DataModel>
</Schema>
</telerik:RadODataDataSource>
<div class="searchBoxContainer">
<telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1" Width="350" Skin="Silk"
DataTextField="FirstName" OnClientSearch="OnClientSearch"
ODataDataSourceID="RadODataDataSource1" DataKeyNames="Address,Phone,TitleOfCourtesy,BirthDate,PostalCode,Country" DataModelID="Employee">
<DropDownSettings Height="400px">
<ClientTemplate>
<h3>#= Text # #= DataItem.LastName #</h3>
<div class="details">
<img src="icon_list.png" alt="Alternate Text" style="float:left; height:36px; width:36px;" />
<span class="info">
<p>
<b>Address:</b> #= DataItem.Address #<br>
<b>Contact Phone:</b> #= DataItem.HomePhone #
</p>
</span>
</div>
</ClientTemplate>
</DropDownSettings>
</telerik:RadSearchBox>
</div>
<div class="dinnerDetails">
<h3></h3>
<p>
Welcomes you to dinner on <span class="date"></span>!
</p>
<p>
Please RSVP by calling
<br />
<span class="phone"></span>
</p>
<p>
We will be expecting you at
<br />
<span class="address"></span>.
</p>
</div>
</div>
</form>
</body>
</html>