GridView Pagination types in ASP.net


In this article I'm trying to explain how to display data in gridview with pagination. Using this we can display the data in page wise. Here, We learn how to perform different types of Pagination techniques.

GridView Pagination types in ASP.net:


In this article I'm trying to explain how to display data in gridview with pagination. Using this we can display the data in page wise.

Steps to follow to achieve this:



1) For this we just add new webpage to the project and add new item give a name for that as GVPagination.aspx

2) Now simply drag and drop one gridview control in design page.

3) And bind database data to gridview for this add below namespaces.


using System.Data.SqlClient; // connect with sql database
using System.Data; // using this namespace we can able to create Table classes


4) After add this namespace then just try to open a connection and fetch data from database.



SqlConnection con = new SqlConnection("DataBase=ENGSOFT;User id=sa;Password=P@ssword9");
SqlDataAdapter da;
DataTable dt;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind_GV();
}
}

protected void Bind_GV()
{

con.Open();
da = new SqlDataAdapter("select empno, ename,job,mgr,hiredate,sal,comm from emp ", con);
dt = new DataTable();
da.Fill(dt);

con.Close();
if (dt.Rows.Count > 0)
{
GV.DataSource = dt;
GV.DataBind();
}
else
{
DataRow dr = dt.NewRow();

dt.Rows.Add(dr);
dt.AcceptChanges();
GV.DataSource = dt;
GV.DataBind();
GV.Rows[0].Visible = false;
}

}


5) In above code I just try to open a sql connection and fetch data from database and store it into one datatable after that close the connection using that datatable I just try to display that datatable into gridview control.

6) Now, we try to implement pagination in gridview.

Implement Pagination:



Properties:

AllowPaging: when we implement pagination then we must set the Allowpaging property to true, this means gridview allows the paging.

PageSize: using this we can able to set the no.of records to be displayed by default in gridview.

Events:

OnPageIndexChanging- using this we can able to apply the pagination for gridview refer below sample code


<asp:GridView ID="GV" runat="server" AutoGenerateColumns="false"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white"
AllowPaging="true" OnPageIndexChanging="GV_OnPageIndexChanging" PageSize="5">


And in code behind just call the pageindex changed event after bind the grid and rebind the grid again.


protected void GV_OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GV.PageIndex = e.NewPageIndex;
Bind_GV();
}


OutPut:



1

Pagination Types:


Using pager settings property we can able to set the what type of page need to display.
There are 4 types of paging we can apply for gridview control. Those are

1) Numeric
2) NumericFirstLast
3) NextPrevious
4) NextPreviousFirstLast

Properties:

Mode : This is display type of paging to use.
PageButtonCount : To display number of pages in the paging.
FirstPageText : This will display text on the first page Button.
LastPageText : This will display text on the last page Button.
NextPageText : This will display text on the next page Button.
PreviousPageText: This will display text on the Previous page Button.

2

Numeric FirstLast:
Using this we can give paging for gridview with first and last name.


<PagerSettings Mode="NumericFirstLast" PageButtonCount="4" FirstPageText="First" LastPageText="Last" />


OutPut:



3

Numeric:
Using this we can display page in numeric fields.


<PagerSettings Mode="Numeric" PageButtonCount="4" />


OutPut:



4


Next Previous:

Using this we can display page in next previous text.


<PagerSettings Mode="NextPrevious" PageButtonCount="4"
NextPageText="Next" PreviousPageText="Previous" />


OutPut:



5


FirstPreviousNextLast:

Using this we can able to give first previous next last text while paging.


<PagerSettings Mode="NextPreviousFirstLast" PageButtonCount="4" FirstPageText="First" LastPageText="Last" NextPageText="Next" PreviousPageText="Previous" />


OutPut:



6

Source Code:




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pagination.aspx.cs" Inherits="Pagination" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div align="center">

GridView Pagination<br />
<br />
<asp:GridView ID="GV" runat="server" AutoGenerateColumns="false"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white"
AllowPaging="true" OnPageIndexChanging="GV_OnPageIndexChanging" PageSize="5">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerSettings Mode="Numeric" PageButtonCount="4" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
<Columns>
<asp:BoundField DataField="empno" HeaderText="Employee Number"
ReadOnly="true" />
<asp:BoundField DataField="ename" HeaderText="Employee Name" />
<asp:BoundField DataField="job" HeaderText="Job" />
<asp:BoundField DataField="mgr" HeaderText="Manager" />
<asp:BoundField DataField="hiredate" HeaderText="HireDate" ReadOnly="true" />
<asp:BoundField DataField="sal" HeaderText="Salary" />
<asp:BoundField DataField="comm" HeaderText="Commission" />

</Columns>
</asp:GridView>

</div>
</form>
</body>
</html>



Code Behind:




using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class Pagination : System.Web.UI.Page
{
SqlConnection con = new SqlConnection("DataBase=ENGSOFT;User id=sa;Password=P@ssword9");
SqlDataAdapter da;
DataTable dt;

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind_GV();
}
}

protected void Bind_GV()
{

con.Open();
da = new SqlDataAdapter("select empno, ename,job,mgr,hiredate,sal,comm from emp ", con);
dt = new DataTable();
da.Fill(dt);

con.Close();
if (dt.Rows.Count > 0)
{
GV.DataSource = dt;
GV.DataBind();
}
else
{
DataRow dr = dt.NewRow();

dt.Rows.Add(dr);
dt.AcceptChanges();
GV.DataSource = dt;
GV.DataBind();
GV.Rows[0].Visible = false;
}

}
protected void GV_OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GV.PageIndex = e.NewPageIndex;
Bind_GV();
}
}



Conclusion:



Using this we can easily prepare pagination for gridview control. This will help you somebody those who are looking for the same.


Attachments

  • Source Code (45210-211428-Source-Code.zip)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: