0

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.

enter image description here

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...

  1. 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?
  2. 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.)

takanuva15
  • 1,286
  • 1
  • 15
  • 27

1 Answers1

1

Okay so I can remove the selection border from all cells with this in my CSS:

::ng-deep .ag-cell:focus{
  outline: none;
}

This is the best I could do to highlight rows. It doesn't match the original outline color perfectly, but it's close enough.

::ng-deep .ag-row-focus {
  outline: skyblue solid 2px;
  outline-offset: -2px;
}

screenshot of outlined row

(not sure if the ::ng-deep will be necessary for your application)

Note: Users may not be able to copy individual cell-contents with this CSS change.

If you figure out a way to copy the exact cell outline color shown in the image in the question, please share. Apparently it may have something to do with Chrome according to this Github issue.

takanuva15
  • 1,286
  • 1
  • 15
  • 27