When you have numerous records to show, we have to resort to Paging. There is a better alternative to display voluminous data (especially read only data) while providing a better user experience & also making efficient use of server bandwidth - the Continuous Scrolling or Infinite Scrolling UI Pattern. Read on to know more about how to implement Continuous Scrolling UI Pattern in ASP.NET with a GridView.

If you have used Google Reader, Live Image Search or Wikia Search (the open source search engine), you may have noticed how the Infinite Scrolling or the Continuous Scrolling UI Pattern works.

UIPatterns explains Continuous Scrolling thus:
In contrast to the Pagination patterns, the Continuous Scrolling pattern has no natural break. When using pagination patterns, a decision to only show a subset of data at a time and then let the user request more data if wanted is chosen. With the Continuous Scrolling, new data is automatically retrieved as the user has scrolled to the bottom of the page. It thus appears as if the page has no end, as more data will be loaded and inserted into the page each time the user scrolls to the bottom of page.

The minimalistic code sample explained here will show how to fetch records asynchronously on scrolling from a hypothetical Orders table after the first batch is initially fetched. A Generic Handler (which is similar to an ASPX page but lacks HTML tags) is used to retrieve records asynchronously and hand it over to the parent page. So the sample basically consists of the following 2 files which you will have to copy to a ASP.NET 2.0 Website in VS.NET 2005 or VS.NET 2008 -
FetchOnDemand.aspx
AsyncHandler.ashx

All the JavaScript magic to track when the user reaches the end of the scroll bar (in this example we simulate DIV scrolling by restricting it's height & setting overflow:auto style for the DIV tag) is done effortlessly by jQuery, a "JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development".

You can grab the external JavaScript file representing the jQuery library need for this sample from either of these URLs -
http://code.jquery.com/jquery-latest.js
http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js

You can copy and place the external JavaScript file in a JS folder under the ASP.NET 2.0 website you create in VS.NET for running this code sample or you may even choose to reference it directly in the code. The jQuery library will be used in the parent page (FetchOnDemand.aspx) to trigger fetching of new records dynamically on scrolling to the bottom. The parent page communicates the unique Id related to the last row that was previously fetched to a Generic Handler (AsyncHandler.ashx). The Handler in turn returns a batch of new records asynchronously as a HTML table so that it can be injected at the end of table rendered by the GridView in the parent page.

Onto the code ...

FetchOnDemand.aspx displays the first 20 records through a GridView. jQuery helps us get the last Order Id from the last row of the table rendered from the GridView. We pass this as parameter to the Generic Handler's querystring -
"AsyncHandler.ashx?lastOrderId="

<%@ Page Language="C#" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataSet ds = new DataSet();
            SqlConnection conn = new SqlConnection("_place_your_connection_string_here");
            string _cmdText = "Select TOP 20 OrderID, Convert(Varchar,OrderDate,101) OrderDate, Quantity From Orders";
            SqlDataAdapter da = new SqlDataAdapter(_cmdText, conn);
            da.Fill(ds, "Orders");
            tblOrders.DataSource = ds;
            tblOrders.DataBind();
        }
    }  
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dynamic Content Load On Scroll</title>
    <style type="text/css">
        body
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color: #666666;
        }
        .divLeft
        {
            height: 200px;
            border: solid 1px black;
            width: 300px;
            text-align: left;
            overflow: auto;
        }
        .divProgress
        {
            width: 15%;
            background-color: red;
            color: white;
        }
        .tblHeader
        {
            font-weight: bold;
            text-align: left;
            background-color: gray;
            color: black;
        }
        td 
        {
            text-align:center;
        }
    </style>

    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">
        //following code utilizes jQuery 1.2.6
        var prev = 0;
        $(document).ready(
        
        //DIV showing the message "Loading..." is hidden initially
        //The message will be shown when records are fetched with AJAX 
        //when user has scrolled to the bottom of the DIV scrollbar 
        function() {
            $(".divProgress").hide();

            $(".divLeft").scroll(
            
        function() {
        //triggering point is when the difference of the heights of the TABLE 
        //and DIV match the DIV's scrollTop value
        if ($("#tblOrders").height() - this.scrollTop == $(this).height()) {
        //progress bar         
        $(".divProgress").ajaxStart(function() {
            $(this).show();
        });
        $(".divProgress").ajaxStop(function() {
            $(this).hide();
        });

        //get last Order Id to track next fetch
        var OrderIdLast = $("#tblOrders tr:last").children("td:first").html();

        //get last table row in order to append the new result set increment
        var trLast = $("#tblOrders tr:last");
        if (parseInt(OrderIdLast, 10) > parseInt(prev, 10)) {
            prev = OrderIdLast;
            //make a async call to fetch the incremental results     
            $.post("AsyncHandler.ashx?lastOrderId=" + OrderIdLast, function(data) {
                if (data != null) {
                    //append new result set to last row
                    trLast.after(data);
                }
            });
        }
    }
});
});
    </script>
