DataGrid Cell 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();");
  }
}