Click here to Skip to main content
Click here to Skip to main content
Go to top

DataGrid Cell Tooltip

, 3 Jun 2005
Rate this:
Please Sign up or sign in to vote.
Simple datagrid tooltip of each cell values and header tooltip

Introduction

There are a lot of examples and articles on tooltips but I didn't find any which displays the content of the current cell in a DataGrid dynamically. I have gone through different articles and at last found a solution, which I want to share with you all.

This article describes how to create a dynamic tooltip using C# and JavaScript. In this model, we can to display the current cell data as tooltip. We can change the appearance of the tooltip as we want since it's going to be a .NET component which we can customise.

Implementation code

There are two ways to achieve the same. If we need to display as default Windows tooltip, it's very simple. Just write the below mentioned five lines of code (approach 1) and that's enough. Or if you want customised tooltips with a different look, use approach 2.

Approach 1:

In the ItemDataBound method, add the following code:

if(e.Item.ItemType==ListItemType.Item || 
   e.Item.ItemType==ListItemType.AlternatingItem)
{
    for(int i=0;i<e.Item.Cells.Count;i++)
    {
        e.Item.Cells[i].ToolTip =e.Item.Cells[i].Text;
    }
}

Approach 2:

The following are the database fields which are bind to the DataGrid.

  • empid
  • empname
  • designation
  • interests
  • technology
  • location
  • remarks

So the DataGrid will display all the records with the above fields and our motivation is to display the data of the current cell as a tooltip. Header tooltip can be modified as we want.

Add a Panel name pnlTooltip and format as you want to display as tooltip.

Header tooltip code:

private string GetHeaderTooltipText(int idx)
{
    switch (idx)
    {
        case 0:
            return "Employee ID";
        case 1:
            return "Name of employee";
        case 2:
            return "Employee Designation";
        case 3:
            return "Interests";
        case 4:
            return "Technology";
        case 5:
            return "Location";
        case 6:
            return "Remarks";
        default:
            throw new ArgumentException("Unknown header column index", "Index");
    }
}

In the ItemCreated event, add the following code, then add the JavaScript in the HTML head tag.

For the DataGrid cells, add the ItemDataBound event.

Hope this helps you. Enjoy coding.

private void dgEmployee_ItemCreated(object sender, 
             System.Web.UI.WebControls.DataGridItemEventArgs e)
{
  int idx = 0;
  string tip = "";
  foreach (TableCell cl in e.Item.Cells)
  {
    tip = this.GetHeaderTooltipText(idx);
    cl.Attributes.Add("onmouseover", "ShowTooltip('" + tip + "');");
    cl.Attributes.Add("onmouseout", "HideTooltip();");
    idx++;
  }
}
<script language="javascript">
function ShowTooltip(name)
{
     document.getElementById("pnlTooltip").style.visibility = "visible";
     document.getElementById("pnlTooltip").innerText = name;
     document.getElementById("pnlTooltip").style.pixelLeft = event.clientX + 10;
     document.getElementById("pnlTooltip").style.pixelTop = event.clientY + 10;
}

function HideTooltip()
{
    document.getElementById("pnlTooltip").style.visibility = "hidden";
}
</script>
<script language="javascript">
function ShowTooltip(name) 
{
    document.getElementById("pnlTooltip").style.visibility = "visible";
    document.getElementById("pnlTooltip").innerText = name;
    document.getElementById("pnlTooltip").style.pixelLeft = event.clientX + 10;
    document.getElementById("pnlTooltip").style.pixelTop = event.clientY + 10;
} 
function HideTooltip() 
{
    document.getElementById("pnlTooltip").style.visibility = "hidden";
}
</script>
// The following code to dispaly the tooltip of each cell in the datagrid
private void dgEmployee_ItemDataBound(object sender, 
             System.Web.UI.WebControls.DataGridItemEventArgs e)
{
  if (e.Item.DataItem != null)
  {
    int idx = 0;
    foreach (TableCell tc in e.Item.Cells)
    {
      switch (idx)
      {
        case 0:
          tc.Attributes.Add("onmouseover", "ShowTooltip('" + 
                   DataBinder.Eval(e.Item.DataItem, 
                   "empid").ToString() + "');");
          break;
        case 1:
          tc.Attributes.Add("onmouseover", "ShowTooltip('" + 
                   DataBinder.Eval(e.Item.DataItem, 
                   "empname").ToString() + "');");
          break;
        case 2:
          tc.Attributes.Add("onmouseover", "ShowTooltip('" + 
                  DataBinder.Eval(e.Item.DataItem, 
                  "designation").ToString() + "');");
          break;
        case 3:
          tc.Attributes.Add("onmouseover", "ShowTooltip('" + 
                  DataBinder.Eval(e.Item.DataItem, 
                  "interests").ToString() + "');");
          break;
        case 4:
          tc.Attributes.Add("onmouseover", "ShowTooltip('" + 
                  DataBinder.Eval(e.Item.DataItem, 
                  "technology").ToString() + "');");
          break;
        case 5:
          tc.Attributes.Add("onmouseover", "ShowTooltip('" + 
                  DataBinder.Eval(e.Item.DataItem, 
                  "location").ToString() + "');");
          break;
        case 6:
          tc.Attributes.Add("onmouseover", "ShowTooltip('" + 
                  DataBinder.Eval(e.Item.DataItem, 
                  "remarks").ToString() + "');");
          break;
        default:
          break;
      }
      idx ++;
    }
    e.Item.Attributes.Add("onmouseout", "HideTooltip();");
  }
}

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Y. Shahabudeen
Web Developer
India India
I am very new to .Net. I love to learn new technologies. Reply your comments to shahabudeen@gmail.com on this article.

Comments and Discussions

 
GeneralMy vote of 1 PinmemberNasir Razzaq7-Aug-09 0:08 
Generalhash the password+stup Pinmembershideh nessari27-Dec-06 18:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 3 Jun 2005
Article Copyright 2005 by Y. Shahabudeen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid