web-dev-qa-db-ja.com

angularを使用してag-gridで列ヘッダーをラップする方法

私は4つの単語を含むいくつかの列があります。つまり、取引前フォローアップ、取引後フォローアップ、およびそれらのいくつかは3単語です。以下のCSSを試して、テキストを複数行に折り返しました。

::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>

ただし、列ヘッダーは変わりません。列ヘッダーのテキストを複数行に折り返したいと思いました。とにかくこれを行うにはありますか？

注：cellStyle: {'white-space': 'normal'}を使用してコンテンツをラップできます

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

しかし、私はヘッダーをラップしたかった。

javascriptangularag-gridag-grid-angular
7
UI_Dev

次のstackblitzの例を確認してください。

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

グローバルスタイルシートで次を適用しました...コンポーネントcssで::ng-deepを使用できます。これはag-gridでフォークして最初に見つけたstackblitzであり、私のものではないため、コンポーネントはありませんでした。使用するCSS。

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

次のピースは、プロパティheaderHeightを使用することです

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

残念ながらこの部分は避けられません...また、Wordの折り返し要件に基づいてヘッダーの高さを動的にすることもできません。

  • ビューがレンダリングされるときにコンテンツ領域がtopスタイルで動的に定義されるためです。 ::ng-deepを使用してヘッダーの高さを調整しても、topプロパティによって計算されるため、コンテンツ領域のheaderHeightは動的に下に移動しません...未定義の場合、デフォルトは25pxしたがって、コンテンツ領域のtopも25pxです。
  • 言うまでもなく、コンテンツ領域のz-indexは、::ng-deep ..で高さを変更するとヘッダーと重なるため、::ng-deepが本当に機能したかどうかはわかりません...視覚的にはis ...ヘッダーがコンテンツ領域の下に拡張されるため。

申し訳ありませんが、これは可能な限り近くなります...すべての要素の調整、DOM操作による動的ヘッダーの高さに基づくtopなどのシフトダウンなど、醜くなりすぎます...そして動的にヘッダーの高さを必要とする場合、これはショーストッパーです... ag-gridの代わりとして他のオプションを検討するのが最善です。

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

6
Marshal

期待される結果を得るには、その特定の列headerNameの列定義で改行タグ-brを使用する以下のオプションを使用します

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