<%@ 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>
<style type="text/css">
legend {
color: inherit;
}
fieldset {
padding: 5px 10px 10px 10px;
border-color:#f0f0f0;
}
</style>
</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">
<telerik:RadListView ID="RadListView1" Width="97%" AllowPaging="True" runat="server"
DataSourceID="SqlDataSource1" ItemPlaceholderID="ProductsHolder">
<LayoutTemplate>
<fieldset style="max-width: 910px;" id="FieldSet1">
<legend>Products</legend>
<asp:Panel ID="ProductsHolder" runat="server">
</asp:Panel>
<table cellpadding="0" cellspacing="0" width="100%;" style="clear: both;">
<tr>
<td>
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1"
AllowSEOPaging="true">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" />
<telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5" />
<telerik:RadDataPagerButtonField FieldType="NextLast" />
<telerik:RadDataPagerPageSizeField PageSizeComboWidth="60" PageSizeText="Page size: " />
</Fields>
</telerik:RadDataPager>
</td>
</tr>
</table>
</fieldset>
</LayoutTemplate>
<ItemTemplate>
<div style="float: left;">
<table cellpadding="0" cellspacing="0" style="width: 300px;">
<tr>
<td style="width: 20%;">Name:
</td>
<td style="width: 80%; padding-left: 5px;">
<%# Eval("ProductName") %>
</td>
</tr>
<tr>
<td>Quantity:
</td>
<td style="width: 80%; padding-left: 5px;">
<%# Eval("QuantityPerUnit") %>
</td>
</tr>
<tr>
<td>Price:
</td>
<td style="width: 80%; padding-left: 5px;">
<%# DataBinder.Eval(Container.DataItem, "UnitPrice", "{0:C}") %>
</td>
</tr>
<tr>
<td>Units:
</td>
<td style="width: 80%; padding-left: 5px;">
<%# Eval("UnitsInStock") %>
</td>
</tr>
<tr>
<td>Available:
</td>
<td style="width: 80%; padding-left: 5px;">
<%# ((bool)DataBinder.Eval(Container.DataItem,"Discontinued") == false ? "Yes" : "No") %>
</td>
</tr>
<tr>
<td>
<hr />
</td>
<td>
<hr />
</td>
</tr>
</table>
</div>
</ItemTemplate>
</telerik:RadListView>
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient" SelectCommand="SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice, UnitsInStock, Discontinued FROM [Products]"
runat="server"></asp:SqlDataSource>
</div>
</div>
</form>
</body>
</html>