Solved

Asp.net Gridview Paging

Posted on 2013-12-02
2
1,419 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

734 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