Render image (byte[]) on kendo templates from Model

4 posts, 0 answers
  1. figueiredorj
    figueiredorj avatar
    68 posts
    Member since:
    Mar 2011

    Posted 11 Dec 2012 Link to this post

    Hi.

    I am trying to render image that is brought together on Model with full object.
    I know that most people use to render action (make a new request) only for image with Id, but that seems to me too much load just to display an image.

    Is there any way that an image can be rendered with model?

    My demo with northwind has this
    @using Kendo.Mvc.UI
    @model IEnumerable<MvcApplication_KendoTest.Data.Employee>
     
    <script type="text/x-kendo-tmpl" id="template">
        <div class="employee">

        <img src="${Image}"/>
     
            <h3>${Name} ${Lastname}</h3>
          
     
        </div>
    </script>
     
    <h2>@ViewBag.Title</h2>
     
    @(Html.Kendo().ListView<MvcApplication_KendoTest.Data.Employee>(Model)
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(dataSource => {
            dataSource.Read(read => read.Action("Index", "Home"));
            dataSource.PageSize(12);
        })
        .Pageable()       
    )
    On my template I am tryig to render an image of employee. However this renders [object Object].
    Can some one help me?...

    Thanks in advance
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 13 Dec 2012 Link to this post

    Hi Ricardo,


    Please note that it's not possible to render directly byte array in html Image tag Src attribute. Possible solution is to convert the byte array to base64 string and render it in the template using DataURI scheme, however this approach has some limitations - IE7 is not supporting DataURI scheme and I would suggest to use render action(new request) for image by given Id.

    Rendering base64 image example:
    <script type="text/x-kendo-tmpl" id="template">
        <div class="employee">
     
        <img src="data:image/png;base64,${Image}"/>
      
            <h3>${Name} ${Lastname}</h3>
           
      
        </div>
    </script>


    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. figueiredorj
    figueiredorj avatar
    68 posts
    Member since:
    Mar 2011

    Posted 13 Dec 2012 Link to this post

    Hi Vladimir.

    Thanks for your response.
    If I understood you well you are saying for me to convert byte[] to string base64.

    So I have set this like:

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Lastname { get; set; }
        public byte[] Image { get; set; }
     
        public string Image64{get { return Image != null ? Convert.ToBase64String(Image) : null ; }}
    }
    And on view I define template as so:

    <script type="text/x-kendo-tmpl" id="template">
        <div class="employee">
            <img src="data:image/png;base64,${Image64}"/>
     
        <h3>${Name} ${Lastname}</h3>  
     
        </div>
    </script>
    However this haven't done the trick.
    What I am missing?

    And how would it be to setup render action on template?
    Would I have to setup a trigger?
    Note that this would be  inefficient if for each image it would have to make a request/trip to server so  my action would have to return an array. Could you develop the idea a little more?

    Perhaps this could be something that kendo could improve in future (rendering images on templates from byte[]). You must agree with me that it isn't suit for major applications aren't suited to have images on server as files. And for Grids and ListView there is for times need to display images.

    Thanks again
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 15 Dec 2012 Link to this post

    Hi Ricardo,

     
    Please note that rendering images from byte array on the client side is not directly related to KendoUI but to general knowledge - more information on the matter can be found on various resources over the internet (you can check this post for more information). Also I would suggest to store only the file paths in the DataBase instead of byte array or base64 strings.

    For convenience I created example of rendering images in the Grid from both the base64 string and byte array and attached it to the current thread. 

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready