rowClassGenerator doesn't apply the given row stylings

[flashback2k14]

hey i have the follwing markup:

<vaadin-grid id="gridWochenzeiten" class="style-grid" selection-mode="single">
            <table>
              <colgroup>
                <col name="Tag" width="70"/>
                <col name="Datum" width="90"/>
                <col name="ProduktivStunden" width="75"/>
                <col name="NichtProduktiveStunde" width="75"/>
                <col name="GesamtStunden" width="75"/>
                <col name="Mengeneinheit" width="75"/>
              </colgroup>
              <thead>
                <tr>
                  <th>Tag</th>
                  <th>Datum</th>
                  <th>IST(PRO)</th>
                  <th>IST(NPR)</th>
                  <th>IST(GES)</th>
                  <th>ME</th>
                </tr>
              </thead>
            </table>
          </vaadin-grid>

and this js code:

// color weekend rows red
        this._grid.rowClassGenerator = function(row) {
          var wochentag = row.data.Tag;
          if (wochentag === "Sa" || wochentag === "So") {
            return "style-weekend-row";
          }
          return "style-week-row";
        };

and the css:

.style-week-row {
        color: var(--primary-text-color, #000000);
      }
      .style-weekend-row {
        color: var(--light-accent-color, #ff0000);
      }

i have no clue what's wrong with this. i use v1.1.0-beta3.

[Saulis]

Are you using native Shadow or Shady DOM?

[flashback2k14]

i'm using chrome 51.0.2704.63 m and polymer 1.4. i think it's shady dom.

[tehapo]

I think you need to use a more specific selector. Try with the following selectors:

.style-week-row td span {
  color: var(--primary-text-color, #000000);
}
.style-weekend-row td span {
  color: var(--light-accent-color, #ff0000);
}

[flashback2k14]

good idea, but it doesn't work. you can see that the styling is set, but doesn't rendered.

[tehapo]

No need to add the td span part to the return value of the rowClassGenerator. You should just add the selectors to the CSS styles in order to target the span element inside the cell.

[flashback2k14]

i have removed it, but still not working.

i have played a little bit and i think the problem is that the table row use classes and the style attribute. if i manually modify the markup inside the style attribute, than the color is right.

[flashback2k14]

here is my workaround:

this._grid.rowClassGenerator = function(row) {
          var wochentag = row.data.Tag;
          if (wochentag === "Sa" || wochentag === "So") {
            return row.element.style.color = "red";
            // return "style-weekend-row";
          }
          return row.element.style.color = "black";
          // return "style-week-row";
        };

[tehapo]

Oh, now I see the problem. The styles are actually scoped and if you want to use the class name you need to target the row using the ::content pseudo-element.

vaadin-grid ::content .style-week-row {
  color: blue;
}

[flashback2k14]

Yeah, that works. :+1: I think you should add this into the documentation https://vaadin.com/docs/-/part/elements/vaadin-grid/sizing.html.

[tehapo]

Great. You're right, this should be mentioned in the documentation and we're actually going to rewrite the documentation pretty soon to me more detailed.