Grid Format

Vaadin 6 / 7 / 8
1

Hello,

how can I change the font color of the first column in a grid.
Independent of the column name and the format of the column Header

Vadin 7.7.4

Patrick

2

Hi,

you can use a CellStyleGenerator to do that. The CellReference object you get in the input of the getStyle method contains a PropertyId, which you can use to check if the column is the one you want. Something like this:

CellStyleGenerator csg = new CellStyleGenerator() {
  @Override
  public String getStyle(CellReference cell) {
    if ("MY_FIRST_COLUMN_ID".equals(cell.getPropertyId()) {
      return "first-column-style";
    }
    return "";
  }
}
grid.setCellStyleGenerator(csg);

Hope this helps,
Olli

3

Hi Olli,

Thank you for your help. It works fine for one datasource!

Another question.
How do I get the name of the first column (“MY_FIRST_COLUMN_ID”)?
I use the grid for several datasources.

Thanks
Patrick

4

There are several ways about it. You could use the same property ID for each Grid. You could take the first Column returned in the Grid.getColumns() list and ask for the property id. You could set it to some field that you set when you initialize the grid for each datasource.

-Olli

5

Hi Olli,


Perfect :slight_smile:

[size=3]
here is my method

private void setStyle() {
    UI.getCurrent().getPage().getStyles().add(".gridwithcolor  {  color:  #0072B5;   text-align: left; }");
    UI.getCurrent().getPage().getStyles().add(".gridwithcolor:hover  {  color: red;   text-align: left; }");

    
    CellStyleGenerator csg = new CellStyleGenerator() {
      private static final long serialVersionUID = 1L;

      @Override
      public String getStyle(CellReference cell) {
        String column = grid.getColumns().get(0).getPropertyId().toString();
        if (column.equals(cell.getPropertyId())) { 
          return "gridwithcolor";
        }
        return "";
      }
    };
    grid.setCellStyleGenerator(csg);
  }

Thanks
Patrick Lange
[/size]

6

Looks good. I suggest you move the dynamic styles to a .(S)CSS file, though, unless you have some kind of live style editing possibility. Otherwise you’ll end up adding the same style to your document over and over again, which will increase in size.

-Olli