want to bind multiple icon images into grid cell

[RakhiS]

Hi,

This is my grid, in this, under Allowed Actions column I want to show the images of icons which ae coming from backenf in img tag like below

<img src="./assets/flex-images/Next_1.png alt="Next_1"/>&nbsp; <img src="./assets/flex-images/Review_1.png alt="Review_1"/>&nbsp

My html code:

this is string which is coming from beckend and for different rows it is different. Now the challenge I am facing is I want to show here icon in place of html content kindly help.

[Thiyagu Subramani]

Hi RakhiS, 

Thanks for contacting Syncfusion forum. 

Query : Want to bind multiple icon images into grid cell. 

 

By default in ng template the data type will be based on DataSource collections type. If the required column as string like “<img src=’..’ /> , you can get data as string in ng template also and we cannot access the data as html tags.  

To achieve your requirement we suggest you to use img tags in ng template like below. 

<e-column headerText="Employe Image"  width='150' textAlign='Center'> 

                <ng-template #template let-data> // its returns type as string only 

                        <img src={{data.image}} /> 

                        <img src={{data.image}} /> 

                </ng-template> 

            </e-column> 

Sample link :  https://stackblitz.com/edit/angular-zvdzr7-rivbcd?file=app.component.html 

(Or)  

You should convert required image as base 64 and then access the image tag. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S.   

[RakhiS]

It doesn't met my requirement. I do not have any hardcoded image they are diifferent for different grid cell as already discussed in my before requirement thread

[Thiyagu Subramani]

Hi RakhiS, 

Thanks for your update. 

Based on your reported information we suspect your requirement is need to set multiple icon images into grid cell. For this case, by default we have option for disableHtmlEncode property to achieve your requirement. So we suggest no need to use any template for your requirement and you can use your img tag as directly to the field value.  

Please refer to the below code and sample link . 

<e-column field='ShipName' headerText='Ship Country' width='120' [disableHtmlEncode]="false"></e-column> 

// you can use any html type value 

 

let data: any[] = [ 

    { 

        OrderID: 10248, Country: { CustomerID: 'VINET'}, EmployeeID: 1, OrderDate: new Date(8364186e5), 

        ShipName: "<img src ='https://ej2.syncfusion.com/demos/src/grid/images/1.png'/> ", ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', 

        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 

    }. . . . . 

] 

Sample link : https://stackblitz.com/edit/angular-zvdzr7-wy8slj?file=app.component.html 

Reference link: https://ej2.syncfusion.com/angular/documentation/api/grid/column/#disablehtmlencode 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S