Click here to Skip to main content
15,868,306 members
Articles / Web Development / HTML

How To Implement Paging in GridView Control in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.84/5 (21 votes)
9 Sep 2014CPOL1 min read 219.6K   15   13
How to implement paging in GridView Control in ASP.NET

Introduction

GridView is one of the most common tools for displaying data in a grid format in ASP.NET. When the data becomes large, paging helps the users to view chunks of data and also increases Page load time. In this post, we will see how we can implement paging in a GridView control.

So, let's dig directly into the code.

ASPX Page

  • In your Visual Studio solution, on any page drag and drop a GridView control. Let's name it as grdData.
  • Set the AllowPaging property of the GridView as true.
  • Handle the OnPageIndexChanging event of the GridView.
  • By default, GridView displays 10 records per page. If you want to modify the number of records displayed per page, set the PageSize property of GridView to your desired number. In this example, I have set this property to 5.
  • Below is the complete GridView code in aspx page:
ASP.NET
<asp:gridview ID="grdData" runat="server" 
AutoGenerateColumns="False" CellPadding="4" PageSize="5"
            ForeColor="#333333" GridLines="None" Width="200" AllowPaging="True"
            OnPageIndexChanging="grdData_PageIndexChanging">
            <alternatingrowstyle BackColor="White" ForeColor="#284775"></alternatingrowstyle>
            <columns>
                <asp:boundfield DataField="ID" HeaderText="ID"></asp:boundfield>
                <asp:boundfield DataField="Name" HeaderText="Name"></asp:boundfield>
            </columns>
            <editrowstyle BackColor="#999999"></editrowstyle>
            <footerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></footerstyle>
            <headerstyle BackColor="#5D7B9D" Font-Bold="True" 
            ForeColor="White"></headerstyle>
            <pagerstyle BackColor="#284775" ForeColor="White" 
            HorizontalAlign="Center"></pagerstyle>
            <rowstyle BackColor="#F7F6F3" ForeColor="#333333"></rowstyle>
            <selectedrowstyle BackColor="#E2DED6" Font-Bold="True" 
            ForeColor="#333333"></selectedrowstyle>
            <sortedascendingcellstyle BackColor="#E9E7E2"></sortedascendingcellstyle>
            <sortedascendingheaderstyle BackColor="#506C8C"></sortedascendingheaderstyle>
            <sorteddescendingcellstyle BackColor="#FFFDF8"></sorteddescendingcellstyle>
            <sorteddescendingheaderstyle BackColor="#6F8DAE"></sorteddescendingheaderstyle>
        </asp:gridview>

ASPX.CS Page

  • Create a new function that loads data from your data repository (database) and bind it to GridView. Let's name it as LoadGridData().
  • On Page_Load event, call the LoadGridData() after checking the IsPostback property of the page.
  • In the grdData_PageIndexChanging event, write the below code. In the below code, we are setting the NewPageIndex property of the GridView and calling the LoadGridData() function again. .NET GridView automatically handles the internal stuff for displaying only the data for the selected Page.
  • Below is the complete code from .aspx.cs page:
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        LoadGridData();
}
private void LoadGridData()
{
    //I am adding dummy data here. You should bring data from your repository.
    DataTable dt = new DataTable();
    dt.Columns.Add("Id");
    dt.Columns.Add("Name");
    for (int i = 0; i &lt; 10; i++)
    {
        DataRow dr = dt.NewRow();
        dr["Id"] = i + 1;
        dr["Name"] = "Student " + (i + 1);
        dt.Rows.Add(dr);
    }
    grdData.DataSource = dt;
    grdData.DataBind();
}
protected void grdData_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    grdData.PageIndex = e.NewPageIndex;
    LoadGridData();
}

You’re done.

Output

Page 1

Page1

Page 2

Page2

Hope you like this! Keep learning and sharing! Cheers!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Rebin Infotech
India India
A passionate developer with over 10 years of experience and building my software company code by code. Experience withMS Technologies like .Net | MVC | Xamarin | Sharepoint | MS Project Server and PhP along with open source CMS Systems like Wordpress/DotNetNuke etc.

Love to debug problems and solve them. I love writing articles on my website in my spare time. Please visit my Website for more details and subscribe to get technology related tips/tricks. #SOreadytohelp

Comments and Discussions

 
QuestionSimple and easy to use Pin
MarcusCole683330-Nov-18 10:32
professionalMarcusCole683330-Nov-18 10:32 
QuestionQuery regarding paging concept Pin
Member 1243170123-Nov-18 20:45
Member 1243170123-Nov-18 20:45 
Questionthanks Pin
Member 1243170123-Nov-18 19:52
Member 1243170123-Nov-18 19:52 
GeneralMy vote of 1 Pin
Member 1168611613-May-15 20:39
Member 1168611613-May-15 20:39 
GeneralRe: My vote of 1 Pin
Richard Deeming14-May-15 2:35
mveRichard Deeming14-May-15 2:35 
GeneralRe: My vote of 1 Pin
Nitesh Kejriwal20-May-15 23:12
professionalNitesh Kejriwal20-May-15 23:12 
GeneralMy vote of 5 Pin
Bill SerGio, The Infomercial King23-Apr-15 5:21
Bill SerGio, The Infomercial King23-Apr-15 5:21 
GeneralRe: My vote of 5 Pin
Nitesh Kejriwal23-Apr-15 7:14
professionalNitesh Kejriwal23-Apr-15 7:14 
QuestionNice article. Pin
Member 1144452115-Feb-15 22:40
Member 1144452115-Feb-15 22:40 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun9-Sep-14 23:18
Humayun Kabir Mamun9-Sep-14 23:18 
Nice...
GeneralRe: My vote of 5 Pin
Nitesh Kejriwal10-Sep-14 0:24
professionalNitesh Kejriwal10-Sep-14 0:24 
QuestionJust a thought... Pin
Wombaticus9-Sep-14 8:25
Wombaticus9-Sep-14 8:25 
AnswerRe: Just a thought... Pin
Nitesh Kejriwal9-Sep-14 18:28
professionalNitesh Kejriwal9-Sep-14 18:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.