again grid theming

Flow
1

Again I’m struggling with the grid control, I already posted that most of my trials to style a grid with CSS are ignored.
I have a concrete wish:

Simply to change the header back color. :wink:

By chance after setting a padding > 0px; I discovered that the backcolor of the Entire Header is set

but hidden behind the non transparent Header Cell so nothing is visible.

Now I tried the following: To set the back Color of each HeaderCell 1:1

Unfortunatly this time it doesn’t work because g.getHeaderRow(0).getCell(“0”); is null although in Debug mode

two cell having the key “0”, “1” are available, whats wrong here ???

[size=2]
List items = new ArrayList<>();

   Buchung b = new Buchung();

    b.setId(17);

    b.setComment("1");

    items.add(b);

    b = new Buchung();

    b.setComment("2");

    b.setId(18);

    items.add(b);          

    Grid<Buchung> g = new Grid<>();

    g.setItems(items);

    g.addColumn(Buchung::getId).setCaption("BuchungsId");

    g.addColumn(Buchung::getComment).setCaption("Buchungskommentar");

    >> IDE watch show two header cells

   HeaderRow header = g.getHeaderRow(0);

   HeaderCell c1 = g.getHeaderRow(0).getCell("0"); > null exception

   HeaderCell c2 = g.getHeaderRow(0).getCell("1");

   c1.setStyleName("myGrid");

   c2.setStyleName("myGrid");

[/size]

2

This seems to be tricky one.

If you do set your custom stylename for header row

myGrid.getHeaderRow(0).setStyleName(“my-background”);

Add following to your theme .scss

.my-background {
    background-color: #20a020;
    color: white;
    font-weight: bold;
}

You would guess, it works, but it does not fully apply. The background color is overdriven by some part of the grid, you will get white bold font though.

So the Grid documentation about Valo theme is not very good. However, I managed to find the correct variable by willd guess

$v-grid-header-background-color: #20a020;

And that sets the background color of the header row, however this is a global setting that applies to all grids in your app.