Event handlers firing on PivotView rendering

Question

Hi,I noticed that these event handlers are firing during PivotView component is rendering: saveReport and fetchReportIt'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

Sivamathi Natarajan · Accepted Answer

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.

Cedric E · Answer

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.