Multiple ColumnHeaders

Multiple ColumnHeaders

Posted by: bmakhlin on 21 August 2018, 7:44 am EST

• 

  bmakhlin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 21 August 2018, 7:44 am EST

  Hi,
  
  I how do I create multi-row column headers in the same column using ng-template? If I use ng-template below only single row column header ‘row2’ will be created. I want my column to be multi-row with ‘row1’ in the first row and ‘row2’ in the second row of the column header.

  
  row1
  row2
  
  

  
  <wj-flex-grid-column...
  <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell" >
              {{'row1 '}}
    </ng-template>
  <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell" >
              {{'row2 '}}
    </ng-template>
      </wj-flex-grid-column>
  
  

  thank you

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 21 August 2018, 8:50 pm EST

  Hi,

  You cannot create multi-row column headers using wjFlexGridCellTemplate . To create multi-row column headers, you need to push new rows on grid.columnHeaders.rows collection after the grid is initialized and then you can use formatItem event to style individual header cell.

  Please refer to the following sample which implements the same:-
  
  https://stackblitz.com/edit/angular-qymfnv?file=src%2Fapp%2Fapp.component.ts

  ~Sharad