Hello,
Has anyone come up with a good way to make editable columns obvious in Grids before the user double clicks the line for editting? In ‘read’ mode ( no editting allowed ), all the columns look the same, so kind of hard to tell you can edit anything, let alone which columns you can edit. I tried to look at the CSS in Chrome, but did not see anything special for the column that is editable.
Obviously, I would probably use setCellStyleGenerator, having the generator add a CSS class based on the cellReference.getColumn().isEditable(). That part seems easy. I am more asking how people set off such columns, making them standout to help their users.
Vaadin version: 7.7.13
Update:
In case anyone is wondering, technically this is how I handled it. Still waiting for feedback from the powers that be, and would love to hear if other people have a better way, especially with regards to the actual styling.
First of all, the grid related coded:
grid.setCellStyleGenerator(new CellStyleGenerator() {
@Override
public String getStyle(CellReference cell) {
if( cell.getGrid().getColumn(cell.getPropertyId()).isEditable())
{
return "editable-column";
}
return null;
}
});And now the SCSS change/addition I made:
.v-grid-cell.editable-column {
background-color: yellow;
background-image: -webkit-linear-gradient(top, #ffff88 2%, #ffff00 98%);
background-image: linear-gradient(to bottom, #ffff88 2%, #ffff00 98%);
color: black;
}