Display binary image in Kendo grid

Question

I'm trying to display images saved in database in my Kendo grid.

@(Html.Kendo().Grid<DevelopmentNotesProject.Models.NoteForm>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(c => c.Title).Width(420).ClientTemplate(string.Format("{0}...", "#= formatter(Title) #"));
    columns.Bound(c => c.Text).Width(900).ClientTemplate(string.Format("{0}...", "#= formatter(Text) #"));
    columns.ForeignKey(p => p.languageId, (System.Collections.IEnumerable)ViewData["lang"], "Id", "Name").Title("Language").Width(140).EditorTemplateName("LangDropDown");
    columns.Bound(c => c.img); <-- THIS returns object [object]
    columns.Command(command => { command.Edit(); command.Destroy(); });

})

PS:The column type in my table is Varbinary(MAX)

My model looks like this:

[Table("note")]
    public class NoteForm
    {
        [Required]
        [Display(Name = "Title")]
        public string Title { get; set; }

        [Required]
        [Display(Name = "Text")]
        public string Text { get; set; }

        [Required]
        [Display(Name = "Language")]  
        public int languageId { get; set; }
        [ForeignKey("languageId")]
        [UIHint("LangDropDown")]
        public virtual Language language { get; set; }

        [Display(Name = "Photo")]  
        public byte[] img { get; set; }


        [Key]
        [System.Web.Mvc.HiddenInput(DisplayValue = false)]
        public int id { get; set; }

        [System.Web.Mvc.HiddenInput(DisplayValue = false)]

        public int userId { get; set; }


    }

How can i achieve this please ? Thanks in advance for your help.

You could convert your image to Base64 and use `ClientTemplate` as in [this example](http://stackoverflow.com/questions/25014428/kendo-grid-image-column). — Andrei V, May 12 '15 at 12:10
i tried this : columns.Bound(c => c.img).ClientTemplate(""); But this line appears in the HTML generated : — FieryA, May 12 '15 at 12:36
http://www.telerik.com/forums/render-image-byte-on-kendo-templates-from-model — Jayesh Goyani, May 12 '15 at 12:41
Thank you Jayesh. I tried everything that is written on this page and i have the following error while trying to load the page: Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property. — FieryA, May 12 '15 at 13:05

score 2 · Answer 1 · answered Jul 22 '15 at 10:30

this works for me: first add a property to convert byte array to string like shown in above link

public string Image64{get { return Image != null ? Convert.ToBase64String(Image) : null ; }}

second when reading records set the MaxJsonLength

    var people= Json( _repository.Employees, JsonRequestBehavior.AllowGet );
    people.MaxJsonLength = int.MaxValue;          

    return people ;

third have a clienttemplate for your bound field

columns.Bound( employee=> employee.Image64).ClientTemplate( "<img src='" + "data:image/gif;base64,#=Image64#'" ).Title( "Photo" );

Display binary image in Kendo grid

1 Answers1