Back to forum

Issues with angular integration

Answered

Hello,
Have just done the basic setup of WebDataRocks an Angular Application. Am able to connect to API service to load the data. However when i tried to customize the toolbar following the link: (https://www.webdatarocks.com/doc/customizing-toolbar/)   give the unexpected results. Basically the customizeToolbar function is not invoked at all. Am I missing something?
I have the below in Index.html:
  <link href=”https://cdn.webdatarocks.com/latest/webdatarocks.min.css” rel=”stylesheet”/>
  <script src=”https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js”></script>
  <script src=”https://cdn.webdatarocks.com/latest/webdatarocks.js”></script>
 
My component HTML is as below:
    <wbr-pivot #pivot1 [toolbar]=”true”
          [width]=”‘100%'”
          [height]=”500″
          [report]=”pivotReport”
          [customizeCell]=”onCustomizeCell”
          (ready)=”onPivotReady($event)”
          (beforetoolbarcreated)= “customizeToolbar”
          (reportcomplete)=”onReportComplete()”
         >
          
          >
    WebDataRocks will appear here
</wbr-pivot>
 
My component code with the constructor is :
   this.pivotReport =
    {
      toolbar: true,
      dataSource: {
        data: this.populateLinelisting()
      },
      grid: {
        ‘type’: ‘flat’,
        ‘showTotals’: ‘off’,
        ‘showGrandTotals’: ‘off’
      },
     beforetoolbarcreated: customizeToolbar,
    }; 
2).Though showGrandTotals/showTotals =off, those are appearing which are not relevant for my data which are mostly of textual content. How to permanently do such settings w/o using options menu? 
3) have tried to export my data in landscape mode using default option (I had ONLY 2 records)…Online view of the pdf had 2 pages where additional columns beyond ‘Portrait’ fitment falls on the second page.Any settings am i missing?
4). How to set grouping options from the code?. Note, I have couple of reports without any numeric data also.

Can you please help me with above four issues?…
Thanks
Asha.

1 answer

WebDataRocks Team WebDataRocks June 9, 2020

Hello Asha,
 
Thank you for the questions and sorry for the delayed answer.
Regrading your questions:
1. In Angular HTML code, please try (beforetoolbarcreated)="customizeToolbar($event)"
2. It can be achieved by setting global options. More details: https://www.webdatarocks.com/doc/init-api-call/
3. Could you please provide a sample where the issue with export is reproducible?
4. In case we understood correctly, you need to configure different reports. Please take a look at the following method: https://www.webdatarocks.com/doc/setreport/
 
Hope it helps.
 
Regards,
WebDataRocks Team

Move up