<%@ Page Language="C#" Inherits="Telerik.Web.Examples.DataPager.Accessibility.DefaultCS"CodeFile="DefaultCS.aspx.cs" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ 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" type="text/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">
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadListView runat="server" ID="RadListView1" AllowPaging="True" DataKeyNames="ProductID"
DataSourceID="SqlDataSource1">
<AlternatingItemTemplate>
<tr class="rlvA">
<td>
<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
</td>
<td>
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
</td>
<td>
<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
</td>
<td>
<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
</td>
<td>
<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
</td>
</tr>
</AlternatingItemTemplate>
<ItemTemplate>
<tr class="rlvI">
<td>
<asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
</td>
<td>
<asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
</td>
<td>
<asp:Label ID="QuantityPerUnitLabel" runat="server" Text='<%# Eval("QuantityPerUnit") %>'></asp:Label>
</td>
<td>
<asp:Label ID="UnitPriceLabel" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:Label>
</td>
<td>
<asp:Label ID="UnitsInStockLabel" runat="server" Text='<%# Eval("UnitsInStock") %>'></asp:Label>
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<div>
<div>
There are no items to be displayed.
</div>
</div>
</EmptyDataTemplate>
<LayoutTemplate>
<div class="RadListView_<%#Container.Skin %>">
<table cellspacing="0" style="width: 100%;" class="rlvTable" summary="DataPager Accessibility validation example">
<caption>
Products</caption>
<thead>
<tr class="rlvHeader">
<th scope="col">
<h4>ProductID</h4>
</th>
<th scope="col">
<h4>ProductName</h4>
</th>
<th scope="col">
<h4>QuantityPerUnit</h4>
</th>
<th scope="col">
<h4>UnitPrice</h4>
</th>
<th scope="col">
<h4>UnitsInStock</h4>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPager1" runat="server" PagedControlID="RadListView1" EnableAriaSupport="true"
PageSize="6">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerTemplatePageField HorizontalPosition="RightFloat">
<PagerTemplate>
<div style="float: right; line-height: 34px; margin-left: 10px;">
<b>Items
<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>"></asp:Label>
to
<asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.TotalRowCount > (Container.Owner.StartRowIndex+Container.Owner.PageSize) ? Container.Owner.StartRowIndex+Container.Owner.PageSize : Container.Owner.TotalRowCount %>"></asp:Label>
of
<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>"></asp:Label>
<br />
</b>
</div>
</PagerTemplate>
</telerik:RadDataPagerTemplatePageField>
</Fields>
</telerik:RadDataPager>
</td>
</tr>
</tfoot>
<tbody>
<tr id="itemPlaceholder" runat="server">
</tr>
</tbody>
</table>
</div>
</LayoutTemplate>
</telerik:RadListView>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Validate with WAVE</asp:LinkButton>
</telerik:RadAjaxPanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT top 30 [ProductID], [ProductName], [QuantityPerUnit], [UnitPrice], [UnitsInStock] FROM [Products]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>