GridView paging manually in Asp.net C#

Please visit my new Web Site https://coderstechzone.com

GridView paging will be required when data volume is higher. If you are using SqlDataSource control to bind a gridview control then no need to paging gridview because you will achieve it automatically. But if you use different datasource then you need to do mannual paging. To enable paging in gridview control at first set the AllowPaging="true" and also define the page size by PageSize="3". In asp.net paging is too much easy. You just need to set the NewPageIndex on the PageIndexChanging event. The ultimate output of my below example looks like:

To do the paging just add a page in your project then add a gridview control on it like below:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="3" OnPageIndexChanging="GridView1_PageIndexChanging" >
         <HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
         <RowStyle BackColor="LightGray" />
         <AlternatingRowStyle BackColor="LightGray" />
         <Columns>
             <asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
             <asp:BoundField DataField="Category Name" HeaderText="Category Name" />
             <asp:BoundField DataField="Product Name" HeaderText="Product Name" />
         </Columns>
        </asp:GridView>

Now under page load event first bind the data with the gridview and then cache the datasource which we will use to rebind when page index change. Sample code is given below:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt=clsDBUtility.GetDataTable("SELECT B.Name [Brand Name],C.Name [Category Name], " +
                    "P.Name [Product Name] FROM " +
                    "Brand B, Category C, Product P " +
                    "WHERE B.ID=P.BrandID AND C.ID=P.CategoryID Order BY 1,2,3");
            GridView1.DataSource = dt;
            GridView1.DataBind();
            Cache["Data"] = dt;
        }
    }

Now under gridview PageIndexChanging event write the below code:

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        GridView1.DataSource = (DataTable)Cache["Data"];
        GridView1.DataBind();
    }

Now run the project, hope you will get paging enabled gridview.

Note: Gridview control gives us PagerSettings tag to enrich look & feel for paging navigation. By using this PagerSettings tag you can navigate from one page to another by image or text instead of default number. To use images as your navigation just use FirstPageImageUrl, LastPageImageUrl, NextPageImageUrl, PreviousPageImageUrl properties.

Now modify your gridview control like below:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" PageSize="3" OnPageIndexChanging="GridView1_PageIndexChanging" >
         <HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
         <RowStyle BackColor="LightGray" />
         <AlternatingRowStyle BackColor="LightGray" />
         <Columns>
             <asp:BoundField DataField="Brand Name" HeaderText="Brand Name" />
             <asp:BoundField DataField="Category Name" HeaderText="Category Name" />
             <asp:BoundField DataField="Product Name" HeaderText="Product Name" />
         </Columns>

         <PagerSettings 
            Position="Bottom" 
            Mode="NextPreviousFirstLast" 
            FirstPageText="First" 
            LastPageText="Last" 
            NextPageText="Next" 
            PreviousPageText="Prev"
             />
       
        </asp:GridView>

Now you will get below output:


Keep experimenting on PagerSettings tag to give the user different look and feel. Later i will discuss on efficient paging. Until then TC.