<%@ Page 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" 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>
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
<script type="text/javascript">
var listView,
fieldsCombo,
searchBox,
searchButton,
imageUrlFormat = "http://demos.telerik.com/aspnet-ajax/img/northwind/customers/thumbs/{0}.jpg";
function pageLoad() {
fieldsCombo = $find('<%= FieldsCombo.ClientID %>');
searchBox = $find('<%= SearchBox.ClientID %>');
listView = $find('<%= RadListView1.ClientID %>');
searchButton = $find('<%= SearchButton.ClientID %>');
}
</script>
</telerik:RadCodeBlock>
<script type="text/javascript" src="scripts.js"></script>
<div class="demo-container">
<div id="navigation">
<span class="column">Search in
<br />
<telerik:RadComboBox RenderMode="Lightweight" ID="FieldsCombo" runat="server" Skin="Silk">
<Items>
<telerik:RadComboBoxItem Text="Contact Name" Value="ContactName"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Company Name" Value="CompanyName"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Contact Title" Value="ContactTitle"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Address" Value="Address"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="City" Value="City"></telerik:RadComboBoxItem>
<telerik:RadComboBoxItem Text="Country" Value="Country"></telerik:RadComboBoxItem>
</Items>
</telerik:RadComboBox>
</span>
<span class="column">for value <br />
<telerik:RadTextBox RenderMode="Lightweight" ID="SearchBox" runat="server" Skin="Silk" Width="160px" EnableSingleInputRendering="true">
<ClientEvents OnKeyPress="onSearchBoxKeyPress"></ClientEvents>
</telerik:RadTextBox>
<telerik:RadButton RenderMode="Lightweight" ID="SearchButton" runat="server" Skin="Silk" Width="70px" Text="Search"
AutoPostBack="false" OnClientClicked="onSearchButtonClick">
</telerik:RadButton>
</span>
<span class="column">
<span class="sortDescription">order by selected field </span>
<span class="sortPanel">
<a class="sortAsc" href="javascript:void(0);" title="Order ascending"></a>
<a class="sortDesc" href="javascript:void(0);" title="Order descending"></a>
</span>
</span>
</div>
<telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" AllowPaging="true" PageSize="9">
<LayoutTemplate>
<div id="listView">
<a class="pagePrev" href="javascript:void(0);" title="Go to previous page"></a>
<a class="pageNext" href="javascript:void(0);" title="Go to next page"></a>
<div id="items">
</div>
</div>
</LayoutTemplate>
<ClientSettings>
<DataBinding ItemPlaceHolderID="items">
<ItemTemplate>
<div class="item">
<img src="#= String.format(imageUrlFormat, CustomerID) #" alt="Photo" />
<span class="name">#= ContactName #</span>
<span class="company">#= CompanyName #</span>
<span class="title">#= ContactTitle #</span>
</div>
</ItemTemplate>
<SelectedItemTemplate>
<div class="item selected">
<table class="details">
<tr>
<th>Address:</th>
<td><div class="addr">#= Address #, #= City #</div></td>
</tr>
<tr>
<th>Country:</th>
<td>#= Country #</td>
</tr>
<tr>
<th>Phone:</th>
<td>#= Phone #</td>
</tr>
<tr>
<th>Fax:</th>
<td>#= Fax != null ? Fax : "" #</td>
</tr>
</table>
</div>
</SelectedItemTemplate>
<EmptyDataTemplate>
<div class="empty">
No Matching Data
</div>
</EmptyDataTemplate>
<DataService Location="ListViewWcfService.svc" DataPath="GetCustomers" SortParameterType="Linq"
FilterParameterType="Linq"></DataService>
</DataBinding>
<ClientEvents OnDataBinding="onListViewDataBinding" OnDataBound="onListViewDataBound"></ClientEvents>
</ClientSettings>
</telerik:RadListView>
</div>
</div>
</form>
</body>
</html>