How to disable selection of cells in ag-grid?
You can also use cellStyle
to remove the selection dynamically. Here is an example:
{
headerName: "Is Selectable",
cellStyle: (params) => {
if (!params.value) {
return { border: "none" };
}
return null;
},
...
},
{
headerName: "UnSelectable",
cellStyle: { border: "none" },
...
}
Live Demo
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.
You can try this css hack. no custom flags needed.
.ag-cell-focus, .ag-cell {
border: none !important;
}
Example - https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css
I'd suggest to use the suppressCellSelection
option in gridOptions. A CSS quick fix is not something that I'd suggest to go for.
this.gridOptions = {
// Your grid options here....
suppressCellSelection: true
};