CODEWITHSUNDEEP
javahtmlcssvaadin
pmueller
pmueller

Reputation: 143

Vaadin set background color for selected row in a grid

I'm new in vaadin development and i hope someone can help me. I just created a grid table with a model and everything works fine. But now, i want to change the background color of the selected row. I figure out, that i have to create a theme. I found this in the Vaadin Forum: https://vaadin.com/forum/thread/17867059/how-to-set-selected-row-opacity-in-vaadin-grid

This is what i have already done:

  1. I created a html class with the code from the link. I called this class grid-selection-theme.html
  2. I put this class into src/main/webapp/frontend/styles/grid-selection-theme.html
  3. In the java file with the Grid, i added the import: @HtmlImport("frontend://styles/grid-selection-theme.html);
  4. I added the theme to the grid: mygrid.addThemeName("grid-selection-theme");

Here is the code from the other thread in the forum:

<dom-module id="grid-header" theme-for="vaadin-grid">
  <template>
    <style>
        :host(:not([reordering])) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
                background-color: rgba(255, 0, 0, .50);
        }
    </style>
  </template>
</dom-module>

But it does not work.

Upvotes: 1

Views: 2206

Answers (1)

anasmi
anasmi

Reputation: 2652

This seems to work fine for me, what is your version of framework?

In case you are using Vaadin 14, you would need to place styles into .css file instead and import the file using @CSSImport

  1. My style file gridStyles.css contains:
:host([theme~="grid-selection-theme"]) [part~="row"][selected] [part~="body-cell"]:not([part~="details-cell"]) {
    background-color: red;
}

  1. Class where grid is used has this import defined:
    @CssImport(value = "./styles/gridStyles.css", themeFor = "vaadin-grid")

  2. Grid has theme name added

I've change a host selector to reflect a theme attribute: in case you have multiple grids on the same page, then style will be applied only to the one having mygrid.addThemeName("grid-selection-theme");

Output looks like this: enter image description here

Upvotes: 7

Related Questions