Solved

Asp.net Gridview Paging

Posted on 2013-12-02
2
1,299 Views
Last Modified: 2013-12-04
In asp.net when grid has many pages, the "sign ..." appears for ex. in right side of page numbers, to indicate he have more pages. It is possible replace ... to another character or image.

Ex: 123...
0
Comment
Question by:rflorencio
2 Comments
 
LVL 8

Expert Comment

by:johny_bravo1
ID: 39690447
0
 
LVL 11

Accepted Solution

by:
SAMIR BHOGAYTA earned 500 total points
ID: 39691779
hi.. this is your solution

While DataGrid requires additional coding for it’s paging, GridView control automatically supports paging by setting the PagerSettings property. This allows you to customize the appearance of the pager the the GridView automatically generates for you. You can set the mode of your PagerSetting to the following custom made selections


1.NextPrevious – This will render a “Next Previous” Pager on your control.
2.NextPreviousFirstLast – A set of pagination controls consisting of Previous, Next, First, and Last buttons.
3.Numeric – Sets your pagination to a 1 2 3 4 5 ….
4.NumericFirstLast – Numeric pagination (1 2 3 4 …) plus the first and last page anchor.

The fun part is customizing this pager based on your preference and requirements. You can achieve this by adding a PagerTemplate template.

In this article we will make a “DAO” like pager with a First, Previous, Next and Last Image Button and a DropDownList of the Page Number.

1. Using your favorite graphic editor (Photoshop), create four buttons that will serve as your icon for the First, Previous, Next and Last buttons.

2. Set your GridView control’s AllowPaging property to true.

3. Add a PagingTemplate inside your GridView and insert 4 ImageButton, 1 DropDownList and a Label controls which will serve as your First, Previous, Next, Last, Page No., and Page Picker of your pager.

<asp:GridView ...>
 
...
 
<pagerTemplate>
        <asp:ImageButton ID="ImageButton1" runat="server"
            ImageUrl="~/images/controls/first.gif" />
        <asp:ImageButton ID="ImageButton2" runat="server"
            ImageUrl="~/images/controls/previous.gif" />
 
Page
        <asp:DropDownList ID="ddlPages" runat="server"
            AutoPostBack="True">
        </asp:DropDownList> of <asp:Label ID="lblPageCount"
            runat="server"></asp:Label>
 
<asp:ImageButton ID="ImageButton3" runat="server"
            ImageUrl="~/images/controls/next.gif" />
        <asp:ImageButton ID="ImageButton4" runat="server"
            ImageUrl="~/images/controls/last.gif" />
 
</pagerTemplate>
 
</asp:GridView>
 

Your pager should look like this when you render the page.



4. Add an OnDataBound Event to your GridView. This will render and populate your DropDownList (for page picker) and Label (for page count) controls. Implementation can look like this.

protected void grdListings_DataBound(Object sender, EventArgs e)
{
    GridViewRow gvrPager = grdListings.BottomPagerRow;
 
    if (gvrPager == null) return;
 
    // get your controls from the gridview
    DropDownList ddlPages = (DropDownList)gvrPager.Cells[0].FindControl("ddlPages");
    Label lblPageCount = (Label)gvrPager.Cells[0].FindControl("lblPageCount");
 
    if (ddlPages != null)
    {
        // populate pager
        for (int i = 0; i < grdListings.PageCount; i++)
        {
 
            int intPageNumber = i + 1;
            ListItem lstItem = new ListItem(intPageNumber.ToString());
 
            if (i == grdListings.PageIndex)
                lstItem.Selected = true;
 
            ddlPages.Items.Add(lstItem);
        }
    }
 
    // populate page count
    if (lblPageCount != null)
        lblPageCount.Text = grdListings.PageCount.ToString();
}
 

5. Next, we implement an OnSelectedIndexChanged on our DropDownList to go to the selected page when a selection is made from our dropdown.

protected void ddlPages_SelectedIndexChanged(Object sender, EventArgs e)
{
    GridViewRow gvrPager = grdInvestors.BottomPagerRow;
    DropDownList ddlPages = (DropDownList)gvrPager.Cells[0].FindControl("ddlPages");
 
    grdListings.PageIndex = ddlPages.SelectedIndex;
 
    // a method to populate your grid
    PopulateGrid();
}
 

6. In order for you arrow buttons to work. We must implement an OnCommand event of your buttons. Before that we have to specify a CommandArgument properties to each of our buttons.


<asp:ImageButton ID="ImageButton1" runat="server"
    ImageUrl="~/images/controls/first.gif"
    CommandArgument="First" CommandName="Page" />
<asp:ImageButton ID="ImageButton2" runat="server"
    ImageUrl="~/images/controls/previous.gif"
    CommandArgument="Prev" CommandName="Page" />
 
...
 
<asp:ImageButton ID="ImageButton3" runat="server"
    ImageUrl="~/images/controls/next.gif"
    CommandArgument="Next" CommandName="Page" />
<asp:ImageButton ID="ImageButton4" runat="server"
    ImageUrl="~/images/controls/last.gif"
    CommandArgument="Last" CommandName="Page" />
 
...
 

7. Finally, the OnCommand event implementation.

protected void Paginate(object sender, CommandEventArgs e)
{
    // get the current page selected
    int intCurIndex = grdListings.PageIndex;
 
    switch (e.CommandArgument.ToString().ToLower())
    {
        case "first":
            grdListings.PageIndex = 0;
            break;
        case "prev":
            grdListings.PageIndex = intCurIndex - 1;
            break;
        case "next":
            grdListings.PageIndex = intCurIndex + 1;
            break;
        case "last":
            grdListings.PageIndex = grdListings.PageCount;
            break;
    }
 
    // popultate the gridview control
    PopulateGrid();
}
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.net show message while code is running 3 17
https://github.com/willowsystems/jSignature 11 46
tutorial for ebay api 3 32
Expression Evaluater 3 24
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now