Adding Tool Tips to the DataGrid Headers and Other Sections

Jul

4th

Adding Tool Tips to the DataGrid Headers and Other Sections

Author: admin | Files under Asp.net, tutorials

Introduction

When using the DataGrid, some times we have to show the tool tips to the user when he moves the mouse to a specific column / header or to a certain row. This can be accomplished by using the java script, DHTML and asp.net.

In this tutorial, I will explain the following things:

Showing tooltips on the data grid headers
Showing tool tips on the Data grid rows
Using the other HTML elements as tool tips

Tool Tips are displayed on the client / browser side, we did not have to interact with server to show them. Means, we have to write code in javascript (and using DHTML) to display the ToolTips on the browser, this can be accomplished by OnMouseOver and OnMouseOut functions.

Here, in this tutorial, I used a code snippet from the http://www.walterzorn.com/tooltip/tooltip_e.htm. This is a JavaScript, CSS and DHTML code which allows you to display the tooltips on the browser. It uses two functions called,

Tip – which shows the tool tip
UnTip – which hides the tool tip

Now, we will see how to use these functions from the asp.net in the DataGrid view.

Showing ToolTips on the Data Grid Headers

As I said earlier, we will use client side javascript code to display the Tool Tips, remember the Tip and UnTip functions, these functions are called on client side events like onmouseover and onmouseout. We add these event handlers to each TableCell corresponding to data grid headers in the ItemCreated event handler of DataGrid as follows:

private void OnItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
int idx = 0;
foreach (TableCell cl in e.Item.Cells)
{
cl.Attributes.Add("onmouseover", "Tip(" + GetHeaderTooltipText(idx.ToString()) + ");");
cl.Attributes.Add("onmouseout", "UnTip();");
idx++;
}
}
}
private string GetHeaderTooltipText(int iColIdx)
{
switch (iColIdx)
{
case 0:
return "Last name of employee";
case 1:
return "First name of employee";
case 2:
return "Employee’s title";
case 3:
return "Employee birth date";
case 4:
return "Employee’s city of residence";
default:
throw new ArgumentException("Unknown header column index", "Index");
}
}

Before using this example, then add a script block at the top of the page which implements these event handlers Tip and UnTip. If you are going to be using this technique on a lot of pages in your application then we recommend including this javascript file in every page.

In the above snippet we called, cell attributes function add () along with events (onmouseover and out) and javascript function Tip and UnTip. Here another to consider is, we retrieved the Tool tip text from the other function which is called GetHeaderTooltipText.

It is simple right!!

Showing tool tips on the Data grid rows

This section is same as the above but, instead of displaying the Tool Tips on the headers we will display on the rows. For this purpose, we use ItemDataBound function so that we can assign the Tool Tips we are bounding the data itself as follows:

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
DataSet ds = GetDataSet();
DataTable myTable = ds.Tables[0];
int i = e.Item.ItemIndex;
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string strA = "Tip(’"+ myTable.Rows[i]["Description"] + ")";
e.Item.Attributes.Add("onMouseOver",strA );
e.Item.Attributes.Add("onMouseOut","UnTip()");
}
}

In this example, we are retrieving the tool tips from the database and adding it with Tip and UnTip functions.

Using the other HTML elements as tool tips

Suppose, if you did not want to specify the tool tip directly as what we did in the previous sections, we can use the HTML elements as the ToolTips (This functionality provided by the javascript code library which I mentioned at the top of the tutorial).

Let see an example:

private void OnItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
int idx = 0;
foreach (TableCell cl in e.Item.Cells)
{
cl.Attributes.Add("onmouseover", "Tip(" + GetHeaderTooltipHtmlElement(idx.ToString()) + ");");
cl.Attributes.Add("onmouseout", "UnTip();");
idx++;
}
}
}
private string GetHeaderTooltipHtmlElement (int iColIdx)
{
switch (iColIdx)
{
case 0:
return "SpanLastname";
case 1:
return "SpanFirstname ";
case 2:
return "SpanEmployeetitle";
case 3:
return "SpanEmployeeBirthDate";
case 4:
return "SpanEmployeeCity ";
default:
throw new ArgumentException("Unknown header column index", "Index");
}
}

See the above program we modified the GetHeaderToolTip function to the GetHeaderToolTipHtmlElement because, now we returning the HTML elements ids. Do not confuse, I mean to say like, suppose, if we are using the following HTML code :

This is Last name
This is First name
……..
….
…
This is Employee City

Using the spand id above, we can show the tool tips, this can done just by passing the span id to the Tip() function. This is what we shown in the example.

Why we have to use this method and why did I explained to you, this is because, of the following advantages:

HTML content which is placed in span tags (in the above example) can easily be parsed by the web search engines. So now, the data and tool tips are also bookmarked by the search engines.
If placed conveniently in the page, the content is also available for users who have disabled JavaScript.
Optionally, the HTML element can even stay visible; for example, if you want to display its content in a tooltip at a different location.
It may be easier to define complex inner tooltip HTML directly in the HTML element to be converted, rather than in a JavaScript string.

Note: I know for the above examples there is a lot space for improvement, but, I taken them to just explain the concepts. So, if there are any considerations on the examples, please write the comments.

High On MicroSoft