My styles are not displaying on specific cell of grid

Flow
1

I’ve created a grid and I want to apply specific style depending on value of “indice_rechazo”, it seems that class is added correctly, but the styles are not been applying. When I use “Inspect element” in my browser I can see the class applied properly, but I don’t understand why styles are not visible.

![Style is applied properly but isn’t visible]
(https://i.imgur.com/tQKjJ1j.png)

This is my code of the grid:

ArrayList<FilaReporte> operaciones = ConectandoPostgres.getReportes(fecha);
            Grid<FilaReporte> grid = new Grid<>(FilaReporte.class);
            grid.setItems(operaciones);


            grid.setColumns("descripcion", "exitosas_acumuladas", "exitosas_intervalo", "porcentaje_exito", "rechazadas_acumuladas", "rechazadas_intervalo", "porcentaje_rechazo", "indice_rechazo");
            grid.getColumnByKey("descripcion").setWidth("20%");

            grid.getColumnByKey("descripcion").setHeader("Cliente - Producto");
            grid.getColumnByKey("exitosas_acumuladas").setHeader("E. acumuladas");
            grid.getColumnByKey("exitosas_intervalo").setHeader("E. intervalo");
            grid.getColumnByKey("porcentaje_exito").setHeader("P. éxito");
            grid.getColumnByKey("rechazadas_acumuladas").setHeader("R. acumuladas");
            grid.getColumnByKey("rechazadas_intervalo").setHeader("R. intervalo");
            grid.getColumnByKey("porcentaje_rechazo").setHeader("P. rechazo");
            grid.getColumnByKey("indice_rechazo").setHeader("Indicador");

            grid.getColumnByKey("indice_rechazo").setClassNameGenerator(filaReporte -> {
                if (filaReporte.getIndice_rechazo().equals("*")) {
                    System.out.println("hola");
                    return "success-text";
                } else if (filaReporte.getIndice_rechazo().equals("+")) {
                    System.out.println("mundo");
                    return "error-text";
                }
                else {
                    System.out.println(filaReporte.getIndice_rechazo() == "*");
                    System.out.println(filaReporte.getIndice_rechazo().equals("*"));
                    return "secondary-text";
                }
            });

            add(grid);

Can someone give me any clue? Thanks in advance

2

Did you already use the @CssImport annotation to import a style for the Grid? In order for the style to take an effect, you would need to add something like the following annotation on top of one of your Routes (for example, the main view):

@CssImport(value = "./vaadin-grid-styles.css", themeFor = "vaadin-grid")
@Route("MainView")
public class MainView extends VerticalLayout {
 ...

Then under the directory {project's root}/frontend, create a vaadin-grid-styles.css (if none already exist), and then place the desired styles for the classes. For example,

.success-text {
   color:green;
}

.error-text {
   color: red;
}
3

Tarek Oraby:
Did you already use the @CssImport annotation to import a style for the Grid? In order for the style to take an effect, you would need to add something like the following annotation on top of one of your Routes (for example, the main view):

@CssImport(value = "./vaadin-grid-styles.css", themeFor = "vaadin-grid")
@Route("MainView")
public class MainView extends VerticalLayout {
 ...

Then under the directory {project's root}/frontend, create a vaadin-grid-styles.css (if none already exist), and then place the desired styles for the classes. For example,

.success-text {
   color:green;
}

.error-text {
   color: red;
}

Thanks a lot Tarek! there was my problem, I did not add the import of the styles for vaadin-grid.