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，他们回复如下。

我认为代替您的控制器返回带有图像URL的字符串，它可能更容易返回图像本身。像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'/>");

如何将Image列添加到Kendo UI Grid中

2 个答案: