Premium support for our pure JavaScript UI components


Post 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 295 times
image_2022_08_11T07_34_15_867Z.png
image_2022_08_11T07_34_15_867Z.png (75.38 KiB) Viewed 295 times

Post 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


Post by vbureanu »

Thanks, Tasnim, it works!


Post Reply