Grid View Pager Tooltip

• Download source - 1.69 KB

Introduction

I was assigned to add tooltips in the pager of gridview. I searched through piles of articles on Google, and ultimately, decided to create a user control for it. So, I created a user control having link buttons whose tooltip you can change easily. I fixed the user control to have only 10 pages at a time, and if user wants to go further, then simple next and previous functionality is provided. Though you can dynamically add the linkbuttons in the usercontrol, in that case you have to maintain the state yourself -basically you have to create the linkbuttons on each postback.

Using the Code

3.5 Framework is used here, so you need that to compile it. But you can copy the code, and put it in your earlier frameworks as none of the functions used has any compatibility problems, I hope. There is only function, apart from the default created by IDE, that we going to need-SetPageTooltip. This is the core function which does all the magic, and contains all the hideous logic, atleast that's what I think of it. There is ample scope of improvement in this -not so good-logic, so go ahead and take your chance. Now you have to add this user control in your page having the gridview, that's what you generally do with user controls. I have added one more function in the aspx page file - OnLoadComplete - which actually calls the SetPageTooltip from the page file. Now, why have I added this in OnLoadComplete? ... Because, once the gridview is totally loaded, then only, you can find the BottompagerRow from the gridview, and then using findControl and typecasting it to GvPagerTemplate, call the SetPageTooltip of the user control. If you write this in Page_load, then you will not be able to do the findcontrol() on the BottomPagerrow... give it a try. The core logic that does the tooltip, text, and visibility work:

for (i = 2; i <= renderlimit * 2; i = i + 2, pagenumber++)
{
    // for rest of the page links(except the one that was clicked)
    if ((pageindex + 1) * 2 != i)
    {
        ((LinkButton)(Ptobj.Controls[i])).ToolTip = "Click here to view records from "
        	+ (pagenumber * gridViewObj.PageSize + 1) + " to " +
        	((pagenumber + 1) * gridViewObj.PageSize);

        ((LinkButton)(Ptobj.Controls[i])).CommandArgument = (pagenumber + 1).ToString();
    }

    ((LinkButton)(Ptobj.Controls[i])).Text = (pagenumber + 1).ToString();
    ((LinkButton)(Ptobj.Controls[i])).Visible = true;
}

For reference:

pagenumber = gridViewObj.PageIndex / pagelimit * pagelimit;

Pagelimit is the configurable parameter that will be passed from page(onloadcomplete); it actually denotes the number of pages you want to show in a single shot, like, very often we keep this limit to 10.

// to create alternate pageindex for calculation
int pageindex = gridViewObj.PageIndex % pagelimit;

// for calculating pagenumbers to be shown (renderlimit)
if (gridViewObj.PageCount - gridViewObj.PageIndex < pagelimit)
{
    renderlimit = gridViewObj.PageCount % pagelimit;
    if (renderlimit == 0)
        renderlimit = pagelimit;
}
else
    renderlimit = pagelimit;

Now we are almost done, except the next and previous part.

// for showing the initial page as ...
//if pageindex is more than pagelimit
//(when ... is clicked or any page number in next page is clicked)
if (gridViewObj.PageIndex >= pagelimit)
{
    ((LinkButton)(Ptobj.Controls[0])).Visible = true;
    pagenumber = gridViewObj.PageIndex / pagelimit * pagelimit;
    ((LinkButton)(Ptobj.Controls[0])).CommandArgument =
    	pagenumber.ToString();//(gridViewObj.PageIndex).ToString();
}

The next part is:

if (renderlimit >= pagelimit && gridViewObj.PageCount >
	pagelimit)   // when accessing page after that.....
{
    // as we have taken 10 max as the link button
    if (pagelimit < 10)
        pagelimit = 10;
    ((LinkButton)(Ptobj.Controls[pagelimit * 2 + 2])).Visible = true;
    // to find the last commandargument(pagenumber) and then increase one from it
    ((LinkButton)(Ptobj.Controls[pagelimit * 2 + 2])).CommandArgument = 
					(pagenumber + 1).ToString();
}

Now we are done with all the user control coding stuff. You will find everything in the code sample. Now the page part:

protected override void OnLoadComplete(EventArgs e)
{
    // base.OnLoadComplete(e);
    if (grdur.Visible == true)
    {
        GvPagerTemplate ptobj =
        (LPDB.UserControls.GvPagerTemplate)grdur.BottomPagerRow.FindControl("gvPt");
        ptobj.SetPageTooltip(grdur, Convert.ToInt32
        	(ConfigurationSettings.AppSettings["PageLimit"]));
    }
}

Here you find the usercontrol and call its function. Furthermore, I have added a config param-PageLimit, to fix the number of pages to be shown on the grid - which you can replace by hardcoding. Anyways, max could be only 10 :-(, unless you change the code of the .ascx file, and then test it thoroughly. For the User control part, see the above attached code, that is the complete code. And for the page part, just look above. But don't forget to add the register script for the user control, and yes one more point, add this user control in the pager template part of your grid, like:

<PagerTemplate>
    <ucGvPagerTemplate:GvPagerTemplate ID="gvPt" runat="server" />
</PagerTemplate>

Feel free to bug me anytime....and yes, please do not forget to give your valuable suggestions.

History

• 4^th December, 2009: Initial version