Vaadin8 Grid - Where is setCellStyleGenerator ?

Vaadin 6 / 7 / 8
1

Hi

I am trying to set the sytle of a grid cell dynamically, based on the value of a cell in a row above it ( the grid shows a list of versions of an object and I want to highlight a cell where there is a difference with its previous version value ).
I was looking at setCellStyleGenerator as an option but it is gone in Vaadin 8 …
setStyleGenerator will not work since in the apply method, I don’t have visiblity to the rest of the grid data and cells.

Any ideas ?
Many thanks.

2

Hi,

I think you’ll need to look up the data from outside of the Grid.

-Olli

3

Thanks Oili but not sure I follow you - what do you mean “from outside the grid” ?
Can you explain more or point to an example ?

Many thanks

4

I mean, instead of looking for the previous value from the Grid in setStyleGenerator(), look for it from the DataProvider or however it is that you populate the data in your Grid.

-Olli

5

Thanks for the prompt reply - so just to make sure I understand your suggestion, in the StyleGenerator apply method,scan the relevant data in my data provider and set the style accordingly ?

6

Yep, that’s the idea!

7

Hi,
What about https://vaadin.com/docs/-/part/framework/components/components-grid.html#components.grid.stylegeneration.cell
?
Regards,
Matic

8

Matic - this is exacatly what I used, only in previous versions of Vaadin, only in earlier version a
setCellStyleGenerator
method was avaiable which inluded the cell infromation so one could traverse the grid and get other cells infromation.

Anyway, based on Olli’s direction (Thanks man ! ) I ended up with this code which seems to work fine and is not too ugly :slight_smile:


For each relevant coloumn :

grid.addColumn(ShippingHistory::getHwRevision).setCaption(“Hardware Revision”).
setStyleGenerator(new DiffStyleGenerator(ShippingHistory::getHwRevision));

grid.addColumn(ShippingHistory::getSwRevision).setCaption(“Software Revision”).
setStyleGenerator(new DiffStyleGenerator(ShippingHistory::getSwRevision));


And my style generator class :

public class DiffStyleGenerator implements StyleGenerator<ShippingHistory> {
    private Function<ShippingHistory, ?> theGetter = null;

    public DiffStyleGenerator(Function<ShippingHistory, ?> f) {
        theGetter = f;
    }
    @Override
    public String apply(ShippingHistory item) {
       
        String retVal = null;
        Long itemVer = item.getVersion();

        if (itemVer > 0) {
            ShippingHistory prevVer = allItems.get(itemVer.intValue()-1);
            if (theGetter.apply(item) != null) {
                if (!theGetter.apply(item).equals(theGetter.apply(prevVer))) retVal = "t-highlight-cell";
            }
        } 
        return retVal;
    }

}

Comments are of course welcome.

Many thanks for all your help !

9

Thank you davehel. Yesterday I solve this problem the some way.
Regards,
Matic

10

Hi,
I am facing the same problem:

I added to my mytheme.scss the following:

.v-grid-row.highlight-red {
background-color: #FF6d73;
}

And for the grid:
grid.setStyleGenerator(statusImport → {
if (!statusImport.getStatus().equals(1)) {
return “highlight-red”;
}
return null;
});

But, the row is not red…

The example at the Vaadin Book at Grid also does not work for me. Did I place my css in the wrong place?
Trying it with a column does also not work:

addColumn(StuecklistenStatusImport::getMenge).setStyleGenerator(menge → “align-right”).setCaption(“Menge”);

Any ideas?

Peter

11

My first guess is to clear the browser history as the css file is cached and won’t change unless you clear the browser cache.
My second guess is that the scss file is either not located correctly or not compiled well.
The documentation in the Vaadin book is not great, I struggled with it also.

I Ended up putting my theme folder under the resources folder ( see my theme (telco) folder structure in the attached pic ) and added a compilation goal in my maven file :



com.vaadin
vaadin-maven-plugin

-Xmx2G -Xss1024k
${basedir}/src/main/resources/VAADIN/widgetsets
${basedir}/src/main/resources
${project.build.directory}





resources
update-theme
update-widgetset
compile-theme
compile




Hope this helps !

33703.jpg

12

Hi,
I have the some problem. My solution (it works) :

.mytheme .v-grid-row-working > td {
background-color : rgba(255, 118, 0, 0.45) !important
}

and then
workOrderGrid.setStyleGenerator(wo → { return return “v-grid-row-working” });

I think the trick is background color must be on td element.
Regareds,
Matic

13

Hi davehel, Matic,
is seems, both of you are right. It was a cache issue and the > td did its job.

Thx,
Peter

14

Matic, thank you a lot!
I spend almost a day trying to implement row highlighting.
Your “> td” trick make me happy.
Wonder why this idea is not in the Vaadin book/tutorial?

15

David, i have a question, how i can paint a cell by position for example cell(a,b), thanks for your time

16

Hi,
I faced with the same issue on Vaadin 8: I just wanted to repaint cells in colors depending on cell values.
Solved it in next way(it works):

grid.addColumn(auditStatus -> {
	final StageCompletenessStatusDto stageDto = auditStatus.getStages().get(stage);
	return stageDto.getFinishedSubTasksCounter() + "/" + stageDto.getOverallSubTasksCounter();
}).setCaption(stage.name()).setStyleGenerator(auditStatus -> {
	final StageCompletenessStatusDto stageDto = auditStatus.getStages().get(stage);
	if (stageDto.getFinishedSubTasksCounter() == 0) {
		return "gray";
	}
	if (stageDto.getOverallSubTasksCounter() == stageDto.getFinishedSubTasksCounter()) {
		return "red";
	} else {
		return "yellow";
	}
});
17

The problem is Vaadin has applied !important on the v-grid-cell’s css…it overrides row’s css. Wonder why nobody told them its bad practice to use !important.