Our blazing fast Grid component built with pure JavaScript


Post by kamran812 »

We have an array in which we have status names, status_ids and colors. We are using status in status columns right now want to display the colors as a background by using the same array. Screen shot of the array and its data is attatched and also adding the code for the status column only. We want it like that example https://bryntum.com/products/grid/examples/project-summary/ I have tried this but unfortunately the background colors are not picking and showing in the status combo field.

columns : [
	{
                text : 'Status',
                field : 'status_name',
                renderer({ value }) {
                    // row.toggleCls('b-completed', value === 'Complete');
                    return {
                        class : 'badge',
                        style : {
                            backgroundColor : `var(--${statuses.colour[statuses.status.indexOf(value)]})`
                        },
                        text : value
                    };
                },
                width : '11em',
                editor : { type : 'combo', items : statuses, displayField : 'status', valueField : 'status' },
            },
]

Waiting for the reply.

Thank you

Attachments
Screenshot 2023-01-26 133840.png
Screenshot 2023-01-26 133840.png (29.52 KiB) Viewed 106 times

Post by alex.l »

Hi kamran812,

Am I right you want to apply background color to editor field?
In that case you need to tune editor and not column renderer.
There are event triggered by CellEdit feature you could use, as example https://bryntum.com/products/gantt/docs/api/Gantt/feature/CellEdit#event-beforeCellEditStart
In editorContext parameter you can find links to record and editor and tune CSS as you wish.
Check docs to see cls properties available for Combo https://bryntum.com/products/gantt/docs/api/Core/widget/Combo

All the best,
Alex


Post Reply