用工具提示网格

Question

我有一个带有图像列的网格，以显示是否存在错误。如果这是一个错误，当用户徘徊在图像上时，我想显示带有消息的工具提示。该消息将来自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") + "'/>" +
                    "# } #"
                );
                            )

Answer 1

给您的图像一个类，将错误消息添加为数据属性（例如<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
    }
});

（部分演示）

Answer 2

我只能使用标准浏览器工具提示来完成此工作：

 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") + "' />" +
                    "# } #"