Angular 4: Displaying Image in Grid based on property value

[Craig Cocker]

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]

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 

[Craig Cocker]

Hi guys,

Perfect - Thank you very much

[Prasanna Kumar Viswanathan]

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