For my Angular application, I have a simple requirement of adding a CSS class when a row expands or collapses to highlight the row. I attempted to use gridOptions.getRowClass following the documentation at https://www.ag-grid.com/javascript-grid-row-styles/#gsc.tab=0, but it doesn't seem to work.
In my html, I have included an event handler that triggers a method when a row expands or collapses. Here is a snippet of the code:
<ag-grid-angular #agGrid style="width: 100%; height:85vh" class="ag-material grid-Holdings"
[gridOptions]="gridOptions"
[rowData]="rowData"
...
(rowGroupOpened)="addRowClass($event)">
</ag-grid-angular>
In my grid.component.ts file, I have the method responsible for adding or removing a CSS class:
addRowClass(params) {
this.gridOptions.getRowClass = (params) => {
if (params.node.expanded) {
return 'my-css-class';
}
}
}
Interestingly, when I set breakpoints in Chrome dev console, I notice that return 'my-css-class' is never executed. I couldn't find any explanation in the official documentation for this behavior. I'm facing challenges with ag-Grid in general, especially when integrating it with Angular. If this approach doesn't work, should I resort to using vanilla JavaScript to achieve the same result? If yes, how can I do this without relying on the ag-Grid API?