Grid TemplateRenderer selector css

Flow
1

Hello.

I have a column in a grid with the html content added by TemplateRenderer.

I need to apply a long css to a div of this html, but I can’t select this div by her class.

grdTrabalhosAndamento.setId("grdTrabalhosAndamento");
grdTrabalhosAndamento.addColumn(TemplateRenderer.<Coleta>of( "<div class=\"grafpercentOP\">[[item.codGrpMaquina]
]</div>")
													    	        .withProperty("codGrpMaquina", Coleta::getCodGrpMaquina))
													    	        .setHeader("Grafico2");

I have already tried the following selectors:

:host(#grdTrabalhosAndamento) div.grafpercentOP{
	border: red 1px solid !important;
	...
}

:host(#grdTrabalhosAndamento) vaadin-grid-cell-content div.grafpercentOP{
	border: red 1px solid !important;
	...
}

:host(#grdTrabalhosAndamento vaadin-grid-cell-content) div.grafpercentOP{
	border: red 1px solid !important;
	...
}

:host(#grdTrabalhosAndamento vaadin-grid-cell-content div.grafpercentOP){
	border: red 1px solid !important;
	...
}

:host(#grdTrabalhosAndamento) [part~="cell"]
 ::slotted(vaadin-grid-cell-content) .grafpercentOP{
	border: red 1px solid !important;
	...
}
2

Hi José,

Have you tried just using regular CSS? It doesn’t need to exist in your grid’s DOM module.

grafpercent.css

.grafpercentOP {
  ...
}

And import that using @CssImport("./styles/grafpercent.css").

3

Joacim Päivärinne:
Hi José,

Have you tried just using regular CSS? It doesn’t need to exist in your grid’s DOM module.

grafpercent.css

.grafpercentOP {
  ...
}

And import that using @CssImport("./styles/grafpercent.css").

Hi

This way the css does not affect.

I can only do it this way

grd.addColumn(TemplateRenderer.<ProgMaq>of( "<div class=\"grafpercentOP\" style=\""
																			+ "background-image:url(../images/barras.png);" +
																			"  background-size: 100%;" +
																			
																			.
																			.
																			.
																			
																			"  background-color: orange; \" >"
																	+ "[[item.percentProducao]
]"
												+ "</div>")

which is sad because the code gets very polluted.

4

Hi José,

It should work.

MainLayout.java (in root/src/main/java)

@CssImport("./styles/test.css")
public class MainLayout extends ...
	grid.addColumn(TemplateRenderer.<Test>of("<div class=\"test\">Testing</div>"));

test.css (in root/frontend/styles)

.test {
  background-color: goldenrod;
}

Result:

17942432.png

5

Joacim Päivärinne:
Hi José,

It should work.

MainLayout.java (in root/src/main/java)

@CssImport("./styles/test.css")
public class MainLayout extends ...
	grid.addColumn(TemplateRenderer.<Test>of("<div class=\"test\">Testing</div>"));

test.css (in root/frontend/styles)

.test {
  background-color: goldenrod;
}

Result:

Correct, I did this same test here and it worked.

But I found the difference of why not work in my project.

This column is from a dynamically added grid in a design view, and css does not affect.

That’s why I tested all the selectors on the first message, and haven’t found a way to make css affect.

In the image the first test is in view, the second is in main.
17943043.png