When a user clicks on a cell in ag-grid, it shows a blue outline on the selected cell. I'd like to change this so that the entire row gets a blue outline when any cell in the row is selected.
The below image is from this question which explains how to remove the blue selection outline from cells in a particular column.
Code for the above as pasted from the linked question is:
this.columnDefs = [
{ headerName: 'One', field: 'one' },
{ headerName: 'Two', field: 'two' },
{ headerName: 'I want no cell selection!',
field: 'three',
suppressNavigable: true,
editable: false,
}
];
I'm not a CSS whiz, but this seems like a 2-part process:
- Get rid of individual cell outlines for all columns
- Put an outline over the entire row which is selected
So...
- Is there an easy way to apply the
'no-border'
cellClass mentioned in the linked question to all rows/columns without copy-pasting'no-border'
to every single column header? - What would I modify to get the entire row to have that blue outline when it's selected?
I've looked through this answer and this rowClass documentation but it seems my CSS isn't sharp enough to implement #2 correctly. (If you need more code, please put a comment. I've got a TypeScript file that supplies GridOptions [such as suppressCellSelection: true
] to the Grid.)