Add Tooltip to paging link in asp.net GridView

Question

I have a gridview that could end up displaying about 5K records. I currently have it setup to use paging so it displays 200 records at a time. To add usability I'd like to provide the end user with some feedback that will allow them to locate a record easier. I was hoping there was a way that the user could put the mouse over one of the pager links and a tooltip would display the range of records available on the page.

For instance:

The user puts the mouse over the Page #1 link and the tooltip reads ABOTT - BUELLER The user puts the mouse over the Page #14 link and the tooltip reads MARTIN - PELLIGRINO

How would I accomplish this in ASP.NET?

Answer 1

You could do the following. First create an empty PagerTemplate:

<asp:GridView 
ID="GridView1" 
runat="server" 
AllowPaging="true" 
PagerSettings-Mode="Numeric" 
PageSize="2" ondatabound="GridView1_DataBound">
    <PagerTemplate />
</asp:GridView>

Now in response to the DataBound event you can add controls to the pager row. This code just adds the page numbers as LinkButtons.

protected void GridView1_DataBound(object sender, EventArgs e)
{
    GridViewRow pagerRow = GridView1.BottomPagerRow;

    for (int i = 0; i < GridView1.PageCount; i++)
    {
        LinkButton lb = new LinkButton();
        lb.Text = i.ToString();
        lb.ToolTip = "...";
        lb.CommandName = "Page";
        lb.CommandArgument = i.ToString();

        pagerRow.Cells[0].Controls.Add(lb);
    }

}

You'll also need to handle the PageIndexChanging event.

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex + 1;
    GridView1.DataBind();
}

Now all that remains is to work out what the ToolTip text should be. For that you'll need the indices of the top and bottom rows for every page. In this example they would be:

int topIndex = i * GridView1.PageSize;
int bottomIndex = ((i + 1) * GridView1.PageSize) - 1;