We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Add image to cell getting it from WebAPI like hex or base64

Thread ID:





130380 May 10,2017 04:49 AM May 11,2017 09:08 AM Angular 1
Tags: ejTreeGrid
Asked On May 10, 2017 04:49 AM


I want to add image to my treeGrid. I am getting data from WebAPI. Image is also getting from WebAPI like hex (type - byte[]) (0x89504E470D0A....). In my treeGrid  I think it looks like base64 (iVBORw0KGgoAA....). I want it to show like image.

I am getting data from WebAPI and displaying like:

This is the response from WebAPI:

And the view is like this:

I want that in column PictureContent there will be images instead of symbols.

Is there a possibility to do that?

Jayakumar Duraisamy [Syncfusion]
Replied On May 11, 2017 09:08 AM

Hi Agne, 
Please find the response below. 
In TreeGrid, we have column template support to render custom columns. We know that HTML img tag have default support to decode base64 image source. Hence, we can use HTML img tag inside the column template to display the encoded images.  
Please refer following code snippet, 
<!--Column Template  -->     
<script type="text/x-jsrender" id="imageTemplate"> 
        <img src="data:png;base64,{{:FullName}}"> 
columns: [ 
{ field: "FullName", headerText: "Image", isTemplateColumn: true, templateID: "imageTemplate",},                    
We have prepared a sample with default image byte code in JSON object. Please find the sample location as below, 
Please let us know if you require further assistance on this. 
Jayakumar D 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.