How to Implement Infinite List “Load More” Pattern in ASP.NET Grid

[Infragistics] Murtaza Abdeali / Wednesday, November 30, 2011

Among the patterns that add to the overall usability of the application around desktop and mobile interface, one of the common ones is the “Load More” button appearing at the bottom of the lists that can be used to load data on demand. First emerged with the iPhone lists (at least that is the first time I got to experience it), now you find this pattern being used in bunch of other applications we daily use.

This pattern is defined in Jennifer Tidwell’s book Designing Interfaces 2nd Edition, click here to read an online version of it. The images above are from the post itself. In this blog post I am going to show you how to implement this pattern with the WebDataGrid in our ASP.NET AJAX toolset.

Understanding the problem

In order to show you the entire pattern and being able to capture each and every detail of it, I will break it down into the following task.

Task 1: Place WebDataGrid in an UpdatePanel and bind it to SQLDataSource control that will pull NorthWind customers information.
Task 2: Add a Select Parameter to SQLDataSource which will allow me to show 10 Rows during initial load. Then I’ll add a “Load More” button to the page which will load additional 10 rows and add to the grid.
Task 3: Finally, I will set the button control as the update trigger for the UpdatePanel, so that the user doesn’t loose the scroll point when loading rows and UpdateProgress to show a progress indication when the request is in progress.

In all of this, I will handle just 1 Event (Button Click) and will have just 1 line of code, most of it is going to be setup and I will set properties in the mark-up to connect things together.

Task 1

To accomplish task 1, I need the following controls on my page.

WebScriptManager
UpdatePanel
WebDataGrid (This will be wrapped inside of the UpdatePanel)
SQLDataSource
Button

I will need to point my SQLDataSource to pull in the top 10 customer information from the database, and then assign the datasource to the grid. A part from doing that, I am also going to modify the id and text property of the button. Once I am done with hooking the SQLDataSource and attaching it to the grid, the mark-up will look like the following:

<ig:WebScriptManager ID="WebScriptManager1" runat="server">

</ig:WebScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

        <ig:WebDataGrid ID="WebDataGrid1" runat="server" Width="646px" 

    AutoGenerateColumns="False" DataSourceID="SqlDataSource1">

            <Columns>

                <ig:BoundDataField DataFieldName="CustomerID" Key="CustomerID">

                    <Header Text="CustomerID" />

                </ig:BoundDataField>

                <ig:BoundDataField DataFieldName="CompanyName" Key="CompanyName">

                    <Header Text="CompanyName" />

                </ig:BoundDataField>

                <ig:BoundDataField DataFieldName="ContactName" Key="ContactName">

                    <Header Text="ContactName" />

                </ig:BoundDataField>

                <ig:BoundDataField DataFieldName="ContactTitle" Key="ContactTitle">

                    <Header Text="ContactTitle" />

                </ig:BoundDataField>

                <ig:BoundDataField DataFieldName="Country" Key="Country">

                    <Header Text="Country" />

                </ig:BoundDataField>

            </Columns>

            <Behaviors>

                <ig:RowSelectors RowNumbering="True">

                </ig:RowSelectors>

            </Behaviors>

        </ig:WebDataGrid>

    </ContentTemplate>

</asp:UpdatePanel>

<asp:Button ID="LoadMore" runat="server" Height="28px" 

    Text="Load More..." Width="647px" />

 <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

SelectCommand="select top(10) * from Customers" >

</asp:SqlDataSource>

After running the page, it will give me a WebDataGrid with row selectors and row numbering showing the first 10 customers in the Northwind database. Currently there is also a “Load More…” button displayed at the bottom of the grid, but it is non-functional.

Task 2

In this task, I need to add a select parameter to the SQLDataSource, and also hook up a server event to the button. In the button’s click event I will keep on updating the top record count so that the grid can show more data when the user click’s on the “Load More…” button.

Making the select command dynamic and adding the select parameter, below is what the SQLDataSource mark-up will look like. You will notice that I am using a parameter “TopVal” whose default value is 10, meaning during initial load it will show top 10 records. In the button click event, we will up this value by 10, so each time the button is clicked the grid can continue to display additional 10 customers.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 

ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

SelectCommand="select top(@TopVal) * from Customers" >

    <SelectParameters>

        <asp:Parameter Name="TopVal" DefaultValue="10" Type="Int32" />

    </SelectParameters>

</asp:SqlDataSource>

Now, in the button click event, I can grab the SQLDataSource’s Select Parameter and add 10 to it, which will make it fetch additional 10 records more than what it previously had and append to the grid.

protected void LoadMore_Click(object sender, EventArgs e)

{

   this.SqlDataSource1.SelectParameters["TopVal"].DefaultValue = (int.Parse(this.SqlDataSource1.SelectParameters["TopVal"].DefaultValue) + 10).ToString();

}

Once I have the above setup, clicking on the “Load More…” button should bring up additional 10 customers from the NorthWind database.

Task 3

Lastly, I want to add the final touches of the pattern. One is to make sure we don’t loose the context of the scroll position when the user clicks on the “Load More…” button. Currently, when you click on the button to load more data, it does a full page post back, and the scroll position of the page moves to the top. Secondly, we also want add some nice load animation so that user knows that a request for additional data is in progress.

To tackle the first one, I’ll use the UpdatePanel. Since I have wrapped the WebDataGrid inside of UpdatePanel, all I have to do is to set a trigger on it such that when the button is clicked, it’s content would come from the server and it will need to be refreshed. Just by adding Triggers to the UpdatePanel, I am now able to keep the scrolling point to where the button was when the user clicked it.

<Triggers>

    <asp:AsyncPostBackTrigger ControlID="LoadMore" EventName="Click">

    </asp:AsyncPostBackTrigger>

</Triggers>

For the final piece, I am going to use yet another stock ASP.NET control the UpdateProgress, and add a ProgressTemplate for it. By doing that, whenever there is an AJAX post triggered by the button click, my UpdateProgress content is going to be displayed and upon receiving additional data from the server, it will auto-hide itself.

Summary

A very common pattern in lists today on all devices is being able to show a “load" button at the bottom and upon clicking of the button, the list gets more data from the server and appends to itself. This helps with faster load times of the list during initial page load, a better usage of the bandwidth by providing additional data only when the user requests for it. In this case, I used our ASP.NET WebDataGrid controls and with the help of WebScriptManager, SQLDataSource, UpdatePanel, UpdateProgress, and a Button control implement the infinite list pattern in an ASP.NET WebForms application.

To download the sample, click here.

Enjoy!