web-dev-qa-db-fra.com

Existe-t-il un moyen de spécifier la largeur de colonne ag-grid en pourcentage?

Pour le moment, la seule façon de spécifier la largeur de la grille de la colonne consiste à ajouter une propriété width à la définition de la colonne, comme suit:

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

Mais comme nous pouvons le voir dans l'exemple suivant, la colonne de la grille ne prend pas toute la largeur de l'écran.

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

Je veux pouvoir définir la largeur en pourcentage pour chaque colonne mais je ne parviens pas à trouver comment faire.

Utiliser width: 10% ne fonctionne pas.

Y at-il une solution de contournement pour cela?

angularag-gridpercentagecolumn-width
6
HDJEMAI

Non, ce n'est pas possible par défaut. Vous ne pouvez définir que la largeur, minWidth et maxWidth en nombres absolus. Pour créer des largeurs dynamiques dans AgGrid, la solution la plus simple consiste à utiliser this.gridOptions.api.sizeColumnsToFit();. Elles prennent donc la plus petite largeur (en fonction des largeurs spécifiées dans le colDef) des valeurs existantes dans leurs cellules.

Vous pouvez essayer de calculer width manuellement (onInit) en fonction de window-width, puis de réinitialiser AgGrid. Mais je ne le recommande pas, car lorsque l'utilisateur redimensionnera la fenêtre, vous devrez calculer à nouveau (dans Window-Resize-HostListener) et réinitialiser la grille. Cela pourrait être possible avec debounce-time (pour ne pas réinitialiser chaque milliseconde pendant que l'utilisateur fait glisser son navigateur), mais c'est un peu hacky et vous aurez à la fin beaucoup de choses très difficiles à déboguer. et difficile à maintenir le code.

3
Phil

En utilisant la méthode suggérée par @Phil, je peux faire en sorte que la grille utilise la largeur du port de vue disponible à l'aide de l'événement gridReady:

Dans le modèle de composant:

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

Fichier TypeScript du composant In:

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

Démo:

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

3
HDJEMAI

Ma solution de contournement consistait à créer une fonction qui convertit une valeur numérique de rems en pixels:

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

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

Ensuite, utilisez ceci dans la propriété width de la définition de colonne.

1
GarouDan