How to disable selection of cells in ag-grid?

Question

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:

Pls help https://stackoverflow.com/questions/65018177/ag-grid-community-infinite-row-model-for-server-side-pagination-community-free/65040658#65040658 — NeverGiveUp161, Dec 03 '20 at 06:15

Paritosh · Accepted Answer · 2023-08-07T06:44:28.293

48

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.

Update

As per ag-grid Documentation and comment mentioned by X.Aurther, the option has been renamed to suppressCellFocus.

edited Aug 07 '23 at 06:44

answered Jun 14 '18 at 17:43

Paritosh

11,144
5
56
74

I'm glad it helped! It's quick to help when the reproduced issue is shared. – Paritosh Jun 14 '18 at 17:53
Why not `suppressCellSelection` in gridOptions? – Ryan Tsui Aug 10 '18 at 08:10
PO 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 – Paritosh Aug 10 '18 at 09:08
1

For me it worked only with `::ng-deep` before `.no-border.ag-cell:focus`. Thanks for your answer! – Marian Simonca Jan 15 '19 at 11:58
1

This prevents the selection in a visible way, but the grid api will still consider the cell selected. – xandermonkey Jul 05 '19 at 16:08
@xandermonkey - thats right, but here PO's intention is just regarding the UI aspect of this. – Paritosh Jul 05 '19 at 17:12
How would you prevent cell selection for all columns? Do I have to repeat `cellClass` for every single header? – takanuva15 Sep 23 '19 at 19:22
Nvm, just add `::ng-deep .ag-cell:focus{ border: none !important; outline: none; }` to your css – takanuva15 Sep 23 '19 at 20:59
suppressClickEdit – Smart Coder Dec 08 '21 at 14:07
I would set `border: 1px solid transparent !important;` otherwise the border is added and removed and size of rows change thus it is "jumpy" when you select – polmonroig Nov 29 '22 at 11:52
note that the option has been renamed into `suppressCellFocus`. – X.Arthur Aug 05 '23 at 11:15

Ryan Tsui · Answer 2 · 2023-03-21T14:37:12.540

33

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
};

As suggested by @aderchox, from v27.0 onwards, the option has been renamed to suppressCellFocus.

edited Mar 21 '23 at 14:37

answered Aug 10 '18 at 08:09

Ryan Tsui

918
5
14

10

That option is already set in my gridoptions. It doesn't help. – Chris Farmer Aug 10 '18 at 15:48
2

@ChrisFarmer make sure enableRangeSelection is false – Unicco Apr 10 '21 at 15:28
Worked from me thanks !! – Sachin Dec 20 '21 at 13:36
7

Amazing, 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). – aderchox Feb 20 '22 at 07:40

score 6 · Answer 3 · answered Aug 01 '19 at 14:38

6

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

answered Aug 01 '19 at 14:38

Jossef Harush Kadouri

32,361
10
130
129

This 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. – Joshua Wade Mar 09 '20 at 20:38
1

This 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. – Ross Attrill Jul 24 '20 at 05:53

score 5 · Answer 4 · answered Sep 27 '20 at 12:25

5

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

answered Sep 27 '20 at 12:25

NearHuscarl

66,950
18
261
230

Working solution for a specific cell. Thank you: cellStyle: { border: "none" } – LacOniC Oct 24 '22 at 14:45

score 0 · Answer 5 · answered Sep 17 '20 at 08:01

0

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;
}

answered Sep 17 '20 at 08:01

Afeesudheen

936
2
12
21

score 0 · Answer 6 · answered Aug 03 '21 at 09:19

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;
}

score 0 · Answer 7 · answered Dec 09 '21 at 21:55

0

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;

AG Grid: Setting colour parameters using CSS variables

answered Dec 09 '21 at 21:55

Josiah Ruddell

29,697
8
65
67

score 0 · Answer 8 · answered Jan 07 '23 at 07:08

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; }

How to disable selection of cells in ag-grid?

8 Answers8

Update

Live Demo

Linked