Custom Paging in ASP.NET GridView control with AJAX using ObjectDataSource control

Download source code

In this article I will explain how to do custom paging in ASP.NET GridView control with AJAX using ObjectDataSource control

Introduction

In this article we will see how to enable custom paging in ASP.NET GridView control using ObjectDataSource control. We will also enable AJAX to avoid post back after navigation through paging. We will use Northwind sample database with SQL Server 2005 express edition in this example to show Custom Paging. You can download it from here or here.

Why we need Custom Paging?

When we use simple paging in the GridView, for displaying every page it loads all the data from the table. For example even if only 10 records are required to be displayed on the page, it loads all the thousands and millions of records from the table before displaying these ten records. Thus, it puts extra load on the server and the database. To avoid this we use Custom Paging. In Custom Paging we only fetch record from the database that is required to be displayed on the current page.

Following are the steps to implement Custom Paging:

Step 1:

Create a new ASP.NET Web Application

Step 2:

Drag a GridView control and an ObjectDataSource control on Default.aspx from the Toolbox

Step 3:

To enable Custom Paging in GridView control through ObjectDataSourece control, we need to set following properties of the ObjectDataSource control:

Here TypeName is the class name that contains the methods specified by SelectMethod, SelectCountMethod.

SelectMethod specifies the method that ObjectDataSource uses to retrieve subset of data. You must specify two parameters in this method, MaximumRows and StartRowIndex. First parameter takes number of rows to retrieve and the second parameter specify index from where to fetch the records.

SelectCountMethod specifies the method that retrieves total number of records from the database.

Write following methods in the Default.aspx.cs code behind file:

string ConString = WebConfigurationManager.ConnectionStrings["ConString"].ConnectionString;

public DataSet GetOrders(int maximumRows, int startRowIndex)
{
     DataSet ds;

     using (SqlConnection con = new SqlConnection(ConString))
     {
          string CmdString = "SELECT SNo, OrderID, CustomerID, EmployeeID, OrderDate, ShipCountry FROM " +
                             "(SELECT ROW_NUMBER() OVER(ORDER BY OrderID) AS SNo, OrderID, CustomerID, EmployeeID, OrderDate, ShipCountry FROM Orders) AS SNo " +
                             "WHERE SNo BETWEEN @StartRowIndex AND (@StartRowIndex+@MaximumRows)";

          SqlCommand cmd = new SqlCommand(CmdString, con);
          cmd.Parameters.AddWithValue("@StartRowIndex", startRowIndex + 1);
          cmd.Parameters.AddWithValue("@MaximumRows", maximumRows);

          using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
          {
               ds = new DataSet();
               sda.Fill(ds);
          }
     }
     return ds;
}

This method uses ROW_NUMBER function to retrieve subset of records from the Orders table.

public int GetOrdersCount()
{
     int OrdersCount;
     string CmdString = "SELECT COUNT(OrderID) FROM Orders";

     using (SqlConnection con = new SqlConnection(ConString))
     {
          SqlCommand cmd = new SqlCommand(CmdString, con);
          con.Open();
          int.TryParse(cmd.ExecuteScalar().ToString(), out OrdersCount);
     }
     return OrdersCount;
}

Step 4:

Set DataSourceID property of the GridView1 to ObjectDataSourece1 and its AllowPaging to true.

Step 5:

Drag a ScriptManager and an UpdatePanel control on Default.aspx page from the Toolbox. Include a ContentTemplate tag inside the UpdatePanel and put the GridView inside ContentTemplate. Please note that the ScriptManager should come before any UpdatePanel.

HTML Source of Default.aspx looks like following:

<div>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>

     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
          <ContentTemplate>
               <asp:GridView ID="GridView1" runat="server"
                    AllowPaging="true"
                    DataSourceID="ObjectDataSource1">
               </asp:GridView>
          </ContentTemplate>
     </asp:UpdatePanel>

     <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
          EnablePaging="true"
          TypeName="CustomPaging.CustomPaging"
          SelectCountMethod="GetOrdersCount"
          SelectMethod="GetOrders">
     </asp:ObjectDataSource>
</div>

Step 6:

Give a style to the GridView using AutoFormat option from GridView Tasks menu

Output: