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 also be fine. I just want no visual change to the cell when the user clicks inside it. How can I do this?
I see that ColDef
has a property suppressNavigable
that sort of helps, since it disallows using the tab key to select the cells, but it still allows selection by clicking. Also, the grid itself seems to offer suppressCellSelection
but it doesn't seem granular enough and doesn't seem to affect anything anyway.
So, how can I remove this blue border cell selection?
Here's the code I have for these column definitions:
this.columnDefs = [
{ headerName: 'One', field: 'one' },
{ headerName: 'Two', field: 'two' },
{
// I want to disable selection of cells in this column
headerName: 'I want no cell selection!',
field: 'three',
suppressNavigable: true,
editable: false,
}
];
Here's a stackblitz example I was using to test with.
Here's a screenshot of the blue border I don't want to see in this column:
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.
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
};
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
Try this one it's work for me
::ng-deep .ag-cell-focus,.ag-cell-no-focus{
border:none !important;
}
::ng-deep .no-border.ag-cell:focus{
border:none !important;
outline: none;
}
You can also usecellStyle
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" },
...
}
You can try this, If you want to apply it over all the cells. It worked for me.
.ag-cell-focus,.ag-cell-no-focus{
border: 1px solid transparent !important;
}
::ng-deep .ag-cell:focus{
border: 1px solid transparent !important;
outline: none;
}
AG Grid supports customizing CSS variable for most themes. Try defining the selection border color on the grid container or any parent.
--ag-range-selection-border-color: transparent;
Simple add suppressCellSelection={true}
in the grid to avoid Blue border on cell selection
<Grid
ref={GridRef}
columnDefs={Mapper}
rowData={data}
gridOptions={gridOptions}
onGridReady={onGridReady}
suppressRowHoverHighlight={true}
columnHoverHighlight={true}
suppressCellSelection={true} // add this line to avoid blue border color on the cell
onRowClicked={console.log(e)}
onFilterChanged={useCallback(() =>
setRow(GridRef.current.api.getDisplayedRowCount())
)}
></Grid>
this workd guys
add this line inside same props className="ag-theme-alpine".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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.