Multiple images in a grid cell

[Alberto Bonfiglio]

Hello,

i have a grid that displays some product details. One of the cells is an array of image names (eg. img1.jpg, img2.webp).

I would like to display the product images in the cell as thumbnails instead of strings.

[Hariharan J V]

Hi Alberto, 

 

Thanks for contacting Syncfusion support. 

 

Query: I have a grid that displays some product details. One of the cells is an array of image names (eg. img1.jpg, img2.webp). I would like to display the product images in the cell as thumbnails instead of strings. 

 

We have validated your query and you can achieve your requirement by using below method. Here, we have achieved your requirement by using column template. Please find the below code example for your reference. 

 

[code example] [columntemplate.html] 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data'> 

        <e-columns> 

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

                <ng-template #template let-data> 

                  <td> 

                    <div class="image"> 

                        <img src="https://ej2.syncfusion.com/angular/demos/src/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}"/> 

                    </div> 

                  </td> 

                  <td> 

                    <div class="image"> 

                        <img src="https://ej2.syncfusion.com/angular/demos/src/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}"/> 

                    </div> 

                  </td> 

                </ng-template> 

            </e-column> 

            <e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column> 

            ... 

            ... 

        </e-columns> 

    </ejs-grid> 

</div> 

 

We have prepared a simple sample based on your requirement. Please find the sample in below link. 

 

Sample link: https://stackblitz.com/edit/angular-orrlbx-dnviww?file=columntemplate.html 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns.html#column-template 

Please get back to us if you need further assistance. 

Regards, 

Hariharan 

[Alberto Bonfiglio]

Fantastic! Thanks!

I also have another question.

In my grid i use a dialog to edit the product values. I have inserted an uploader to upload pictures. I would also like to have a mechanism in the dialog like a dropdown to view and remove any previously uploaded pictures. This is my code so far:

<e-column field= "pictures" headerText="Images" [edit]='dpUploader' width="150">

<ng-template #template let-data>

<td *ngFor="let p of data.pictures">

<div class="image" >

<img src="assets/images/products/{{p}}" alt="{{data.name}}"/>

</div>

</td>

</ng-template>

</e-column>

[Venkatesh Ayothi Raman]

Hi Alberto, 

We suggest you to use the “Cell Edit Template” feature of Grid. Please refer the documentation link below, 

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/edit.html#cell-edit-template 

Here we have bind the uploader component to the editing Dialog of Grid. Please refer the code example and sample link below, 

[html] 

 

    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            ... 

            <e-column field='ShipCountry' headerText='Ship Country' width='150' [edit]='dpParams'></e-column> 

        </e-columns> 

    </ejs-grid> 

 

[ts] 

 

        this.dpParams = { 

            create: () => { 

                this.elem = document.createElement('input'); 

                return this.elem; 

            }, 

            read: () => { 

                return this.uploaderObj.value; 

            }, 

            destroy: () => { 

                this.uploaderObj.destroy(); 

            }, 

            write: (args: { rowData: Object, column: any }) => { 

                this.uploaderObj = new Uploader({ 

                     autoUpload: false 

                }); 

                this.uploaderObj.appendTo(this.elem); 

            } 

        }; 

 

 

Sample : https://stackblitz.com/edit/angular-srzcxu?file=normal-edit.component.ts 

 

 

Screenshot: 

 

Also please find the uploader component documentation link below, 

Documentation : https://ej2.syncfusion.com/documentation/uploader/getting-started.html?lang=typescript 

Please get back to us if you need further assistance. 

 

Regards, 

Venkatesh Ayothiraman.