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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Angular 4: Displaying Image in Grid based on property value

Thread ID:





131830 Jul 29,2017 11:17 AM UTC Aug 3,2017 04:25 AM UTC jQuery 3
Tags: ejGrid
Craig Cocker
Asked On July 29, 2017 11:17 AM UTC

Hi guys,

I would like to implement the ejGrid and put a customer logo or user avatar in one of the columns in the grid.  

If I just refer to the field all I get is the string of the url showing in the grid: 

<e-column field="image" headerText="Logo" width="80" textAlign="left"></e-column>

The example and documentation for showing the actual image is as follows:  

<img style="width: 75px; height: 70px" [attr.src]="'app/Content/images/grid/Employees/' + data.EmployeeID + '.png' " [alt]="data.EmployeeID" />
I would like to do something like this image being a property containing the url to the image: 

<img style="width: 75px; height: 70px" [attr.src]="image" />
Does anyone know if this is possible and if so how to go about it?

Prasanna Kumar Viswanathan [Syncfusion]
Replied On July 31, 2017 07:07 PM UTC

Hi Craig, 

Thanks for contacting Syncfusion support.  

According to your requirement you need to put a logo in one of the columns in the grid. In this we suspect that you have string of the URL in dataSource of the grid. Using this URL you need to display the image in Grid. To achieve your requirement, use columnTemplate feature of ejGrid.  

In columnTemplate the HTML templates can be specified in the Template property of the particular column as a string (html element) or ID of the template’s HTML element. 

In this sample we have mentioned the string of the URL in the dataSource of an Grid and show the image, use JsRender syntax in the template.  
Find the code example:  

DataSource : [{ OrderID = 100, FirstName = "Nancy", EmployeeID = "/Content/Employees/1.png" }] 
.Columns(col => 
            col.Field("EmployeeID").HeaderText("Employee Image").Template("<img style='width: 75px; height: 70px' src={{:EmployeeID}} />").TextAlign(TextAlign.Center).Width(110).Add(); 

If we misunderstood your query, please get back to us. 

Prasanna Kumar N.S.V 

Craig Cocker
Replied On August 2, 2017 06:37 PM UTC

Hi guys,

Perfect - Thank you very much

Prasanna Kumar Viswanathan [Syncfusion]
Replied On August 3, 2017 04:25 AM UTC

Hi Craig, 

We are happy to hear that the provided solution has been working fine at your end. 

Please let us know if you need any further assistance. 

Prasanna Kumar N.S.V 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon