Grid column classname generator not working?

Flow
1

Hi
I’m using the new classname generator of Vaadin 13 (beta2) which is described in https://github.com/vaadin/vaadin-grid-flow/issues/185 which looks like this in the code:

	column.setClassNameGenerator(item ->
			item.getIngestState() == IngestState.ERROR ? "stateColError"
			: item.getIngestState() == IngestState.UPDATED ? "stateColFinished"
			: item.getIngestState() == IngestState.FINISHED ? "stateColFinished"
			: item.getIngestState() == IngestState.PARTIAL ? "stateColWaiting"
			: null);

The purpose is to change the background color on the cell, which is loaded from a stylesheet, but that doesn’t happen. The classname generator is being called and looking at the webpage source the values shows up in an execute datastructure but it’s not clear for me how that translate to what the webbrowser shows.

2

Hi!

Injecting styles into the shadow DOM is currently a bit troublesome. You have to create an HTML file with the following content:

<dom-module id="my-grid-theme" theme-for="vaadin-grid">
  <template>
	<style>
	  [part~="cell"]
.stateColError {
		 background: red;
	  }
	  [part~="cell"]
.stateColFinished {
		background: green;
	  }
	</style>
  </template>
</dom-module>

(just two classes with background colors in this example)

Then you need to import that file with @HtmlImport("path/to/file.html") ([docs]
(https://vaadin.com/docs/flow/importing-dependencies/tutorial-importing.html)).

Unfortunately the demo for V13 which would explain this is not live yet during the beta phase.

3

Thank you Pekka, that worked like a charm.

4

Please disregard the below, I had an error on my Java class (it is so embarrassing :expressionless: ). While my styles had the class name no-settlement-row, the vaadin component was setting no-settlement-error (‘error’ instead of ‘row’ at the end) in grid.setClassNameGenerator.

The good thing in posting the issue here was that I managed to see the discrepancy

So , all working very well in Vaadin 14 as well.

Cheers!!

(I’m leaving the post below for other people if needed)

Hi everyone,

I have tried the above example which works just fine in Vaadin 13, but I can’t get it work in version 14.

According with the migration guide, the html file needs to be converted to JS, moved to another location and then imported using a different annotation. All done, but the style is not applied.

  1. With javascript module

[PROJECT]
/frontend/styles/my-styles.js

const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<dom-module id="my-style" theme-for="vaadin-grid">
	<template>
		<style>
			[part~="cell"]
.no-settlement-row {
				background-color: #FF0000;
			}
		</style>
	</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);

… and then referenced with

@JsModule(value = "./styles/my-styles.js")

I can see in the browser (Inspect element) that the style is defined and then used in the targeted cells:

<dom-module id="my-style" theme-for="vaadin-grid">
    <template>
        <style>
          	[part~="cell"]
.no-settlement-row {
                background-color: #FF0000;
            }
        </style>
    </template>
</dom-module>

<td id="vaadin-grid-cell-51" class="no-settlement-error" tabindex="-1" role="gridcell" part="cell body-cell" style="width: 100px; flex-grow: 1; order: 140000000;" ... >

… but the cells still have white background, not the red one.

  1. With CSS import

Using CSS Import still doesn’t work as expected:

my-styles.css

[part~="cell"]
.no-settlement-row {
                background-color: #FF0000;
            }

… and then injected with:

@CssImport(value = "./styles/my-styles.css", id="my-style", themeFor = "vaadin-grid")

As in JS case, the style definition is present in the grid, referenced in the targeted cells, but not applied.

While inspecting the page, I see that for a selected table cell, there is this default background being applied …

[part~="cell"]
 {

    min-height: var(--lumo-size-m);
    background-color: var(--lumo-base-color);

}

Am not sure what and where I go wrong … Could someone debug me, please? :slight_smile:

Many thanks!

Silviu