Combining css styles

Flow
1

Hello everyone!

Is it possible to combine css styles? I have a table and 4 options to color the lines and also need to variate the style of letters. For example, if the date of the record is expired and the linenumber is 42 (just an example), then its background color have to be red and the fonts’ style italic. If I am good at math, it’s about 16 different states (for example red linecolor + italic fonts, white color + bold fonts, green + italic fonts, etcetc), which could be horrible to write every little state into the scss file.

So my question:
Is it possible, to combine css classes in this way?

For example:
if(redcoloringNeeded()){
table.addStyleName(“RedRowColor”);
}
if(italicFontNeeded()){
table.addStyleName(“ItalicFont”);
}
(And when both clauses are true, the row’s background will be red and the fonts are italic.)

I haven’t tried It out yet, is there something similar way to solve this problem beautifully?

Thanks for your help!

2

Hi Tibor,

Yes you can. This is why function’s name is addStyleName and not setStyleName :wink:
Just be carefull that, obviously, there are not conflictual clauses.

Regards

3

Dear Sebastien,

Thanks for your help. In my project I implemented the CellStyleGenerator interface to set every rows’ style uniquely. Do you have any idea, how to set the style row-by-row? I think that I can’t go along with this right now.

Thanks for your help!!!

4

With grid you can do

grid.setRowStyleGenerator(new RowStyleGenerator() {
  @Override
  public String getStyle(RowReference rowReference) {
    if (<Some condition on rowReference>) {
      return "red";
    }
    return null;
  }
});

With table you can do :

            table.setCellStyleGenerator(new CellStyleGenerator() {
                @Override
                public String getStyle(Table table, Object itemId, Object propertyId) {
                     if (<Some condition on itemId or propertyId>) {
                         return "red";
                     }
                     return null;
                  }
                }
              });
        }

If it’s not working, double check you css, use some firebug to be sure.

Regards

5

Dear Sebastien,
thanks your fast reply!

I wrote something like you did, but in this way I can’t see how can I avoid to write a novel in the css file - if I understand it well, then this cellstylegenerator can return only one kind of style.

My problem is the same: if I have for example 3 different states than I need to code 9 different kind of stlyes in the css, which wouldn’t be nice and also would be harder to handle it later.

Any Idea?

Thanks for your reply,
Tibor