Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable selection of cells in ag-grid?

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:

I don't want to see the blue border

like image 567
Chris Farmer Avatar asked Jun 14 '18 16:06

Chris Farmer


People also ask

How do you turn off cell selection on Ag grid?

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 .

How do you deselect on Ag grid?

To programatically deselect a single row, use rowNode. setSelected(false) . rowNode. setSelected(isSelected, clearSelection) can be used to select rows as well, and will deselect all rows other than the subject rowNode if clearSelection is true .

How do I disable checkbox selection in Ag grid react?

You can enable or disable the checkbox by returning true or false from the cellRenderer function. Show activity on this post. If you're using the builtin agGroupCellRenderer to render checkbox for multiple selection, you can turn off the node's selectable flag when deciding whether to render checkbox or not.

How do you prevent closing of cell editing in AG grid on other cell focus?

If you want the grid to stop editing when focus leaves the cell or the grid, set the grid property stopEditingWhenCellsLoseFocus = true .


2 Answers

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.

like image 194
Paritosh Avatar answered Sep 19 '22 12:09

Paritosh


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 }; 
like image 23
Ryan Tsui Avatar answered Sep 16 '22 12:09

Ryan Tsui