<%@ Page Language="VB"  CodeFile="DefaultVB.aspx.vb" Inherits="ODataDataSource.Examples.Functionality.Paging.DefaultVB" %>
<%@ 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" />
    <script type="text/javascript" src="scripts.js"></script>
    <div class="demo-container">
        <telerik:RadListView ID="RadListView1" runat="server">
            <LayoutTemplate>
                <div id="layoutContainer">
                    <ul class="qsf-ex-item-container" id="itemContainer">
                        <li><!-- This item will be replaced with the templates --></li>
                    </ul>
                    <div class="qsf-ex-paging">
                        <input type="button" id="FirstPageButton" value="First Page" onclick="FirstPageClientClicked()"
                            disabled="disabled" />
                        <input type="button" id="PreviousButton" value="Previous Page" onclick="PrevClientClicked()"
                            disabled="disabled" />
                            Page <span id="currentPage"></span> of <span id="totalPages"></span>
                        <input type="button" id="NextButton" value="Next Page" onclick="NextClientClicked()" />
                        <input type="button" id="LastPageButton" value="Last Page" onclick="LastPageClientClicked()" />
                        <span id="pageSizeSpan">Page size:</span>
                        <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="cmbPageSize" Width="50"
                            OnClientSelectedIndexChanged="cmbPageSize_SelectedIndexChanged" Skin="Silk">
                            <Items>
                                <telerik:RadComboBoxItem Text="8" Value="8" />
                                <telerik:RadComboBoxItem Text="12" Value="12" />
                                <telerik:RadComboBoxItem Text="16" Value="16" />
                                <telerik:RadComboBoxItem Text="20" Value="20" />
                            </Items>
                        </telerik:RadComboBox>
                    </div>
                </div>
            </LayoutTemplate>
            <ClientSettings>
                <DataBinding ItemPlaceHolderID="itemContainer">
                    <ItemTemplate>
                            <li>
                                <div class="item-inner">
                                    <table cellpadding="0" cellspacing="0">
                                        <colgroup>
                                            <col width="20%" />
                                            <col width="80%" />
                                        </colgroup>
                                        <tbody>
                                            <tr>
                                                <th>Name:</th>
                                                <td>#=ProductName #</td>
                                            </tr>
                                            <tr>
                                                <th>Quantity:</th>
                                                <td>#=QuantityPerUnit #</td>
                                            </tr>
                                            <tr>
                                                <th>UnitPrice:</th>
                                                <td>#=UnitPrice # $</td>
                                            </tr>
                                            <tr>
                                                <th>Units:</th>
                                                <td>#= UnitsInStock #</td>
                                            </tr>
                                            <tr>
                                                <th>Available:</th>
                                                <td>#= Discontinued == false ? "Yes" : "No" #</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </li> 
                    </ItemTemplate>
                </DataBinding>
            </ClientSettings>
        </telerik:RadListView>
    </div>
    <telerik:RadODataDataSource ID="RadODataDataSource1" runat="server" EnablePaging="true">
        <Schema>
            <telerik:DataModel ModelID="Product" Set="Products" PageIndex="0"
                PageSize="8" />
        </Schema>
        <ClientEvents RequestSucceeded="requestSucceeded" />
    </telerik:RadODataDataSource>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.layoutContainer = $get("layoutContainer");
                demo.oDataDataSource = $find("<%=RadODataDataSource1.ClientID%>");
                demo.listview = $find("<%=RadListView1.ClientID%>");
                demo.firstPageButton = $telerik.findElement(layoutContainer, "FirstPageButton");
                demo.lastPageButton = $telerik.findElement(layoutContainer, "LastPageButton");
                demo.previousButton = $telerik.findElement(layoutContainer, "PreviousButton");
                demo.nextButton = $telerik.findElement(layoutContainer, "NextButton");
                demo.model = demo.oDataDataSource.get_model("Product");
                demo.oDataDataSource.fetch("Product");
            });
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>