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

（partial demo）

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

网格与工具提示

2 个答案: