如何在 Kendo Grid 单元格上将图标显示为值？答案

【问题标题】：How to display icon as a value on a Kendo Grid cell?如何在 Kendo Grid 单元格上将图标显示为值？
【发布时间】：2015-08-25 22:36:39
【问题描述】：

我有一个名为 Priority 的表，它有一个名为 IconUrl 的列，用于存储图标的路径，如下所示：

| ID     | Priority      | IconUrl       
------------------------------------------------------------| 
| 0      | Normal        | /../../Content/icons/normal.png  |
| 1      | Urgent        | /../../Content/icons/urgent.png  |
| 2      | Blocker       | /../../Content/icons/blocker.png |

我想根据 Kendo Grid 上每条记录的 IconUrl 值显示图标。我尝试了如下所示的一些方法，但都没有解决问题。如何设法只显示图标图像？

columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("~/") + "#=IconUrl#' height='62' width='62'/>");

或

columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("#=Model.IconUrl#") + "'/>'");

【问题讨论】：

标签： asp.net-mvc image datagridview kendo-grid kendo-asp.net-mvc

【解决方案1】：

问题可能是由您网址开头的'/../../' 引起的。

打开你的浏览器开发者工具，查看单元格可以看到有什么url。

如果您的内容文件夹位于您的主目录或项目目录中，则使用 Priority col 中的文本重新创建 url 可能会起作用。

columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("~/Content/icons/") + "#=Priority.toLowerCase()#.png' height='62' width='62'/>");

Url.Content function is used to map virtual paths。例如，在其他应用程序中拥有应用程序。如果传递给函数的字符串开头没有波浪号，它将只返回未更改的 url 字符串。

所以在第二个示例中调用 "<img src='" +Url.Content("#=IconUrl#") + "'/>'" 将产生与 <a src='#=IconUrl#'> 相同的结果

【讨论】：

实际上问题是由 html 中的语法引起的，而不是 /../../ （我已经尝试过几种形式）。因此，可以使用columns.Bound(c => c.PriorityDescription).ClientTemplate(@"<div class='grid-icon' style='background-image: url(#:data.IconUrl#);'></div>").Width("40px"); 显示图标，非常感谢。投票+。

【解决方案2】：

正如 Telerik 页面上Grid / Basic usage 中提到的，您可以显示如下所示的图像：

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.PriorityDescription)
           .ClientTemplate(@"<div class='grid-icon' style='background-image: 
                url(#:data.IconUrl#);'></div>").Width("40px");
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Customers_Read", "Grid"))
    )
)


<style>
.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    margin-left: 5px;
}

.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}
</style>

希望这会有所帮助...

【讨论】：