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. Image for the cookie policy date

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


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?

1 Reply

JD Jayakumar Duraisamy Syncfusion Team May 11, 2017 01:08 PM UTC

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 

Live Chat Icon For mobile
Up arrow icon