Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1648
  • Last Modified:

Asp.net Gridview Paging

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
rflorencio
Asked:
rflorencio
1 Solution
 
Johny BravoCommented:
0
 
SAMIR BHOGAYTAFreelancer and IT ConsultantCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now