Page 1 of 1

[ANGULAR] Gantt how to show image in column?

Posted: Thu Aug 11, 2022 9:40 am
by vbureanu

Hi guys,

I want to show image in column using URL. I have added URL for JPG image, but I don`t know how to show it inside of column cell.
Please help me with some advise :)

image_2022_08_11T07_36_45_770Z.png
image_2022_08_11T07_36_45_770Z.png (120.64 KiB) Viewed 301 times
image_2022_08_11T07_34_15_867Z.png
image_2022_08_11T07_34_15_867Z.png (75.38 KiB) Viewed 301 times

Re: [ANGULAR] Gantt how to show image in column?

Posted: Thu Aug 11, 2022 12:01 pm
by tasnim

You can use the renderer function to render anything.

Please take a look at this link:
https://bryntum.com/docs/gantt/api/Grid/column/Column#config-renderer

And to render HTML elements you need to set https://bryntum.com/docs/gantt/api/Grid/column/Column#config-htmlEncode to true

Here is a code sample of how you can achieve it:

{ text : 'Image', field : 'image', htmlEncode : false, renderer(event) {
            return event.value && `<img src="${event.value}" />`
        } },

If you want to maintain the height of the image you can set https://bryntum.com/docs/gantt/api/Grid/column/Column#config-autoHeight to true.

Good Luck :),
Tasnim


Re: [ANGULAR] Gantt how to show image in column?

Posted: Thu Aug 11, 2022 2:03 pm
by vbureanu

Thanks, Tasnim, it works!