Our blazing fast Grid component built with pure JavaScript


Post by jcantos »

Hi there!
We are struggling a bit with read-only columns. We mean to make our users aware of the unavailability to change the value in a graphical way, as they are used to even before we started using Bryntum Grid. However, we could not find a way to have a specific look and feel for read-only cells other than setting a custom CSS by means of creating the columns as type template. Of course, this makes us lose a lot of out-of-the box functionality you get with columns of types date or numeric that we need to program ourselves and tend to get all too complex.
Is there an alternative to accomplish a specific tale-telling appearance for non-editable columns without having to give up standard functionality to non-template column types?
Thank you!


Post by marcio »

Hey jcantos,

You can use the following snippet to add a style/class to a specific cell/row:

renderer : (renderData) => {
	// check if the column is readonly
	if (renderData.column.readOnly) {
		// Add a style to the cell element
		renderData.cellElement.style = 'color: red;';
		// Add a "custom-class" class to the cell
		renderData.cellElement.classList.add('custom-class');
		// Add a "custom-class" class to the Row
		renderData.record.cls = 'custom-class';
	}
}

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

Best regards,
Márcio


Post by jcantos »

Thanks a million, Marcio
The issue we have with the renderer is that it either paints the CSS (in our case, an icon) or the value of the cell, but we cannot make both be seen properly :(
Would you know any way to make it work in this case?


Post by mats »

Can you please show us what UI / UX you want to present to your users?


Post by jcantos »

Screenshot 2023-01-24 at 15.13.22.png
Screenshot 2023-01-24 at 15.13.22.png (5.04 KiB) Viewed 271 times

It'd be a small lock icon inside the cell to be consistent with the previous user experience; of course, the value should also be made visible (which is not shown in the example attachment)


Post by mats »

This would be easy to output in your column renderer, which can return any HTML and also set CSS classes on the cell element.


Post by Animal »

I'd probably do it in CSS so as not to have to get into every cell renderer. There'd need to be an "editable" class. Well, it's the exception, so a "not editable" class added by some part of the rendering pathway.

So you could use this in your Grid:

    rowManager : {
        callOnFunctions : true,
        onRenderCell({ column, cellElement }) {
            // Class which indicated non-editability
            cellElement.classList[column.editor ? 'remove' : 'add']('b-not-editable');
        }
    },

And this CSS:

.b-grid-cell.b-not-editable:after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    margin-inline-start: auto;
}

to get this:

Screenshot 2023-01-24 at 16.44.29.png
Screenshot 2023-01-24 at 16.44.29.png (372.94 KiB) Viewed 268 times

Post by jcantos »

This looks great, thanks a million
We shall try it out and let you know :)


Post by jcantos »

Yes, it worked with a few teaks just as we intended, thanks a lot :)


Post Reply