how to change row color of table in vaadin at the AddeEvent

Vaadin 6 / 7 / 8 Framework UI
1

I have a table and im using the addItem Method to add items , what i want to do is at the moment of adding a new item i have to make some tests and set the color of the added row.

For example the resutlt of test is 1 then row color should be Red , and if the result is 2 row color should be green.

So any help how to do this ?

2

Hi,
To change the style of a cell, you need to use a
CellStyleGenerator
. There is no way to only style items added by “Table#addItem” - it’s all or nothing.

Here’s an example (based on the book of vaadin), that highlights the rows that a firstname that starts with “G” in green, or that have “a” in the firstName in red.

Note the CSS has to cope with even and odd rows, in order

Cheers,

Charles.

/* Create the table with a caption. */
    final Table table = new Table("This is my Table");

    /* Define the names and data types of columns.
     * The "default value" parameter is meaningless here. */
    table.addContainerProperty("First Name", String.class, null);
    table.addContainerProperty("Last Name", String.class, null);
    table.addContainerProperty("Year", Integer.class, null);

    /* Add a few items in the table. */
    table.addItem(new Object[]{"Nicolaus", "Copernicus", 1473}, 1);
    table.addItem(new Object[]{"Tycho", "Brahe", 1546}, 2);
    table.addItem(new Object[]{"Giordano", "Bruno", 1548}, 3);
    table.addItem(new Object[]{"Galileo", "Galilei", 1564}, 4);
    table.addItem(new Object[]{"Johannes", "Kepler", 1571}, 5);
    table.addItem(new Object[]{"Isaac", "Newton", 1643}, 6);

    table.setCellStyleGenerator(new Table.CellStyleGenerator() {
      @Override
      public String getStyle(Object itemId, Object propertyId) {
        if (propertyId == null) {
          // Styling for row
          Item item = table.getItem(itemId);
          String firstName = (String) item.getItemProperty("First Name").getValue();
          if (firstName.toLowerCase().startsWith("g")) {
            return "highlight-green";
          } else if (firstName.contains("o")) {
            return "highlight-red";
          } else {
            return null;
          }
        } else {
          // styling for column propertyId
          return null;
        }
      }
    });

CSS

.v-table-row.v-table-row-highlight-green,
.v-table-row-odd.v-table-row-highlight-green {
  background-color: #00ff00;
}

.v-table-row.v-table-row-highlight-red,
.v-table-row-odd.v-table-row-highlight-red {
  background-color: #ff0000;
}

12302.png

3

Hey Thanks for reply , this is really what i want i tried the same example but nothing happen to the rows color maybe i didnt put the css in the right file !! :

First thing the getStyle Method it’s not @Override !! im using vaadin 6.7.4

Second thing im using the reindeer themes and the css file (VAADIN/themes/reindeer/style.css) looks :

@CHARSET “ISO-8859-1”;

@import “…/reindeer/styles.css”;

.v-table-row.v-table-row-highlight-green,
.v-table-row-odd.v-table-row-highlight-green {
background-color: #00ff00;
}

.v-table-row.v-table-row-highlight-red,
.v-table-row-odd.v-table-row-highlight-red {
background-color: #ff0000;
}

4

To customise CSS, you need to create your own theme, and ensure that you are doing setTheme() in your application.

Are you sure that your theme/CSS file is being used at all?

5

THANKS IT WORKS , the problem was just the css file i named style.css and it should be styles.css

6

Does it exist an way to change the row color dynamically? I’d like to mark edited rows, but can’t manage how to do that.
When using CellStyleGenerator, the row color is changed when rolling down/up through the table. When adding a style name in text change listener the color is forgotten, when rolling down and up through the table. I would need to change the color immediately and have it all the time.

7

No idea?

8

Hi Agata!

Try to use table.refreshRowCache().

Alex

9

Thanks works :-). As well as markAsDirtyRecursive(). What is better from the point of performance/memory consumption?

10

I would guess that refreshrowcache is better as it should only refresh the rows which changed and not rerender the entire table like markAsDirtyRecursive does. You should generally avoid using markAsDirty as it shouldn’t normally be necessary in a normal Vaadin App as there should (nearly) always be a better workaround for a problem where markAsDirty works.

11

Edit: nevermind your above code works fine :slight_smile:

12

Hi All,
I followed steps which you have posted above. I am unable to change the color of row in filtertable of vaadin.
Can any one please help me in this?

Thanks,
Kishore

13

Have you compiled modified theme?

14

where shall i paste the css code ? in which file ?

15

You must add your style code in a SCSS file. Then, compile your Theme.

16

Hi all,

I have implemented highlighting in the filterTable, and we can save the state of the table such as re ordering table columns or hiding columns.
But after saving state highlighting is not working
Please help…