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!
Support Forum
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
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: