CODEWITHSUNDEEP
cssangularag-grid-angular
Anders
Anders

Reputation: 423

HIghlighting row during runtime

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

Upvotes: 1

Views: 342

Answers (1)

Arikael
Arikael

Reputation: 2085

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

Upvotes: 1

Related Questions