webentwicklung-frage-antwort-db.com.de

Wie deaktiviere ich die Auswahl von Zellen in einem Gitternetz?

Ich habe ein einfaches Ag-Grid in einem Angular) - Projekt und möchte die Auswahl von Zellen in einer seiner Spalten deaktivieren. Es wäre auch in Ordnung, einfach den blauen Standardumriss während der Auswahl zu entfernen. Ich möchte nur nein Visuelle Änderung der Zelle, wenn der Benutzer darauf klickt. Wie kann ich das tun?

Ich sehe, dass ColDef eine Eigenschaft suppressNavigable hat, die irgendwie hilft, da es nicht erlaubt, die Zellen mit der Tabulatortaste auszuwählen, aber es erlaubt trotzdem die Auswahl durch Klicken. Auch das Gitter selbst scheint suppressCellSelection zu bieten, aber es scheint nicht granular genug zu sein und scheint sowieso nichts zu beeinflussen.

Wie kann ich diese blaue Randzellenauswahl entfernen?

Hier ist der Code, den ich für diese Spaltendefinitionen habe:

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

Hier ist ein Beispiel für einen Stackblitz, mit dem ich getestet habe: https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection

Hier ist ein Screenshot des blauen Rahmens, den ich in dieser Spalte nicht sehen möchte: I don't want to see the blue border

angularag-gridag-grid-ng2
11
Chris Farmer

Beachten Sie, dass, wenn wir gridOption.suppressCellSelection = true Wir können die Zellenauswahl für alle Spaltenzellen deaktivieren.

Hier geht es um die Frage, ob der hervorgehobene Rand einer bestimmten Spalte nicht angezeigt wird, wenn sie ausgewählt ist.

Sie können dies mit etwas CSS und der Eigenschaft cellClass von ColDef erreichen.

Sie müssen unter CSS hinzufügen.

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

Und verwende die gleiche Klasse wie cellClass in ColDef

suppressNavigable: true,
cellClass: 'no-border'

Live-Beispiel: aggrid-want-to-disable-cell-selection
Hiermit wird kein Rand für die Zelle angezeigt, auf die Sie mit einem Mausklick gerade fokussieren.

17
Paritosh

Ich würde vorschlagen, die Option suppressCellSelection in gridOptions zu verwenden. Eine CSS-Schnellkorrektur würde ich nicht empfehlen.

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

Sie können diesen CSS-Hack ausprobieren. Keine benutzerdefinierten Flags erforderlich.

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

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

enter image description here

0
Jossef Harush