How to disable selection of cells in ag-grid?
Solution 1
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.
Solution 2
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
};
Solution 3
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
Solution 4
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
Solution 5
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;
}
Comments
-
struppi over 2 years
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 propertysuppressNavigable
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 offersuppressCellSelection
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:
-
NeverGiveUp161 over 3 years
-
-
Paritosh almost 6 yearsI'm glad it helped! It's quick to help when the reproduced issue is shared.
-
Ryan Tsui over 5 yearsWhy not
suppressCellSelection
in gridOptions? -
Paritosh over 5 yearsPO just want to disable it for a single column. Not for all column. The issue is styling for the selected cell which is suppressed from navigation
-
struppi over 5 yearsThat option is already set in my gridoptions. It doesn't help.
-
Marian Simonca over 5 yearsFor me it worked only with
::ng-deep
before.no-border.ag-cell:focus
. Thanks for your answer! -
xandermonkey almost 5 yearsThis prevents the selection in a visible way, but the grid api will still consider the cell selected.
-
Paritosh almost 5 years@xandermonkey - thats right, but here PO's intention is just regarding the UI aspect of this.
-
takanuva15 over 4 yearsHow would you prevent cell selection for all columns? Do I have to repeat
cellClass
for every single header? -
takanuva15 over 4 yearsNvm, just add
::ng-deep .ag-cell:focus{ border: none !important; outline: none; }
to your css -
Joshua Wade about 4 yearsThis only removes the highlight. The keyboard navigation behavior is retained, so you'll get strange behavior with the left and right arrow keys if your table scrolls horizontally.
-
Ross Attrill almost 4 yearsThis post answers the OP's question in that OP said "Simply removing the default blue outline during selection would also be fine". And it does exactly that. Amazing that this got downvoted.
-
Unicco about 3 years@ChrisFarmer make sure enableRangeSelection is false
-
Smart Coder over 2 yearssuppressClickEdit
-
Sachin over 2 yearsWorked from me thanks !!
-
aderchox about 2 yearsAmazing, solved 10 problems together for me :D. Only for future visitors: Notice that in newer versions of AG Grid it's been replaced by
suppressCellFocus
(since v27.0).