web-dev-qa-db-de.com

Gibt es eine Möglichkeit, die Breite eines AG-Grids in Prozent anzugeben?

Im Moment sehe ich nur die Breite eines Spaltenrasters, indem ich einer Spaltendefinition eine width -Eigenschaft hinzufüge:

columnDefs: any[] = [
  { 
    headerName: 'ID',
    field: 'id',
    width: 50,
    type: 'numericColumn'
  }
];

Wie wir im folgenden Beispiel sehen können, nimmt die Spalte des Gitters jedoch nicht die gesamte Bildschirmbreite ein.

https://stackblitz.com/edit/ag-grid-bss-test-nnojxg?file=app%2Fapp.component.ts

Ich möchte in der Lage sein, die Breite in Prozent für jede Spalte einzustellen, aber ich kann nicht finden, wie dies geschieht.

Die Verwendung von width: 10% funktioniert nicht.

Gibt es eine Problemumgehung dafür?

6
HDJEMAI

Nein, es ist standardmäßig nicht möglich. Sie können nur die Breite, die minWidth und die maxWidth in absoluten Zahlen einstellen. Die einfachste Möglichkeit für dynamische Breiten in AgGrid ist die Verwendung von this.gridOptions.api.sizeColumnsToFit();. Sie benötigen daher die kleinste Breite (entsprechend der in colDef angegebenen Breite) für die vorhandenen Werte in ihren Zellen.

Sie können versuchen, width manuell (onInit) basierend auf der Fensterbreite zu berechnen, und dann AgGrid erneut zu initialisieren. Ich empfehle das jedoch nicht, da der Benutzer das Fenster bei der Größenänderung erneut berechnen muss (in Window-Resize-HostListener) und das Raster neu initialisieren muss. Möglicherweise ist dies mit der Debounce-Zeit möglich (damit Sie nicht jede Millisekunde neu initialisieren, während der Benutzer seine Browser-Ecke zieht), aber es ist ziemlich hackig und am Ende werden Sie sehr schwer zu debuggen und schwer zu pflegender Code.

3
Phil

Mit der von @Phil vorgeschlagenen Methode kann das Raster die verfügbare Ansichtsportbreite mithilfe des gridReady-Ereignisses wie folgt übernehmen:

In Komponentenvorlage:

<ag-grid-angular  class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"> 
</ag-grid-angular>

In der Komponente TypeScript-Datei:

onGridReady(params) {
  params.api.sizeColumnsToFit();
}

Demo:

https://stackblitz.com/edit/ag-grid-bss-test-aejozx?file=app%2Fapp.component.html

3
HDJEMAI

Mein Workaround bestand darin, eine Funktion zu erstellen, die einen numerischen Wert von rems in Pixel konvertiert:

const remInPixel = parseFloat(getComputedStyle(document.documentElement).fontSize);

const convertRemToPixel = (rem) => rem * remInPixel;

Verwenden Sie diese dann in der width-Eigenschaft der Spaltendefinition.

1
GarouDan