How to Dynamically Bind Headers in wijmo flexsheet

How to Dynamically Bind Headers in wijmo flexsheet

Posted by: teenu.k on 5 September 2019, 4:16 am EST

• 

  teenu.k

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 September 2019, 4:16 am EST

  Hi,
  
  I want to Dynamically Bind Headers in wijmo flexsheet using angular,
  
  For Eg:

  • "In my html page i have following piece of code "

  [b]<wj-flex-sheet #flexsheet (initialized)=“flexInitialized(flex)”>
  
  <wj-sheet [name]=“‘Data’” [itemsSource]=“reportData”>

                                </wj-flex-sheet>[/b]
  

  • “In component.ts file i have following code,”

  [b]getData(report){
  
  this.reportData=[{“stateCode”:“CA”,“combinedCoverage”:1400,“buildingCoverage”:4562]
  
  this.bindingData = [{“header”:“State”,“binding”:“stateCode”},{“header”:“Combined Coverage”,“binding”:“combinedCoverage”},{“header”:“Building
  
  Coverage”,“binding”:“buildingCoverage”}];
  
  this.flexsheet.initialize({
  
  columns:this.bindingData
  
  });

  }[/b]

  When calling this getData Function I want to reload the flexsheet with New headers and data . headers and data are dynamic not static
  
  But in wijmo Flexsheet Intialize function is not working .

  Regards,
  
  Teenu

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2019, 12:06 am EST

  Hi Teenu,

  The initialize method will not work in the case of FlexSheet since it creates the columns automatically. If you just need to change the header of the columns, then you may use the formatItem event of FlexSheet and update the column headers using the innerHTML of the cell element. Please refer to the sample below:

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

  Regards,
  
  Ashwin