vaadin-grid cellClassNameGenerator not applying class in lit-element

Flow
1

Hi,

I’m trying to build a lit-element based on vaadin-grid.
I need to apply a class to a column depending on whether the number is positive or negative.

import { LitElement, css, html, customElement, property} from 'lit-element';
import '@vaadin/vaadin-grid'

@customElement('red-grid')
class RedGrid extends LitElement {
  static get styles() {
    return css`
      .negative {
        background-color: #ff2929;
      }
      .positive {
        background-color: #16cc16;
      }
	`;
  }
  
  render() {
    return html`
	  <vaadin-grid id="grid">
	    [...]

	    <vaadin-grid-column path="credits" text-align="end" header="Credits" auto-width></vaadin-grid-column>
		[...]

	  </vaadin-grid>
	`;
  }
  
  firstUpdated(changedProperties) {
    const grid = this.shadowRoot.getElementById('grid');
    grid.cellClassNameGenerator = function(column, rowData) {
	  if (column.path === 'credits') {
	    let classes = (rowData.item[column.path]
 > 0 ? 'positive' : (rowData.item[column.path]
 < 0 ? 'negative' : ''));
		console.log(classes);
		return classes;
	  } else return '';
	};
	const columns = this.shadowRoot.querySelectorAll('vaadin-grid-column');
    columns[1]
.renderer = function (root, column, rowData) {
      root.textContent = sprintf('%0.2f', rowData.item.credits);
    };
  }
}

I’ve tried prefixing my css definition with [part~=“cell”]
, but the result is the same.

In the console I get the expected log (positive/negative), but the class is not applied to the cell.

When I inspect the cell itself, vaadin-grid-cell-content has no class applied to it.

Any idea what I’m doing wrong ?
(The renderer is working perfectly)

2

Hi!

The class names are actually not applied to the <vaadin-grid-cell-content> elements, but the <td> elements that can be found in the shadow DOM of the grid. Take a look there with the inspector to see if the classes are applied.

The problem seems to be that you are defining the styles in the scope of your <red-grid> element. So the styles will be injected into the shadow DOM of <red-grid>. Inside this element, you have <vaadin-grid> with its own shadow root, which prevents the outside styles from leaking in.

To inject the CSS into the shadow DOM of <vaadin-grid>, use the registerStyles function: https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript