CODEWITHSUNDEEP
javascriptangularag-gridag-grid-angularag-grid-ng2
Chris Farmer
Chris Farmer

Reputation: 25396

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

Upvotes: 41

Views: 80726

Answers (9)

Reneesh TK
Reneesh TK

Reputation: 245

I have seen in a tutorial video it is removing the cell selection by using cell style property. It is a tutorial video about integation of AG Grid in react. https://www.youtube.com/watch?v=hBx_TmuI9xg

Upvotes: 0

Paritosh
Paritosh

Reputation: 11570

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 Documentation and comment mentioned by X.Aurther, the option has been renamed to suppressCellFocus.

Upvotes: 50

Ryan Tsui
Ryan Tsui

Reputation: 948

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.

Upvotes: 35

faery
faery

Reputation: 101

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

Upvotes: 0

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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

Upvotes: 0

Riti verma
Riti verma

Reputation: 21

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

Upvotes: 0

NearHuscarl
NearHuscarl

Reputation: 81370

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

Edit 50862009/how-to-disable-selection-of-cells-in-ag-grid/50863144#50863144

Upvotes: 5

Afeesudheen
Afeesudheen

Reputation: 1024

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

Upvotes: 0

Jossef Harush Kadouri
Jossef Harush Kadouri

Reputation: 34207

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

enter image description here

Upvotes: 7

Related Questions