web-dev-qa-db-fra.com

Comment en-tête de colonne dans ag-grid en utilisant angular

J'ai quelques colonnes qui ont quatre mots, à savoir Suivi de la négociation avant, Suivi de la négociation et certaines d'entre elles ayant trois mots. J'ai essayé le CSS ci-dessous pour envelopper le texte à plusieurs lignes.

::ng-deep .ag-theme-material .ag-header-cell-label .ag-header-cell-text{
  white-space: normal;
  overflow-wrap: break-Word;
}

HTML

<ag-grid-angular class="ag-theme-material" [rowData]="rowData" [columnDefs]="columnDefs" [overlayLoadingTemplate]="overlayLoadingTemplate" [domLayout]="domLayout" [enableSorting]="true" (gridReady)="onGridReady($event)" (gridOptions)="gridOptions" >
  </ag-grid-angular>

mais l'en-tête de colonne reste le même. Je voulais encapsuler le texte de l'en-tête de colonne sur plusieurs lignes. Y a-t-il un moyen de faire ça?

Remarque: Je peux envelopper le contenu à l'aide de cellStyle: {'white-space': 'normal'} 

{headerName: 'headername', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}},

Mais je voulais envelopper la tête.

javascriptangularag-gridag-grid-angular
7
UI_Dev

Veuillez revoir l'exemple de stackblitz suivant.

https://stackblitz.com/edit/angular-ag-grid-angular-xmbm3p?embed=1&file=styles.css

Dans la feuille de style globale, j'ai appliqué ce qui suit ... vous pouvez utiliser ::ng-deep dans votre composant css, c'est le premier stackblitz que j'ai trouvé avec ag-grid à fork et ce n'est pas le mien, il n'y avait donc pas de composant CSS à utiliser.

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

La prochaine étape consiste à utiliser la propriété headerHeight

this.gridOptions = <GridOptions>{
          headerHeight:75,

Cette partie est malheureusement inévitable ... elle ne vous permet pas non plus de rendre la hauteur de l’en-tête dynamique en fonction des exigences de retour à la ligne. 

  • La raison en est que la zone de contenu est définie avec le style top de manière dynamique lorsque la vue est rendue. Le réglage de la hauteur de l'en-tête via l'option ::ng-deep ne modifiera pas dynamiquement décaler le top de la zone de contenu vers le bas, comme il est calculé par la propriété headerHeight ... est 25px donc la zone top pour le contenu est également 25px. 
  • Il ne faut pas mentionner Que le z-index de la zone de contenu entraîne le chevauchement de l'en-tête Lorsque vous modifiez la hauteur avec ::ng-deep .. de sorte que vous ne savez pas si ::ng-deep vraiment travaillé ... visuellement c'est-à-dire ... puisque l'en-tête s'étend sous la zone de contenu.

Désolé de dire, mais ce sera aussi proche que vous pouvez obtenir ... ajuster tous les éléments, décaler le top etc basé sur une hauteur d'en-tête dynamique via une manipulation DOM Je crains devenir trop moche ... et si vous avez besoin de la hauteur d'en-tête dynamique au point qu'il s'agisse d'un show stopper ... il peut être préférable d'explorer d'autres options en remplacement de ag-grid.

https://www.ag-grid.com/javascript-grid-column-header/#headerHeight

3
Marshal

Pour obtenir le résultat attendu, utilisez ci-dessous l’option d’utilisation des définitions de colonne de balise de saut de ligne - br in pour cette colonne spécifique

{headerName: 'Pre<br>Trading<br> Follow<br> Up', field: 'headerfield', autoHeight:true, width: 100, cellStyle: {'white-space': 'normal'}}
1
Naga Sai A