DataGrid 单元格工具提示

引言

有很多关于工具提示的示例和文章，但我没有找到任何一个能够动态显示 DataGrid 中当前单元格的内容。 我查阅了不同的文章，最终找到了一种解决方案，想和大家分享。

本文档描述了如何使用 C# 和 JavaScript 创建动态工具提示。 在这种模式下，我们可以将当前单元格的数据显示为工具提示。 由于它将是一个可以自定义的 .NET 组件，因此我们可以根据需要更改工具提示的外观。

实现代码

有两种方法可以实现相同的功能。 如果我们需要显示为默认 Windows 工具提示，这非常简单。 只需编写下面提到的五行代码（方法 1），就足够了。 或者，如果您想要具有不同外观的自定义工具提示，请使用方法 2。

方法 1

在 ItemDataBound 方法中，添加以下代码

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;
    }
}

方法 2

以下是绑定到 DataGrid 的数据库字段。

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

因此，DataGrid 将显示所有记录以及上述字段，我们的目标是将当前单元格的数据显示为工具提示。 标题工具提示可以根据需要进行修改。

添加一个名为 pnlTooltip 的 Panel，并根据需要格式化以显示为工具提示。

标题工具提示代码

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

在 ItemCreated 事件中，添加以下代码，然后在 HTML head 标签中添加 JavaScript。

对于 DataGrid 单元格，添加 ItemDataBound 事件。

希望这能帮到你。 享受编码的乐趣。

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