Custom Paging for GridView

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

I don’t care for the built-in Paging technique for GridView, and neither do many other developers who don’t want to recreate the GridView Control or buy a third party control for the same.

This idea is taken from Mendhak’s sample code. The answer lies in building a Web User Control that acts like a Custom Paging Control for your GridView.

Using DropDownLists to Change Page Number and Page Size

The user can change the number of records that GridView displays and select the Page instead of clicking Next, Next, Next…

Not all people have the same requirements, and there are many other ways to achieve this effect, but the ones that I demonstrate will definitely add to the flexibility of your work.

Figure 1

Creating the UserControl

Create a new Website, add a Web User Control to it and name it Pager.ascx.

Add this code to the source of the page.

<div style="font-size:8pt; font-family:Verdana;">
   <div id="left" style="float:left;">
      <span>Show Page </span>
      <asp:DropDownList ID="ddlPageNumber" runat="server"
         AutoPostBack="true"
         OnSelectedIndexChanged="ddlPageNumber_
         SelectedIndexChanged"></asp:DropDownList>
      <span> of</span>
      <asp:Label ID="lblShowRecords" runat="server"></asp:Label>
      <span>Pages </span>
   </div>
   <div id="right" style="float:right;">
      <span>Display </span>
      <asp:DropDownList ID="ddlPageSize"
            runat="server"
            AutoPostBack="true"
            OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged">
         <asp:ListItem Text="1" Value="1"></asp:ListItem>
         <asp:ListItem Text="5" Value="5"></asp:ListItem>
         <asp:ListItem Text="10" Value="10"
                       Selected="true"></asp:ListItem>
         <asp:ListItem Text="20" Value="20"></asp:ListItem>
         <asp:ListItem Text="25" Value="25"></asp:ListItem>
         <asp:ListItem Text="50" Value="50"></asp:ListItem>
      </asp:DropDownList>
      <span> Records per Page</span>
   </div>
</div>

Exposing an event

You need to raise an Event from this control so that it can be handled from within the page consuming it.

public event CustomDelegateClass.PageChangedEventHandler PageChanged;

Notice the CustomDelegateClass.PageChangedEventHandler.

This is a custom delegate, so add a new Class file to your project (VS IDE will automatically add it to the App_Code folder) and add the following code:

public partial class CustomDelegateClass
{
   public delegate void PageChangedEventHandler(object sender,
      CustomPageChangeArgs e);
}

You might have notice by now that the function needs an argument of type CustomDelegateClass. This object contains useful information that is required for the navigation in GridView.

Add a class named CustomDelegateClass, which inherits from EventsArgs.

public partial class CustomPageChangeArgs : EventArgs
{
   private int _currentPageNumber;
   public int CurrentPageNumber
   {
      get { return _currentPageNumber; }
      set { _currentPageNumber = value; }
   }

   private int _totalPages;
   public int TotalPages
   {
      get { return _totalPages; }
      set { _totalPages = value; }
   }

   private int _currentPageSize;
   public int CurrentPageSize
   {
      get { return _currentPageSize; }
      set { _currentPageSize = value; }
   }
}

Now, the first DropDownList will fire the event to navigate to the different pageset, and the second DropDownlist will fire the event to change the PageSize of the GridView Control.

//First DropDownList, for selecting different page number

protected void ddlPageNumber_SelectedIndexChanged(object sender,
   EventArgs e)
   {
      CustomPageChangeArgs args = new CustomPageChangeArgs();
      args.CurrentPageSize =
         Convert.ToInt32(this.ddlPageSize.SelectedItem.Value);
      args.CurrentPageNumber =
         Convert.ToInt32(this.ddlPageNumber.SelectedItem.Text);
      args.TotalPages = Convert.ToInt32(this.lblShowRecords.Text);
      Pager_PageChanged(this, args);

      lblShowRecords.Text = string.Format(" {0} ",
         args.TotalPages.ToString());
   }

//second DropDonwList, to change the pagesize of gridView

protected void ddlPageSize_SelectedIndexChanged(object sender,
   EventArgs e)
   {
      CustomPageChangeArgs args = new CustomPageChangeArgs();
      args.CurrentPageSize =
         Convert.ToInt32(this.ddlPageSize.SelectedItem.Value);
      args.CurrentPageNumber = 1;
      args.TotalPages = Convert.ToInt32(this.lblShowRecords.Text);
      Pager_PageChanged(this, args);

      ddlPageNumber.Items.Clear();
      for (int count = 1; count <= this.TotalPages; ++count)
         ddlPageNumber.Items.Add(count.ToString());
      ddlPageNumber.Items[0].Selected = true;
      lblShowRecords.Text = string.Format(" {0} ",
         this.TotalPages.ToString());
   }

Your control is now ready to be consumed by a web page.