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.

Angular 4: Displaying Image in Grid based on property value

Thread ID:

Created:

Updated:

Platform:

Replies:

131830 Jul 29,2017 07:17 AM Aug 3,2017 12:25 AM JavaScript 3
loading
Tags: ejGrid
Craig Cocker
Asked On July 29, 2017 07:17 AM

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 03:07 PM

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
Replied On August 2, 2017 02:37 PM

Hi guys,

Perfect - Thank you very much


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

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 


CONFIRMATION

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.

;