1

I'm trying to do something really simple. I'm just trying to change the background colour of my rows dynamically (the idea is to later implement this when expanding/contracting groups).

I'm currently trying to implement gridOptions.getRowClass(), but it can't seem to find my CSS. When I set a background property using getRowStyle() it works, but I need to use getRowClass() for what I plan on doing in the future with groups.

This works:

this.gridOptions.getRowStyle() = function(params) { return { background-color: 'red' } }

This does not:

this.gridOptions.getRowClass() = function(params) { return 'my-css-class' }

With CSS:

.my-css-class {
background-color: red !important;
}

The CSS is in my <style> section and the functions are in beforeMount().

Dan
  • 351
  • 4
  • 16
  • For those who are using Angular, this happens because Angular mangles the CSS class name to reduce scope, and so the class name is no longer valid and styles won't apply. You can try using ::ng-deep (deprecated, but available: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) or create a special purpose component just to expose such global styles using ViewEncapsulation.None (a great example here: https://stackoverflow.com/a/58081817/5065946) – powersource97 Jul 17 '20 at 14:06

1 Answers1

0

If you are not applying any special logic, this should work - 

this.gridOptions.rowClass = "my-css-class";

If not you can try defining gridOption configs in the grid template definition

Pratik Bhat
  • 7,166
  • 2
  • 35
  • 57
  • Hey, thanks for the answer. Unfortunately neither works (I will have some logic in the future). I'm also finding that typical styling isn't working either. I can change styling for `#AgGrid` but not for something like `.ag-cell` for instance, or `.ag-theme-material`. Any ideas? I can change styling in the browser dev tools but not in code. – Dan Dec 30 '19 at 14:30
  • I'm an idiot. It wasn't working because my style tag was scoped. I added another style tag that wasn't scoped so now I have access to inner style elements. – Dan Dec 30 '19 at 16:20
  • @Dan glad you figured it out! – Pratik Bhat Dec 30 '19 at 16:27