<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
        //<![CDATA[
            function pageLoad(sender, args) {
                toggleLoadingPanel("<%= RadGrid1.ClientID %>", true);
            }

            function showLoadingPanel(sender, args) {
                toggleLoadingPanel(sender.get_id(), true);
            }

            function hideLoadingPanel(sender, args) {
                toggleLoadingPanel(sender.get_id(), false);
            }

            function toggleLoadingPanel(elementId, show) {
                var loadingPanel = $find("LoadingPanel");
                if (show) {
                    loadingPanel.show(elementId);
                }
                else {
                    loadingPanel.hide(elementId);
                }
            }

            function handleScrolling(sender, args) {
                //check if the items are scrolled to bottom and get additional items
                if (args.get_isOnBottom()) {
                    var master = sender.get_masterTableView();
                    if (master.get_pageSize() < master.get_virtualItemCount()) {
                        //changing page size causes automatic rebind
                        master.set_pageSize(master.get_pageSize() + 20);
                    }
                }
            }
            //]]>
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" PageSize="14" AutoGenerateColumns="false">
        <PagerStyle Mode="NumericPages" />
        <MasterTableView TableLayout="Fixed">
            <Columns>
                <telerik:GridBoundColumn DataField="ID" HeaderText="ID" />
                <telerik:GridBoundColumn DataField="ProductName" HeaderText="Product Name" HeaderStyle-Width="250px" />
                <telerik:GridBoundColumn DataField="QuantityPerUnit" HeaderText="Quantity Per Unit" />
                <telerik:GridBoundColumn DataField="UnitPrice" HeaderText="Unit Price" DataFormatString="{0:C2}" />
                <telerik:GridBoundColumn DataField="UnitsInStock" HeaderText="Units In Stock" />
            </Columns>
        </MasterTableView>
        <ClientSettings>
            <Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True">
            </Scrolling>
            <DataBinding Location="Default.aspx" SelectMethod="GetProductData" SelectCountMethod="GetProductCount"
                StartRowIndexParameterName="startRowIndex" MaximumRowsParameterName="maxRows" />
            <ClientEvents OnCommand="showLoadingPanel" OnDataBound="hideLoadingPanel" />
        </ClientSettings>
    </telerik:RadGrid>
    </form>
</body>
</html>
