[FlexGrid] ng-templateを用いてWjFlexGridColumnGroupを再帰表示させようとしても行ヘッダは１行しか表示されない – MESCIUS ナレッジベース

作成日: 2022/09/30 最終更新日: 2022/09/30

文書種別

制限事項

状況

現象確認済み

詳細

ng-templateを用いてWjFlexGridColumnGroupを再帰表示させた場合、行ヘッダは１行しか表示されません。

回避方法

ng-templateを用いて再帰表示させる有効な方法はございません。次善策として、下記の方法をご検討ください。

１．表示させる列グループに応じて、階層的にwj-flex-grid-column-groupを宣言します。

<ng-template let-column="column">

  <wj-flex-grid-column-group [binding]="column.binding" [header]="column.header">
    <ng-container *ngIf="column.children != null">
      <ng-container *ngFor="let columnChild of column.children">

        <wj-flex-grid-column-group [binding]="columnChild.binding" [header]="columnChild.header">
          <ng-container *ngIf="columnChild.children != null">
            <ng-container *ngFor="let columnChild2 of columnChild.children">

              <wj-flex-grid-column-group [binding]="columnChild2.binding" [header]="columnChild2.header">
              </wj-flex-grid-column-group>

            </ng-container>
          </ng-container>
        </wj-flex-grid-column-group>

      </ng-container>
    </ng-container>
  </wj-flex-grid-column-group>

</ng-template>

２．columnGroupsプロパティを利用し、列グループの階層をデータから設定します。

【HTML】
<wj-flex-grid #assignGrid
  [autoGenerateColumns]="false"
  [columnGroups] = "columns2"
  [itemsSource]="data">
</wj-flex-grid>

【typescript】
・・・
    columns2 = [
        {header:"A", binding:"name", columns: []},
        {header:"B",  binding:"currency", columns: [
            {header:"B-1", binding:"currency", columns: []},
            {header:"B-2", binding:"perf.ytd", columns: []},
            {header:"B-3", columns: [
                {header:"B-3-1", binding:"alloc.stock", columns: []},
                {header:"B-3-2", binding:"alloc.bond",  columns: []},
            ]},
        ]},
    ];
・・・