Custom paging in gridview with first, previous, page number, next and last

In this article I will explain how to do custom paging in gridview. One can do paging by page number, by first, by prev, by next and by last. The first and prev will be disabled when you are in first page and next and last will be disable when you are on last page.

 

 

Let's see how we can do this.

Step 1: Place script manager inside form tag.

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

Step 2: Place a gridview inside updatepanel.

 

<asp:UpdatePanel runat="server" ID="updTest">
      <ContentTemplate>
            <asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="False" OnDataBound="gvParent_DataBound" CellPadding="4"ForeColor="#333333" ShowHeader="True" DataKeyNames="EmployeeId" AllowPaging="true" PageSize="4"OnPageIndexChanging="gvParent_PageIndexChanging">
                  <Columns>
                        <asp:BoundField HeaderText="Employee Id" DataField="EmployeeId" SortExpression="EmployeeId">
                              <ItemStyle HorizontalAlign="Center" Width="140px" />
                        </asp:BoundField>
                        <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" SortExpression="EmployeeName">
                              <ItemStyle HorizontalAlign="Center" Width="140px" />
                        </asp:BoundField>
                        <asp:BoundField HeaderText="Designation" DataField="Designation" SortExpression="Designation">
                              <ItemStyle HorizontalAlign="Center" Width="140px" />
                        </asp:BoundField>
                        <asp:BoundField HeaderText="Location" DataField="Location" SortExpression="Location">
                              <ItemStyle HorizontalAlign="Center" Width="140px" />
                        </asp:BoundField> 
                  </Columns>
                  <PagerStyle HorizontalAlign="Right" />
                  <PagerTemplate>
                        <table>
                              <tr>
                                    <td>
                                          <asp:PlaceHolder ID="ph" runat="server"></asp:PlaceHolder>
                                    </td>
                              </tr>
                        </table>
                  </PagerTemplate>
                  <RowStyle BackColor="#EFF3FB" />
                  <AlternatingRowStyle BackColor="White" />
                  <HeaderStyle BackColor="Maroon" ForeColor="White" />
            </asp:GridView>      </ContentTemplate></asp:UpdatePanel>

Pager template will be used to achieve custom paging. I have placed placeholder to generated first, prev, row number, next and last paging linkbuttons.

Step 3: Place below style in the head section of the page

<style type="text/css">

      .LinkPaging      {
            width:20px;
            background-color:White;
            border: Solid 1px Black;
            text-align:center;
            margin-left:8px;
      }

</style>

Step 4: Write a method ApplyPaging which will create page numbers along with first, prev, next and last. CommandName should be Page and CommandArgument can be

"First": To navigate to first page
"Prev": To navigate to previous page
"Next": To navigate to next page
"Last": To navigate to last page
Integer Value: To navigate to specified page number

private void ApplyPaging()
{
      GridViewRow row = gvParent.BottomPagerRow;
      PlaceHolder ph;
      LinkButton lnkPaging;
      LinkButton lnkFirstPage;
      LinkButton lnkPrevPage;
      LinkButton lnkNextPage;
      LinkButton lnkLastPage;
      lnkFirstPage = new LinkButton();
      lnkFirstPage.Text = Server.HtmlEncode("<<first");
      lnkFirstPage.Width = Unit.Pixel(50);
      lnkFirstPage.CommandName = "Page";
      lnkFirstPage.CommandArgument = "first";
      lnkPrevPage = new LinkButton();
      lnkPrevPage.Text = Server.HtmlEncode("<prev");
      lnkPrevPage.Width = Unit.Pixel(50);
      lnkPrevPage.CommandName = "Page";
      lnkPrevPage.CommandArgument = "prev";
      ph = (PlaceHolder)row.FindControl("ph");
      ph.Controls.Add(lnkFirstPage);
      ph.Controls.Add(lnkPrevPage);
      if (gvParent.PageIndex == 0)
      {
            lnkFirstPage.Enabled = false;
            lnkPrevPage.Enabled = false;
      }
      for (int i = 1; i <= gvParent.PageCount; i++)
      {
            lnkPaging = new LinkButton();
            lnkPaging.Width = Unit.Pixel(20);
            lnkPaging.CssClass = "LinkPaging";
            lnkPaging.Text = i.ToString();
            lnkPaging.CommandName = "Page";
            lnkPaging.CommandArgument = i.ToString();
            if (i == gvParent.PageIndex + 1)
                  lnkPaging.BackColor = System.Drawing.Color.Pink;
            ph = (PlaceHolder)row.FindControl("ph");
            ph.Controls.Add(lnkPaging);
      }
      lnkNextPage = new LinkButton();
      lnkNextPage.Text = Server.HtmlEncode("next>");
      lnkNextPage.Width = Unit.Pixel(50);
      lnkNextPage.CommandName = "Page";
      lnkNextPage.CommandArgument = "next";
      lnkLastPage = new LinkButton();
      lnkLastPage.Text = Server.HtmlEncode("last>>");
      lnkLastPage.Width = Unit.Pixel(50);
      lnkLastPage.CommandName = "Page";
      lnkLastPage.CommandArgument = "last";
      ph = (PlaceHolder)row.FindControl("ph");
      ph.Controls.Add(lnkNextPage);
      ph = (PlaceHolder)row.FindControl("ph");
      ph.Controls.Add(lnkLastPage);
      if (gvParent.PageIndex == gvParent.PageCount - 1)
      {
            lnkNextPage.Enabled = false;
            lnkLastPage.Enabled = false;
      }
}

Step 5: Call ApplyPaging method in gvParent_DataBound and in IsPostBack of page load. Bind the gridview with datatable on !IsPostBack.

protected void gvParent_DataBound(object sender, EventArgs e){      ApplyPaging();}

protected void Page_Load(object sender, EventArgs e)
{
      if (IsPostBack)
      {
            ApplyPaging();
      }
      else
      {
            gvParent.DataSource = GetParentTableData();
            gvParent.DataBind();
      }
}

.

Step 6: The GetParentTableData method will return data to bind to gridview.

 

private DataTable GetParentTableData()
{
      DataTable table = new DataTable();
      table.Columns.Add("EmployeeId", typeof(string));
      table.Columns.Add("EmployeeName", typeof(string));
      table.Columns.Add("Designation", typeof(string));
      table.Columns.Add("Location", typeof(string));
      table.Rows.Add(100, "Andy", "S/W Engg", "NY");
      table.Rows.Add(200, "James", "S/W Engg", "NJ");
      table.Rows.Add(300, "Ramesh", "Sr. S/W Engg", "Bangalore");
      table.Rows.Add(400, "George", "Architect", "London");
      table.Rows.Add(500, "Lisa", "Manager", "Washington");
      table.Rows.Add(600, "Steve", "S/W Engg", "Kentucky");
      table.Rows.Add(700, "Mary", "S/W Engg", "NY");
      table.Rows.Add(800, "Priya", "Sr. S/W Engg", "Bangalore");
      table.Rows.Add(900, "Kelly", "Architect", "London");
      table.Rows.Add(1000, "Samantha", "Manager", "Washington");
      return table;
}

Step 7: Now we will place gvParent_PageIndexChanging method to do paging on click of page numbers or first or prev or next or last.

protected void gvParent_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
      gvParent.PageIndex = e.NewPageIndex;
      gvParent.DataSource = GetParentTableData();
      gvParent.DataBind();
}

 

Live Demo

This ends the article of gridview with custom paging