Our blazing fast Grid component built with pure JavaScript


Post by bharat95 »

Hi,

I want to show user image with name. I'm getting user image from the backend, so please help me how to display user image. Thanks in advance.


Post by tasnim »

Hi,

Would to please elaborate a bit on where and how would you like it to show?


Post by bharat95 »

hi,

below is the code for reference, I want to display image with the user's name. Also, image is getting from backend, so need help how to display.

columns: [
        {
         text: intl.formatMessage({ id: 'user' }),
          field: 'user',
          readOnly: true,
          width: 200,
        }

Post by tasnim »

Hi,

You could achieve it using a renderer function
Also, you need to set htmlEncode to false

        {
            text   : 'Name',
            field  : 'name',
            flex   : 2,
            editor : {
                type     : 'textfield',
                required : true
            },
            htmlEncode : false,
            renderer(props) {
                const { name } = props.record;
                const link = 'image-link';
                return `
                    <div style="display: flex">
                        <img src="${link}" width="50" height="50" />
                        <p style="margin-left : 20px">${name}</p>
                    </div>
                `;
            }
        }

https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-htmlEncode
https://bryntum.com/products/grid/docs/api/Grid/column/Column#config-renderer


Post by bharat95 »

Hi,

I don't have image link, instead of that I have directly image stored in property into backend and it has been passed. so how can I show that image?


Post by tasnim »

Hi,

Could you please give us a data sample that you're getting from the backend?


Post Reply