?
Solved

Asp.net Gridview Paging

Posted on 2013-12-02
2
Medium Priority
?
1,516 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 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
In this video, Percona Solution Engineer Rick Golba discuss how (and why) you implement high availability in a database environment. To discuss how Percona Consulting can help with your design and architecture needs for your database and infrastr…
Suggested Courses

765 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