1

I am trying to highlight a row based user input. I am using Angular 5, with ag-grid-angular 19.1.2. Setting the style with gridOptions.getRowStyle changes the background, but I would rather use scss classes if possible. The function setHighlight() is called in the html file through (change)=setHighlight()

setHighlight() {
const nextChronoId = this.getNextChronoDateId();
// this.highlightWithStyle(nextChronoId); // Working solution
this.highlightWithClass(nextChronoId);
const row = this.gridApi.getDisplayedRowAtIndex(nextChronoId);
this.gridApi.redrawRows({ rowNodes: [row]})
}

Function definitions:

  highlightWithStyle(id: number) {
  this.gridApi.gridCore.gridOptions.getRowStyle = function(params) {
  if (params.data.Id === id) {
    return { background: 'green' }
   }
  }
 }

highlightWithClass(id: number) {
this.gridApi.gridCore.gridOptions.getRowClass = function(params) {
  if (params.data.Id === id) {
    return 'highlighted'
  }
 }
}

My scss class:

/deep/ .ag-theme-balham .ag-row .ag-row-no-focus .ag-row-even .ag-row-level0 .ag-row-last, .highlighted{
 background-color: green;
}

My issue Using getRowClass does not apply my highlighted class correctly to the rowNode. After reading (and trying) this, I think that my custom scss class overwritten by the ag-classes. The same problem occurs when using rowClassRules.

Question How can I make Angular 5 and ag-grid work together in setting my custom scss class correctly?

Stepping with the debugger shows the class is picked up and appended to the native ag-grid classes.

In rowComp.js: enter image description here

Addition, screen dump from dev tools: Screen dump

Arikael
  • 1,989
  • 1
  • 23
  • 60
Anders
  • 403
  • 3
  • 17
  • just for testing: Is it applied correctly if you add `!important` to your css definition. Also `/deep/` is deprecated – Arikael Mar 12 '19 at 08:13
  • Removing /deep/ and adding !important did not fix the issue. – Anders Mar 12 '19 at 08:22
  • is your class added to the DOM and can you see in the browsers dev tools that it is present but overwritten? – Arikael Mar 12 '19 at 08:24
  • It is visible when I mouse over in dev tools, but I can not view the class under the styles pane. – Anders Mar 12 '19 at 08:42

1 Answers1

1

angular's ViewEncapsulationis the culprit here.

First be aware that all shadow piercing selectors like /deep/ or ::ng-deep are or will be deprecated.

this leaves, to my knowledge, two options.

  • use ViewEncapsulation.None
  • add your highlighted class to the global stylesheet

setting ViewEncapsulation.None brings its own possible problems: All components styles would become globally available styles.

I would advise to go with option two.

this answers sums it up pretty well.

Additionally:
.ag-theme-balham .ag-row .ag-row-no-focus .ag-row-even .ag-row-level0 .ag-row-last
this selector will never match anything, you should change it to

.ag-theme-balham .ag-row.ag-row-no-focus.ag-row-even.ag-row-level0.ag-row-last

every class after ag-theme-balham exists on the same element.
with the selector you wrote, you would denote a hierarchy.

Hope this helps

Arikael
  • 1,989
  • 1
  • 23
  • 60
  • Thank you. Additionally, I also had to remove .ag-theme-balham .ag-row.ag-row-no-focus.ag-row-even.ag-row-level0.ag-row-last, keeping only .highlighted { ... } – Anders Mar 12 '19 at 10:15