I have a simple ag-grid in an Angular project and want to disable selection of cells in one of its columns. Simply removing the default blue outline during selection would
Note that if we set
gridOption.suppressCellSelection = true
we can disable cell selection for all columns' cells.Here the question is regarding not showing a specific column's cell's highlighted border when it is selected.
You can achieve this by bit of CSS and cellClass
property of ColDef
.
You'll need to add below CSS.
.ag-cell-focus,.ag-cell-no-focus{
border:none !important;
}
/* This CSS is to not apply the border for the column having 'no-border' class */
.no-border.ag-cell:focus{
border:none !important;
outline: none;
}
And use the same class as cellClass
in ColDef
suppressNavigable: true,
cellClass: 'no-border'
Live example: aggrid-want-to-disable-cell-selection
This won't show border for the cell you even focus using mouse click.