<%@ Page Language="vb" AutoEventWireup="false" %>
<%@ 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" />
</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:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadListView runat="server" ID="RadListView1" AllowPaging="True" DataKeyNames="ProductID" DataSourceID="SqlDataSource1" Skin="Silk">
<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 RadListView_Silk">
<table cellspacing="0" style="width: 100%;" class="rlvTable">
<thead>
<tr class="rlvHeader">
<th>ProductID
</th>
<th>ProductName
</th>
<th>QuantityPerUnit
</th>
<th>UnitPrice
</th>
<th>UnitsInStock
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" style="background-color: #f6f6f6">
<asp:DataPager ID="DataPagerProducts" runat="server" PagedControlID="RadListView1" PageSize="5">
<Fields>
<asp:TemplatePagerField>
<PagerTemplate>
<span style="display: block; padding: 3px 7px;"></span>
</PagerTemplate>
</asp:TemplatePagerField>
<asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="false"></asp:NextPreviousPagerField>
<asp:NumericPagerField></asp:NumericPagerField>
<asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="false"></asp:NextPreviousPagerField>
<asp:TemplatePagerField>
<PagerTemplate>
</PagerTemplate>
</asp:TemplatePagerField>
</Fields>
</asp:DataPager>
</td>
</tr>
</tfoot>
<tbody>
<tr id="itemPlaceholder" runat="server">
</tr>
</tbody>
</table>
</div>
</LayoutTemplate>
</telerik:RadListView>
</telerik:RadAjaxPanel>
<br />
<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
<ItemTemplate>
<tr class="lvItem">
<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>
<AlternatingItemTemplate>
<tr class="lvAltItem">
<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>
<EmptyDataTemplate>
<table id="Table1">
<tr>
<td>No data was returned.
</td>
</tr>
</table>
</EmptyDataTemplate>
<LayoutTemplate>
<table id="Table2" cellpadding="0" cellspacing="0" style="border: 1px solid #C3C3C3; width: 100%;">
<tr id="Tr1">
<td id="Td1">
<table id="itemPlaceholderContainer" runat="server" border="0" style="font: 14px/1 segoe ui; width: 100%;" cellspacing="0">
<tr id="Tr2" runat="server" class="lvAltItem">
<th id="Th1" runat="server" style="text-align: left; font-weight: normal;">ProductID
</th>
<th id="Th2" runat="server" style="text-align: left; font-weight: normal;">ProductName
</th>
<th id="Th3" runat="server" style="text-align: left; font-weight: normal;">QuantityPerUnit
</th>
<th id="Th4" runat="server" style="text-align: left; font-weight: normal;">UnitPrice
</th>
<th id="Th5" runat="server" style="text-align: left; font-weight: normal;">UnitsInStock
</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="5">
<telerik:RadDataPager RenderMode="Lightweight" ID="RadDataPagerProducts" runat="server" PagedControlID="ListView1" PageSize="5" Skin="Silk">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="Numeric"></telerik:RadDataPagerButtonField>
<telerik:RadDataPagerButtonField FieldType="NextLast"></telerik:RadDataPagerButtonField>
</Fields>
</telerik:RadDataPager>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Silk"></telerik:RadAjaxLoadingPanel>
<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>