async fetch report list in toolbar

Question

Hi,I have a Pivot Table with toolbar (similar to the demo).The list of reports is populated in async way so when fetch event is trigger, the list is not up to date.Is there a way to trigger fetch event when my report list is populated?ThanksRegards,Matt

Manikandan Murugesan · Answer

Hi Matthieu, 
 
Please use the code example below to dynamically update the report list after the fetch request is completed. 
 
Code Example: 




  updateReport() { 
    let reportCollection = []; 
    let reportList = []; 
    if (localStorage.pivotviewReports && localStorage.pivotviewReports !== '') { 
      reportCollection = JSON.parse(localStorage.pivotviewReports); 
    } 
    reportCollection.map(function (item) { 
      reportList.push(item.reportName); 
    }); 
    // Here you can refresh the report list by feeding updated datsource fetched from your DB. 
    var reportListObj = ( 
      document.querySelector( 
        '#' + this.pivotObj.element.id + '_reportlist' 
      ) as any 
    ).ej2_instances; 
    if (reportListObj) { 
      reportListObj[0].dataSource = reportList; 
      reportListObj[0].value = ( 
        this.pivotObj.toolbarModule as any 
      ).currentReport; 
    } 
  } 
 
Meanwhile, we have modified your sample for your reference. Please find it from below link. 
Sample: https://stackblitz.com/edit/angular-bsqskt?file=app.component.ts 

Please let us know if you have any concerns. 
 
Regards, 
Manikandan