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

Angular 4: Displaying Image in Grid based on property value

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?



3 Replies

PK Prasanna Kumar Viswanathan Syncfusion Team 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. 

Regards, 
Prasanna Kumar N.S.V 



CC Craig Cocker August 2, 2017 06:37 PM UTC

Hi guys,

Perfect - Thank you very much



PK Prasanna Kumar Viswanathan Syncfusion Team 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. 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Live Chat Icon For mobile
Up arrow icon