</head>
<body>
    <h3>This is a demo to show Continous Scrolling UI Pattern</h3>
    <form id="form1" runat="server">
    <div class="divLeft">
        <asp:GridView ID="tblOrders" runat="server" AutoGenerateColumns="false" CellPadding="2" Width="100%">
            <HeaderStyle CssClass="tblHeader" />
            <Columns>
                <asp:TemplateField HeaderText="Order Id">
                    <ItemTemplate>
                        <%#Eval("OrderID")%>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Order Date">
                    <ItemTemplate>
                        <%# Eval("OrderDate")%>
                        <input type="hidden" id="htxtOrderId" runat="server" value='<%#Eval("OrderID")%>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Quantity">
                    <ItemTemplate>
                        <%#Eval("Quantity")%>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <div class="divProgress">
        Loading....
    </div>
    </form>
</body>
</html>

AsyncHandler.ashx keeps the weight of the response lighter than an equivalent ASPX page. It takes a OrderId value & returns the next five records formatted in a HTML table so that it can be readily appended to the table in the parent view containing the bigger set of records.

<%@ WebHandler Language="C#" Class="AsyncHandler" %>

using System;
using System.Web;
using System.Text;
using System.Data;
using System.Data.SqlClient;

public class AsyncHandler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        
        //REMOVE BELOW LINE if you are using it in a real application
        //It is here to simulate the delay while fetching results 
        System.Threading.Thread.Sleep(2000);
        
        //The last OrderId is used to get the next increment
        string lastOrderId = Convert.ToString(context.Request.QueryString["lastOrderId"]);

        //The PrepareDataSet method stuffs the DataSet into a HTML table
        context.Response.Write(PrepareDataSet(lastOrderId));
    }

    private string PrepareDataSet(string _orderId)
    {
        System.Data.SqlClient.SqlConnection conn = new SqlConnection("_place_your_connection_string_here");
        string _cmdText = 
    "Select TOP 10 OrderID, Convert(Varchar,OrderDate,101) OrderDate, Quantity From Orders Where OrderID >" + _orderId;

        SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(_cmdText, conn);
        DataSet ds = new System.Data.DataSet();
        da.Fill(ds, "Orders");

        //The BuildRows method prepares a HTML table & stuffs the resultset into it
        return BuildRows(ds.Tables[0]);
    }

    private string BuildRows(System.Data.DataTable dt)
    {
        StringBuilder sb = new StringBuilder();
        System.Data.DataRow dr;
        if (dt.Rows.Count > 0)
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                sb.Append("<tr class='tblRow'>");
                dr = dt.Rows[i];
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    sb.Append("<td>" + dr[j] + "</td>");
                }
                sb.Append("</tr>");
            }
        }
        return sb.ToString();
    }
    
      public bool IsReusable {
        get {
            return false;
        }
    }

}

The Continuous Scrolling UI Pattern is an user-friendly way to display a large number of records. jQuery makes it easy to manipulate the DOM and dynamically add incremental results to the initial result set.

References:
Load Content While Scrolling With jQuery
Implementing infinite scrolling with jQuery

Biography - mv ark

M.V. 'Anil' Radhakrishna is a seasoned developer and a Microsoft MVP (ASP/ASP.NET). He blogs his little discoveries and Web development tips, tricks and trivia quite regularly. You can find some of his unusual code samples & snippets at his Code Gallery.

Didn't Find The Answer You Were Looking For?

EggHeadCafe has experts online right now that may know the answer to your question. We pay them a bonus for answering as many questions as they can. So, why not help them and yourself by becoming a member (free) and ask them your question right now?

Ask Question In Live Forum

Article Discussion: Implementing Continuous Scrolling UI Pattern in ASP.NET
mv ark posted at Saturday, February 28, 2009 5:57 AM
	Original Article



How to set GridView Row properties using Infinite Scrolling
khushi2005 khushi replied to mv ark at Tuesday, October 27, 2009 12:09 PM
Hi I have implemented your solution and it works the way it should work I also tried implementing using DataTable and everything works fine with putting code at runtime Now my problem is the first column in Gridview is a Image Template Field In order to use Row_Command property I have to set the index of each image using code like this for (int iRows = 0; iRows < XGrid1.Rows.Count; iRows++) { GridViewRow myRow = XGrid1.Rows[iRows]; ImageButton b = (ImageButton)myRow.Cells[1].FindControl("imgbtnShow"); b.CommandArgument = indexItem.ToString();//this index keeps track of which image is clicked indexItem = indexItem + 1; } Here in this article we create a StringBuilder and append the table rows to it I do not know how we could do it using this articl Thanks for your help



Need Guidence
Hasnain Haider replied to mv ark at Monday, January 18, 2010 3:03 AM
I am unable to implement this pattern - could you please provide project for download in vb ...



re: Article Discussion: Implementing Continuous Scrolling UI Pattern in ASP.NET
viswa rao replied to mv ark at Saturday, April 10, 2010 5:11 PM
I could not download Jquery 1.2.6. So I used jquery-1.4.2.min.js I copied all your code. After compiling and running it shows a page with empty box with no gridview in it. How I can I debug or find out what is wrong?



re: Article Discussion: Implementing Continuous Scrolling UI Pattern in ASP.NET
Ghawadi replied to mv ark at Tuesday, May 04, 2010 8:48 AM
I tried to implement what is in the article, the grid was loaded with data at the initial load, but when scrolling down nothing happen! I used the jquery.min.js is it possible to upload a sample project?

FREE SOFTWARE & COOL STUFF

Win a Free License of Kentico CMS for ASP.NET. Kentico CMS is an affordable content management solution that provides a complete and total set of features for building web sites, intranets ,community sites and also on-line stores on the Microsoft ASP.NET platform.

	ASP.NET HttpPostedFile Image Resizer
	Working with GoogleMap Control in ASP.NET
	AJAX Web Service Driven Customers Table With Customer Details
	Custom Favorites Web Site with MongoDb and NoRM
	ASP.NET Providerless Custom Forms Authentication, Roles and Profile with MongoDb
	Load Testing ASP.NET Applications with Visual Studio 2010
	ASP.NET GridView: Select Row and Display Item Detail
	Distributed Data Grids - Share Objects Between Windows Service and ASP.NET
	IIS 7.0 Extensionless UrlRewriting (Short urls)
	Build a Cross-Browser ASP.NET CSS-Only Menu UserControl
	More

RELATED FAQS

	Hover in Gridviewrows using javascript
	Search within Gridview Not in database.
	Search Tree view Recursively and check the checkbox of search item
	Default focus on control in webpage
	Convert datagrid into text file in asp.net
	Csv File from the GridView
	Browser Version in ASP.Net
	Browser name in ASP.Net
	One way to popup a message box from an ASP.NET application.
	Span columns in Gridview header
	More

Implementing Continuous Scrolling UI Pattern in ASP.NET

Didn't Find The Answer You Were Looking For?

FREE SOFTWARE & COOL STUFF

RELATED ARTICLES

RELATED FORUM POSTS

RELATED FAQS