Custom paging in ASP.Net GridView control

In one of my application I tried to copy the Paging style of SharePoint's ListView WebPart, so in that process I find a way to implement custom paging in ASP.Net GridView.
So this article basically describes how we can implement custom paging style in ASP.Net GridView control.


Following is the snapshot of GridView with custom paging :



HTML code for related custom paging :

<asp:GridView ID="gridView" runat="server" PageSize="5" 

    . . .

   <PagerTemplate>
                                                                                     


   <% if (gridView.PageIndex > 0) { %>

       <asp:ImageButton ID="imgBtnPrevious" runat="server" 
           Style="vertical-align: middle;" 
           ImageUrl="/_layouts/1033/images/prev.gif"
           CommandArgument="Prev" CommandName="Page" />
                                        

   <% } %>
                                                                                     

  
   <%=(gridView.PageIndex * 5) + 1%>
    - <%=(gridView.PageIndex * 5) + gridView.Rows.Count%>

  
   <% if (gridView.PageIndex != (gridView.PageCount - 1)) { %>
                                                             
         <asp:ImageButton ID="imgBtnNext" runat="server" 
           Style="vertical-align: middle;" ImageUrl="/_layouts/1033/images/next.gif" 
           CommandArgument="Next" CommandName="Page" />
                                                                                        <% } %>
                                                                                        </PagerTemplate>

    . . .

</asp:GridView> 

 
 
 
 
There are two if conditions in the above code, first to hide the left arrow image on GridView's first page and second to hide the right arrow image on GridView's last page display (by using PageIndex and PageCount).

Note : In the above code, I used the default images (left-right arrow) provided by SharePoint.



CSharp (C#) code to handle GridView RowCommand event:

void gridView_OnRowCommand(object sender, CommandEventArgs e)
{
    try
    {
        //Get the current page selected
        int intCurIndex = gridView.PageIndex;
        //Switch-Case to handle to Previous and Next paging
        switch (e.CommandArgument.ToString().ToLower())
        {
            case "prev":
                if (intCurIndex > 0)
                    gridView.PageIndex = intCurIndex - 1;
                break;

            case "next":
                if (intCurIndex < gridView.PageCount - 1)
                    gridView.PageIndex = intCurIndex + 1;
                break;
        }

        // popultate the gridview control
        DataSet dataset = getDataSet();
        //Set the DataSource of GridView and call DataBind
        gridView.DataSource = dataset;
        gridView.DataBind();
    }
    catch (Exception)
    {
        throw;
    }
}

I used following table to get the logic for writing page number (just for reference):

Index    (Index*5)+1    (Index*5)+RowCount    Final Display
0        0*5 + 1 = 1     0*5 + 5 = 5          1  - 5
1        1*5 + 1 = 6     1*5 + 5 = 10         6  - 10
2        2*5 + 1 = 11    2*5 + 5 = 15         11 - 15
3        3*5 + 1 = 16    3*5 + 5 = 20         16 - 20
4        4*5 + 1 = 21    4*5 + 5 = 25         21 - 25

 
 
Note : Here the GridView's PageSize is 5.

 
 
Reference:
Custom Paging in GridView Control