如何将图像列添加到 Kendo UI 网格中

Question

我有一个这样的网格：

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        **columns.Bound(c => c.Logo).ClientTemplate();**


        columns.Bound(p => p.Title);
        columns.Bound(p => p.Category);
        columns.Bound(p => p.SupplierName);
        columns.Bound(p => p.SupplierContactName);
        columns.Bound(p => p.IsDeleted);
        columns.Bound(p => p.TimeStamp).Format("{0:yyyy/MM/dd HH:mm}").EditorTemplateName("DateTime"); ;
        //columns.Command(command => { command.Edit(); command.Destroy(); }).Width(220).Title("Command");
        //columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .Pageable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ID))
        .Read(read => read.Action("EditingCustomValidation_Read", "Product"))

    )

我有一个这样的动作来显示图片：

public FileContentResult Photo(int id)
{
    return new FileContentResult(db.Products.Find(id).Logo, "image");
}

我应该在我的 ClientTemplate 中写什么来调用此操作发送 productid 显示产品徽标？

Answer 1

我的一位同事运行遇到了同样的问题，我们在 telerik 论坛 Bind image path to a controller function in Kendo Grid 上发布了问题，他们的回复如下。

我认为与其让您的控制器 return 使用图像的 URL 字符串，不如仅 return 图像本身更容易。像 this post on stackoverlow

这样的东西

这样你就可以让你的模板将 img html 元素的 src 属性指向这个控制器动作，这个控制器动作可能会作为参数将相应的图像文件精确定位到每一行元素.

Answer 2

请你试试这样...

columns.Bound(c => c.Logo).ClientTemplate("<img src='" + Url.Content("~/ImagePath/") + "#=ImageUrl#' alt='#=Name #' Title='#=Name #' height='62' width='62'/>");

如何将图像列添加到 Kendo UI 网格中

How to add Image column into Kendo UI Grid

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc