Current filter:
                                You should refresh the page.
                                E

                                ASPxCallback - How to load the content while scrolling - Auto page growth on scrolling down

                                Tags:
                                0

                                This sample demonstrates how to implement automatic (on-demand) loading of items when a page's bottom is reached during scrolling the page down.

                                This behavior is widely used on modern and popular websites, such as facebook.com, bing.com, twitter.com, etc. This behavior is useful when there is a lot of data to be presented on a page, but it is not necessary to load and display all the data at a time since the most part of it might not be needed for a user. However, if the user scrolls the page down and is interested in seeing more data, it can be automatically loaded.

                                In this demo, we use the ASPxCallback, ASPxLoadingPanel, and ASPxPanel controls together with useful JavaScript methods available via our ASPxClientUtils object.

                                To track the moment when new data should be loaded, we handle the 'scroll' event of the browser window. When scrolling reaches the page's bottom, we generate a callback (using ASPxCallback) to obtain a new data portion from the server. Then, we add the received items to the end of the dataContainerElement DIV element.

                                As an example, we demonstrate how data can be passed from the server to the client using the JSProperties property, which is exposed by our AJAX-enabled web controls. In this sample, we pass the 'cpIsEnd' flag from the server to indicate that the end of a data list is reached, and the there is nothing to load.

                                • pratik m 1 12.05.2012

                                  i got error on page
                                  /////////////////////////
                                  Parser Error

                                  Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

                                  Parser Error Message: Could not load file or assembly 'DevExpress.Web.v11.2, Version=11.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a' or one of its dependencies. The system cannot find the file specified.

                                  Source Error:

                                  Line 1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
                                  Line 2: <%@ Register assembly="DevExpress.Web.v11.2, Version=11.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxCallback" tagprefix="dx" %>
                                  Line 3: <%@ Register assembly="DevExpress.Web.v11.2, Version=11.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxLoadingPanel" tagprefix="dx" %>
                                  Line 4: <%@ Register assembly="DevExpress.Web.v11.2, Version=11.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPanel" tagprefix="dx" %>

                                  Source File: /endlesspagging/Default.aspx
                                  /////////////////////////////

                                  can u tell me solution

                                • Amr Ammar 12.05.2012

                                  Thank you for this nice code. Could you please tell us how to load the first set of data when the page first loads instead of having to click the "Show more items" link ?

                                Show all comments
                                Leave a Comment
                                You must  log in  or  register  to leave comments
                                Select file
                                • default.aspx
                                • default.aspx.cs
                                • styles.css
                                Select language
                                • C#
                                • VB.NET
                                Select version
                                • v2011 vol 2.10 - v2012 vol 2.8
                                <%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="_default" EnableViewState="false" %>

<%@ Register assembly="DevExpress.Web.v11.2, Version=11.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxCallback" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v11.2, Version=11.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxLoadingPanel" tagprefix="dx" %>
<%@ Register assembly="DevExpress.Web.v11.2, Version=11.2.10.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxPanel" tagprefix="dx" %>

<!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>
    <title>How to load the content while scrolling - Auto page growth on scrolling down</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <h1>Loading the content while scrolling</h1>
    <form id="form1" runat="server">
    <script type="text/javascript">
        var currentPage = 0;
        var inCallBack = false;

        function windowScroll(evt) {
            if (inCallBack)
                return;
            var windowHeight = ASPxClientUtils.GetDocumentClientHeight();
            var documentHeight = document.body.clientHeight;
            var scrollTop = ASPxClientUtils.GetDocumentScrollTop();

            var scrollDelta = documentHeight - windowHeight - scrollTop;
            if (scrollDelta <= 50)
                LoadItems();
        }
        function LoadItems() {
            var isAllDataLoaded = currentPage === -1;
            if (!isAllDataLoaded) {
                loadingPanel.Show();
                callbackControl.PerformCallback(currentPage + 1);
                inCallBack = true;
            }
        }

        function callbackControlInit(s, e) {
            ASPxClientUtils.AttachEventToElement(window, 'scroll', windowScroll);
        }
        function callbackControlComplete(s, e) {
            loadingPanel.Hide();
            if (e.result != "") {
                var dataContainerElement = document.getElementById("dataContainer");
                dataContainerElement.innerHTML = dataContainerElement.innerHTML + e.result;
                currentPage++;
            }
            if (callbackControl.cpIsEnd) {
                currentPage = -1;
                pnLoadingContainer.SetVisible(false);
            }
            inCallBack = false;
        }
    </script>
    <dx:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="callbackControl"
        OnCallback="ASPxCallback1_Callback">
        <ClientSideEvents Init="callbackControlInit" CallbackComplete="callbackControlComplete" />
    </dx:ASPxCallback>
    <dx:ASPxLoadingPanel ID="ASPxLoadingPanel1" runat="server" ClientInstanceName="loadingPanel"
        ContainerElementID="pnLoadingContainer" Modal="True" EnableDefaultAppearance="False">
        <LoadingDivStyle BackColor="White">
        </LoadingDivStyle>
        <Border BorderStyle="None" />
    </dx:ASPxLoadingPanel>
    <div id="dataContainer" style="width: 100%">
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <div style="height: 100px;">
                    <img id="imgCover" runat="server" alt='<%# Eval("Title") %>' src='<%# "~/Images/Discs/"+Eval("ID")+".jpg" %>' /><br />
                </div>
                <span>
                    <%# Eval("Year") %></span><br />
                <a href='<%# "javascript:void("+ Eval("ID")+");" %>'>
                    <%# Eval("Title") %></a><br />
                <span>
                    <%# Eval("Price") %></span>
                <hr class="separator" />
            </ItemTemplate>
        </asp:Repeater>
    </div>
    <dx:ASPxPanel ID="pnLoadingContainer" runat="server" Width="100%" Height="64px" RenderMode="Table"
        ClientInstanceName="pnLoadingContainer" CssClass="pnLoadingContainer">
        <PanelCollection>
            <dx:PanelContent runat="server" SupportsDisabledAttribute="True">
                <a class="linkbutton" href="javascript:LoadItems();">Show More Items</a>
            </dx:PanelContent>
        </PanelCollection>
    </dx:ASPxPanel>
    <div id="loadingPanelContainer" class="loadingPanelContainer">
    </div>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/discs.mdb"
        SelectCommand="SELECT * FROM [Discs]"></asp:AccessDataSource>
    </form>
</body>
</html>