Display Image in Grid

3 posts, 0 answers
  1. Tomasz
    Tomasz avatar
    13 posts
    Member since:
    Sep 2017

    Posted 20 Nov 2017 Link to this post

    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>

  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 22 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tomasz
    Tomasz avatar
    13 posts
    Member since:
    Sep 2017

    Posted 30 Nov 2017 Link to this post

    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.
Back to Top