RE: Grid Theming ignored

You may have mixed results with these. Some of the stylenames are used by Grid internally and thus overwritten dynamically. Some style names you can use, and sometimes you need to have !important there. There are also couple of methods in Grid that can help you, both the Column and Grid have style generators (Vaadin 8, there are equivalent methods in Vaadin 7, but the API is different). With those you can set custom styles for rows and cells. Also in Vaadin 8.2+ there are separate methods to set header, row and footer row heights.

In my Vaadin prototype I created a own theme and changed the look of a couple of controls
Whereas it works fine for some control type as buttons textfields, panels…
the grid does not change its look
I tried generally change the look by .v-grid… {} and to assign explicitly the look by assigning a custom css grid.setStyleName()
Nothing happens. So I have not been able up to know for instance to change the header backbround color
or whatever. I observed similar behavior with some properties of other controls: combobox, datefield font-size

.v-grid-header {
    font-size: 25px;
    background:#f0ec84; 
    font-family:cursive;
    color : black;
    font-weight: bold;
    height: 40px; 
}

.v-grid-row
{
    font-size: 16px;
}

.v-grid-cell
{
    font-size: 11px;
    font-weight: bold;
}

.v-grid-row-selected
{
    color: red; 
}

.testgrid
{
    background:#e3fdf6; 
}

    grid.setStyleName("testgrid");

Any ideas ? Thanks for a hint

For example if you want to style Grid’s header give custom style name

Grid.getHeaderRow(rowIndex).setStyleName(“my-style”); (you may have one or more header rows)

Then you can safely address that stylename in your theme scss.

In similar fashion you can set style names with

Grid.setStyleGenerator(
styleGenerator
);

In styleGenerator you implement method apply(item) which returns stylename as String. This makes possible to have stylenames that depenedent on values of your item. This works rowvise.

Grid.getColumn(…).setStyleGenerator(…) does the same columnvise.

Hi Tatu,
I’m actually using Vaadin 8.1.6.
Styles as .v-grid-header { background: blue; } with and without the !important option in the css seem to be ignored.
A code snippet or better documentation about how to style a grid would be useful, could you please provide some ?
Thanks.

Hi Tatu,

grid.getHeaderRow(0).setStyleName(“my-style”); where .my-style is
.my-style {
color:red;
font-size:20px;
background: blue;
etc. }
works partially… Only the color is set, am I missing a detail ?