Ag-grid RowStyle with selected row

Question

I am using ag-grid 5.1.2 I've configured a getRowStyle function to set the background-color for certain items.

I've noticed that has overridden the 'selected row' color now, so when a row is selected the background will not change to indicate as such.
What is the correct way to still let highlighted row color work with the custom getRowStyle.

Here is the typescript for the rowStyle function:

self.customRowStyle = function (params: AgParams) {
  if (!params.data.isShaded) {
    return {
      "background-color": "#CEDDDD",
    };
  }
  return null;
};

Answer 1

In your CSSyou can choose not to target the selected row.

ag-Grid adds the class onto the row that is returned from your getRowStyle callback

It also adds .ag-row-selected for rows that get selected.

You can simply use CSS to only target not selected rows or even apply a different style to the rows that are both selected and have your custom class.

Here is an example:

CSS

.bg-red.ag-row:not(.ag-row-selected) {
    background-color: red ;
  }

OR different style for both selected and bg-red

.bg-red.ag-row {
    background-color: red;
  }
  
  .bg-red.ag-row.ag-row-selected {
    background-color: pink;
  }

JS

rowClassRules: {
    'bg-red': () => {
      return true; // applies class bg-red to all rows
    },
},

Here is a live running code example of this in action.

Also here is another live example that overrides row styles on click of a button, but this doesn't involve styling callbacks:

Is this what you are looking for?

Answer 2

Use the getRowClass gridOption instead of getRowStyle. Then in CSS set the appropriate styles for your background row and the brackground row when highlighted.