Display Image in Grid

[Tomasz]

Hi, I am trying to display images in the Grid and nothing I try works. The images are stored on a database and I convert them to a base64 string in the model. If I render the image directly on the page using <img src="data:image/png;base64,@Model.First().Screenshot" /> the image shows up so I don't there is a problem with the model. However, in the grid, my client template renders  #=Screenshot# as null. Accessing other properties of the model using #=Name#, for example, renders the proper string. What am I doing wrong?

Here is my view

 

@model List<ApplicationViewModel>

<img src="data:image/png;base64,@Model.First().Screenshot" />

<div class="container-fluid">
@(Html.Kendo().Grid<ApplicationViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Name);
columns.Bound(c => c.Description);
columns.Bound(c => c.Url);
columns.ForeignKey(c => c.Category, (System.Collections.IEnumerable)ViewBag.cats, "ID", "Category");
columns.Bound(f => f.Screenshot).ClientTemplate("#:Screenshot# <img src='data: image/png; base64,#=Screenshot#' />");
columns.Command(cmd => cmd.Edit());
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ApplicationTemplate"))
.HtmlAttributes(new { style = "height:90vh; width:100%" })
.Scrollable()
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("ApplicationRead", "Admin"))
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
})
.Create(update => update.Action("CreateApplication", "Admin"))
.Update(update => update.Action("UpdateApplication", "Admin"))
.Destroy(update => update.Action("DestroyApplication", "Admin"))
))
</div>
</body>
</html>

[Stefan]

Hello, Tomasz,

I can suggest checking the following post on our forum regarding the images.

It contains details and a runnable example in the last reply:

https://www.telerik.com/forums/render-image-byte-on-kendo-templates-from-model

I hope this will help to achieve the desired end result.

Regards,
Stefan
Progress Telerik

[Tomasz]

Thank you for the reply. Turns out I was getting confused with how the Grid was retrieving the info and I wasn't populating the Screenshot field which is why it was null. Nothing was wrong with the grid.