带有工具提示的网格

我有一个带图像列的网格来显示是否有错误。如果这是一个错误，我想在用户将鼠标悬停在图像上时显示一条带有消息的工具提示。该消息将来自c.ErrorMessage。带有工具提示的网格

有没有关于如何做到这一点的示例？我搜索，找不到一个。

@(Html.Kendo().Grid<GridLineItem>().Name("grid").Columns(columns => 

      { 

       columns.Bound(c => c.ReportName).Title("Status").ClientTemplate(

        "# if (HasError == true) { #" + 

         "<img src='" + Url.Content("Images/error.png") + "'/>" + 

        "# } else { #" + 

          "<img src='" + Url.Content("Images/success.png") + "'/>" + 

        "# } #" 

       ); 

          )

来源

2014-01-25 Greg Gum

给你的图像需要的类别，添加错误信息作为数据属性（例如<img class='error' data-error='my error message'/>），然后添加工具提示是这样的：

$('#grid').kendoTooltip({ 
    filter: ".error", 
    content: function (e) { 
     var target = e.target; // the element for which the tooltip is shown 
     return $(target).data("error"); // get the tooltip content from the error attribute 
    } 
});

（partial demo）

来源

2014-01-25 23:54:11

由于已经很多@Lars –

我是能够使这项工作只使用标准的浏览器工具提示是这样的：

columns.Bound(c => c.ReportName).Title("").Width(25).ClientTemplate(
        "# if (HasError == true) { #" + 
         "<img style='margin-top: 5px;' src='" + Url.Content("Images/error.png") + "' title='#=ErrorMessage#'/>" + 
        "# } else { #" + 
          "<img style='margin-top: 5px;' src='" + Url.Content("Images/success.png") + "' />" + 
        "# } #"

来源

2014-01-25 23:53:54

带有工具提示的网格

回答

相关问题