Hey all, I’m trying to style rows in a Grid but the background-color in the CSS does not seem to be working. Here’s the code:

// Create a grid
Grid grid = new Grid();

grid.setRowStyleGenerator(new RowStyleGenerator() {
public String getStyle(RowReference rowReference) {
if (rowReference.getItem().getItemProperty(“name”).getValue().equals(“Galileo Galilei”)) {
return “red”;

return null;


// Define some columns
grid.addColumn(“name”, String.class);
grid.addColumn(“born”, Integer.class);
grid.addColumn(“date”, LocalDateTime.class);

// Add some data rows
grid.addRow(“Nicolaus Copernicus”, 1543,;
grid.addRow(“Galileo Galilei”, 1564,;
grid.addRow(“Johannes Kepler”, 1571,;

[/code]And the CSS is pretty straight forward: { background-color: red; font-weight: 400; } The font-weight appears to work correctly, but the row color doesn’t change. What am I missing?

Here’s a screen shot, if that helps, showing the bolded text but lacking a red background.

try this > .v-grid-cell{
background-color: red;
font-weight: 400;

That worked - thanks!

I have a similar problem, but in my case, if I use your trick, the entire row is correct except for one special Cell that needs to be different. How can I give the cell priority over the row if I use the above CSS trick?

Here is how the CSS looks in my browser window:


.mobiwms .v-table-row-copied-barcode, .mobiwms .v-grid-row.copied-barcode > .v-grid-cell {
    font-weight: bold;
    background-color: LightGreen;
.mobiwms .v-grid-cell.importantyellow {
    font-weight: bold;
    color: yellow;
.mobiwms [class*="importantyellow"]
, .mobiwms .v-grid-cell.importantyellow {
    font-weight: bold;
    color: yellow;
    background-color: #f08080;

And here is how it looks. The second line cell with “Issued Order to Supplier” should be the same color cell directly above it.


I got around the issue by not setting the RowStyle, just mimicing row style for each cell. Not ideal, but it does work. If anyone has an idea on how to fix it in RowStyle with CSS, that would be great.