Wednesday, December 21

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.


GridView Custom Paging Page Number

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();
}




This ends the article of gridview with custom paging

 Download the code from here:
Download Code
 Thanks

 Shibashish mohanty

7 comments:

  1. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 player

    ReplyDelete
  2. I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
    html5 player

    ReplyDelete
  3. This code is great, I converted to vb.net and works perfect. I found another solutions but very complicated. GREAT JOB!!

    ReplyDelete
  4. Thanks for viewing my post.Keep coding...

    ReplyDelete
  5. Thankyou so much ...................this post is very help full fro me

    ReplyDelete

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty