How to add Image column into Kendo UI Grid

Question

I have one grid like this :

@(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"))

    )

And I have one action like this for Showing image :

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

What should I write in my ClientTemplate for calling this action sending productid an showing products logo?

Answer 1

One of my colleague ran into same issue and we posted question on telerik forum Bind image path to a controller function in Kendo Grid and they responded as below.

I think instead of your controller returning a string with the URL of the image it might be easier for it to just return the image itself. Some thing like this post on stackoverlow

That way you can just have your template point the src property of the img html element to this controller action that would presumably take as parameter something to pinpoint the corresponding image file to each row element.

Answer 2

Please you can try like this...

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