Merge Header Table

Merge Header Table

Posted by: normansiboro.ibn on 22 March 2018, 1:46 pm EST

• 

  normansiboro.ibn

  • Post Options:
  • Link
    Copy

  Posted 22 March 2018, 1:46 pm EST

  I am trying to use merge header as mentioned in column group in sample explorer
  
  and in that example it is mentioned that we have to create the structure of header in component. for example:
  
  w3Columns = [{
  
  header: ’ ',
  
  binding: ‘gender’
  
  }, {
  
  header: ‘Average’,
  
  columns: [{
  
  header: ‘Height’,
  
  binding: ‘height’,
  
  format: ‘n1’
  
  }, {
  
  header: ‘Weight’,
  
  binding: ‘weight’,
  
  format: ‘n3’
  
  }]
  
  }, {
  
  header: ‘Red Eyes’,
  
  binding: ‘red’,
  
  format: ‘p0’
  
  }];

  the difficult part for me is I cannot use ngIf in some columns since the header and binding property must be declared in component not in html

  is there any way that we can make merge header in html such as using col span or row span so I can still declare every column in html and I can still use ngIf ?

• 

  normansiboro.ibn

  • Post Options:
  • Link
    Copy

  Posted 22 March 2018, 9:27 pm EST

  I am using wijmo flexgrid

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 23 March 2018, 5:58 am EST

  Hi,

  Sorry, but there’s currently no way to create merged column headers purely by template binding.

  But you can refer to following example that creates merged headers using a combination of code and template binding, hence allowing you to use *ngIf as required.

  https://stackblitz.com/edit/angular-cs7vr1

• 

  normansiboro.ibn

  • Post Options:
  • Link
    Copy

  Posted 23 March 2018, 6:41 am EST

  how does itemFormatter work ?
  
  I once used it to make calculated field by some column and it gave me the result as I wanted but when I pressed F12 and saw the console tab, itemFormatter iterate through all of the cells over and over again and it consumes my RAM and CPU

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 23 March 2018, 7:19 am EST

  Item formatter function is used to customize the appearance of cells.

  Under the hood Flexgrid/Flexsheet does not create cells for every row/columns in grid, instead it renders cell only for visible portion of the grid and then recycles them.

  This therefore optimizes the cost involved in creating/deleting DOM Nodes.

  FlexGrid provides item -formatter which allows customization of each cell to granular level. Yes, It is called whenever a cell needs formatting/rendering ex:- Scroll Operation