How to implement paging in gridview in ASP.NET using C#?

Introduction

In this article I will explain how to implement paging in gridview. Paging is very much helpful in case of large data. If data is large then it is not user friendly to show whole in one time. In this case we will use paging. It is very easy to implement Paging in gridview.

Implementation:

Design page:

·         Create an application and add new webpage to the application.  Now add gridview on this page.

·         Set AllowPaging Property of gridview as true.

·         Now fire OnPageIndexChanging event of the GridView.

·         By Default gridview displays 10 records per page, but we can change no of records by setting PageSize property of gridview.

<asp:GridView ID="GridView1" runat="server" PageSize="3" AllowPaging="True"

            CellPadding="4" ForeColor="#333333" GridLines="None"

            onpageindexchanging="GridView1_PageIndexChanging">

            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />

            <EditRowStyle BackColor="#999999" />

            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />

            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />

            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />

            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />

            <SortedAscendingCellStyle BackColor="#E9E7E2" />

            <SortedAscendingHeaderStyle BackColor="#506C8C" />

            <SortedDescendingCellStyle BackColor="#FFFDF8" />

            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />

        </asp:GridView>

ASP.NET Code(Using C#)

·         Create a function to get data data from database and bind it to gridview.

·         Call this function on page load after checking IsPostBack Property.

·         Now in gridview’s PageIndexChanging event write the code given below. We set the NewPageIndex property of the gridview and bind gridview again. Gridview automatically handles the internal process for displaying only the data for selected page.

public partial class pagination : System.Web.UI.Page

{

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            bindGrid(); 

        }

    }

    public void bindGrid()

    {

        DataTable dt = new DataTable();

        SqlDataAdapter adp = new SqlDataAdapter("select * from Emp_Personal", con);

        adp.Fill(dt);

        GridView1.DataSource = dt;

        GridView1.DataBind();

    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

    {

        GridView1.PageIndex = e.NewPageIndex;

        bindGrid();

    }

}