Event handlers firing on PivotView rendering

[Cedric E]

Hi,

I noticed that these event handlers are firing during PivotView component is rendering: saveReport and fetchReport

It's obvious to call on "fetchReport" during rendering but why call "saveReport"? Is there a way to prevent the component from calling it?

Please see the attached file for the sample snippet.

Attachment: Report_ef4b97e.zip

[Cedric E]

Hi, 

In addition to my inquiry, is there also a way to load the reports to the dropdown in the toolbar? the reports collection will be coming from an API depending on the selected value from an outside dropdown.

[Sivamathi Natarajan]

 

Thanks for contacting Syncfusion support. 

 

Please find the response below, 

 

Query	Response
I noticed that these event handlers are firing during PivotView component is rendering: saveReport and fetchReport    It's obvious to call on "fetchReport" during rendering but why call "saveReport"? Is there a way to prevent the component from calling it?	As per the behavior of pivot table, the initially loaded report will be saved in data base (here it is local storage) then the reports available in the data base will be listed in a built-in drop-down list in toolbar panel. So, the saveReport event is triggered initially. If you don’t want to save your report on initial rendering, then you can restrict it with the help of below code example.    Code Example:    let isSaveReportInitial = false;    saveReport(args) {      if (isSaveReportInitial && args.reportName != "Sample Report") {        let reports = [];        let isSaved = false;        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {          reports = JSON.parse(localStorage.pivotviewReports);        }        if (args.report && args.reportName && args.reportName !== '') {          reports.map(function (item) {            if (args.reportName === item.reportName) {              item.report = args.report;              isSaved = true;            }          });          if (!isSaved) {            reports.push(args);          }          localStorage.pivotviewReports = JSON.stringify(reports);        }      }      else {        this.pivotView.toolbarModule.currentReport = "";        isSaveReportInitial = true;      }    }      Sample Link: https://stackblitz.com/edit/react-5apqmf-19hxnc?file=index.js
In addition to my inquiry, is there also a way to load the reports to the dropdown in the toolbar? the reports collection will be coming from an API depending on the selected value from an outside dropdown.	Based on your requirement we have prepared a sample which is available in below,  Code Example:     this.DropdownReport = ['Report1', 'Report2', 'Report3', 'Report4', 'Report5'];   this.savedReport = [];   loadReport(args) {      let reportCollection = [];      if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {        reportCollection = JSON.parse(localStorage.pivotviewReports);      }      reportCollection.map(function (item) {        if (args.reportName === item.reportName) {          args.report = item.report;        }      });      if (args.report) {        this.pivotView.dataSourceSettings = JSON.parse(args.report).dataSourceSettings;        this.pivotView.renderPivotGrid();      }      // To load the report externally      else {        this.pivotView.loadPersistData(this.savedReport[args.reportName]);        this.pivotView.renderPivotGrid();      }    }     load(args) {      if (this.pivotView.toolbarModule.reportList) {        var dataSource = this.pivotView.getPersistData();        this.savedReport[args.value] = dataSource;        this.pivotView.toolbarModule.reportList.dataSource[this.pivotView.toolbarModule.reportList.dataSource.length] = args.value;        this.pivotView.toolbarModule.reportList.value = args.value;        this.pivotView.toolbarModule.reportList.text = args.value;        this.pivotView.toolbarModule.reportList.refresh();      }    }      <DropDownListComponent placeholder={'Load Report'} floatLabelType={'Auto'} change={this.load.bind(this)} id="load-btn" index={0} enabled={true} dataSource={this.DropdownReport}                ref={(scope) => { this.dropdownObj = scope; }} />      Sample: https://stackblitz.com/edit/react-5apqmf-xkhvg7?file=index.js

 

 

We hope the above sample meets your requirements. 

 

Regards, 

Sivamathi.