How to Dynamically Bind Headers in wijmo flexsheet

Posted by: teenu.k on 4 September 2019, 7:16 pm EST

  • Posted 4 September 2019, 7:16 pm 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


    <wj-flex-sheet #flexsheet (initialized)="flexInitialized(flex)">
    <wj-sheet [name]="'Data'" [itemsSource]="reportData"></wj-sheet>

    </wj-flex-sheet>



      In component.ts file i have following code,


    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
    });

    }




    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
  • Marked as Answer

    Replied 5 September 2019, 3:06 pm 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
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels