Paginate Grid Views in C#.Net

Standard pagination

To paginate a Grid view you only need to set the property “AllowPaging” to True and set an event for “PageIndexChanging”. You can do all this just using the properties panel. Once you have it done you need to set the gridview actual IndexPage and DataBind() it again, something like this:

protected void ResultsGrid_PageIndexChanging(object sender, GridViewPageEventArgs e) {
   ResultsGrid.PageIndex = e.NewPageIndex;
   LoadResults(); //This will redatabind the GV
   }

Those easy steps will give you a Grid View with standard pagination, you can modify some of its properties like:

• AllowPaging: Remember this property has to be set to True or pagination will not be enabled.
• PageSize: Lets you decide how many rows will be shown per page.
• Position: Where to show the page navigator: (top, bottom or both, default is bottom).
• Mode: Style of the navigator: numbers, text or some type of combination.
• PageButtonCount: How many pages to be shown in the navigator.
• FirstPageImageUrl, PreviousPageImageUrl, …: To set images for those options.
• FirstPageText, PreviousPageText, …: To set a text for those options.

Custom pagination

You can, also, design your own page navigator using a PagerTemplate:

<PagerTemplate>
      Page <asp:DropDownList ID="ddlPages" runat="server" AutoPostBack="True"
      onselectedindexchanged="ddlPages_SelectedIndexChanged"  ></asp:DropDownList>
      of <asp:Label ID="lblPageCount" runat="server"></asp:Label>
</PagerTemplate>

You can add a PagerTemplate manually or using the design menu clicking on the arrow above the GridView and then select “Edit Templates” and choose “PagerTemplate” on the combo.

You can add different controls to let you paginate here like ImageButtons, LinkButtons or a DropDownList, for example. If you do that, you will most probably to have to fill those controls when the GridView databinds, something like:

protected void ResultsGrid_DataBound(object sender, EventArgs e) {
   GridViewRow gvrPager = ResultsGrid.BottomPagerRow;

   if (gvrPager == null) return;
      // get your controls from the gridview
      DropDownList ddlPages = (DropDownList)gvrPager.Cells[0].FindControl("ddlPages");
      Label lblPageCount = (Label)gvrPager.Cells[0].FindControl("lblPageCount");

      if (ddlPages != null) {
         // populate pager
         for (int i = 0; i < ResultsGrid.PageCount; i++) {
            int intPageNumber = i + 1;
            ListItem lstItem = new ListItem(intPageNumber.ToString());
               if (i == ResultsGrid.PageIndex) lstItem.Selected = true;
               ddlPages.Items.Add(lstItem);
            }
         }

      // populate page count
      if (lblPageCount != null) lblPageCount.Text = ResultsGrid.PageCount.ToString();
      }

Once you do, you need to set AutoPostBack = true and get the event in backsource to change the GridView PageIndex, remember that this time the “PageIndexEvent” will not be fired since the control we are firing is a different one now. So you need to do something like this now:

protected void ddlPages_SelectedIndexChanged(object sender, EventArgs e) {
   GridViewRow gvrPager = ResultsGrid.BottomPagerRow;
   DropDownList ddlPages = (DropDownList)gvrPager.Cells[0].FindControl("ddlPages");

   ResultsGrid.PageIndex = ddlPages.SelectedIndex;
   oReport.loadResults();
}

The little annoying problem of this is that you can have a navigator in top, bottom or both parts of the gridview, and you need to deal with that when doing the custom navigator.

More info: http://kikosantos.net/tech/2006/05/custom-paging-in-gridview-control/

Independent Navigator

Once you know how to make a custom navigator using a PagerTemplate its not that hard to make a box with a navigator outside the GridView that will make the same work. So, you will fill that box controls when the GridView databinds, get the events when those controls make a PostBack and change the GridView page.

You could, also, use a WebUserControl for doing this, letting you reuse yor custom navigator and place it at any part of the Page you want to, not having to show it just on the top or bottom of the GridView.