Comment désactiver la sélection des cellules dans l'ag-grid?

Question

J'ai une ag-grid simple dans un projet Angular et je souhaite désactiver la sélection des cellules dans l'une de ses colonnes. Il suffit également de supprimer le contour bleu par défaut lors de la sélection. Je veux juste que non modification visuelle de la cellule lorsque l'utilisateur clique à l'intérieur. Comment faire?

Je vois que ColDef a une propriété suppressNavigable qui aide, car elle interdit l'utilisation de la touche de tabulation pour sélectionner les cellules, mais elle permet toujours la sélection en cliquant. De plus, la grille elle-même semble offrir suppressCellSelection mais elle ne semble pas assez granulaire et ne semble rien affecter de toute façon.

Alors, comment puis-je supprimer cette sélection de cellules de bordure bleue?

Voici le code que j'ai pour ces définitions de colonne:

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

Voici un exemple de stackblitz que j'utilisais pour tester avec: https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection

Voici une capture d'écran de la bordure bleue que je ne veux pas voir dans cette colonne:

Answer 1

Notez que si nous définissons gridOption.suppressCellSelection = true nous pouvons désactiver la sélection de cellules pour toutes les cellules des colonnes.

Ici, la question concerne le fait de ne pas afficher la bordure en surbrillance d'une cellule spécifique lorsqu'elle est sélectionnée.

Vous pouvez y parvenir par un peu de CSS et cellClass propriété de ColDef.

Vous devrez ajouter ci-dessous 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;
}

Et utilisez la même classe que cellClass dans ColDef

suppressNavigable: true,
cellClass: 'no-border'

Exemple en direct: aggrid-want-to-disable-cell-selection
Cela ne montrera pas de bordure pour la cellule sur laquelle vous vous concentrez même en cliquant avec la souris.

Answer 2

Je suggère d'utiliser l'option suppressCellSelection dans gridOptions. Une solution rapide CSS n'est pas quelque chose que je suggérerais.

this.gridOptions = {
  // Your grid options here....
  suppressCellSelection: true
};

Answer 3

Vous pouvez essayer ce hack css. aucun indicateur personnalisé requis.

.ag-cell-focus, .ag-cell {
    border: none !important;
}

Exemple - https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css