Load report on tab change

[Ivan Janjic]

Hello,

I have single report viewer inside ej-tab control and it's working fine. Only problem is that report starts loading even if tab with the report is not active and waiting popup is shown in the top left corner of the screen. Is there any way to load the report only when tab with the report is active, or maybe hide the reports waiting popup on initial load of the parent component.

Thanks in advance

[Yuvaraj Devarajan]

Hi Ivan, 

 

Thanks for contacting Syncfusion support. 

 

The mentioned problem might have occurred when the ReportViewer control and Tab control are initialized at the same time in your angular component. So, we request you to initialize the ReportViewer control after triggering the tab event using “NgIf” condition in angular as shown in below code example,  

 

Html: 

    <ej-tab #tab> 

        <e-tabitems> 

            <e-tabitem [header]="headerText[0]" content="#buttonSection"></e-tabitem> 

            <e-tabitem [header]="headerText[1]" content="#report"></e-tabitem> 

        </e-tabitems> 

    </ej-tab> 

        

    <div id="report"> 

        <div *ngIf="enableReport"> 

            <h2>Essential JavaScript ReportViewer </h2> 

            <ej-reportviewer #reportViewer  id="reportViewer_Control" [reportServiceUrl]="serviceUrl" [processingMode]="Remote" [reportPath]="reportPath" [parameters] = "parameters"> 

            </ej-reportviewer> 

        </div> 

    </div> 

 

TypeScript: 

export class AppComponent { 

  @ViewChild('reportViewer') reportViewer: EJComponents <any,any>; 

  @ViewChild('tab') tab: TabComponent; 

 

  public enableReport: Boolean = false; 

  public serviceUrl: string; 

  public reportPath: string;   

  public title = 'Average Sales Comparison'; 

 

  public headerText: Object[] = []; 

 

  public ngOnInit(): void { 

    this.headerText = [ 

      { 'text': 'List' }, 

      { 'text': 'Report' } 

    ]; 

  } 

 

  constructor() {    

      this.serviceUrl = 'http://js.syncfusion.com/ejservices/api/ReportViewer';                         

  } 

 

  public btnClick(): void {     

    this.tab.select(1); 

     this.enableReport = true; 

     this.reportPath = 'GroupingAgg.rdl';  

    

  } 

      

} 

 

Please refer to the below link for using “NgIf” in angular component 

https://angular.io/api/common/NgIf   

 

Regards, 

Yuvaraj D.

[Ivan Janjic]

Thanks Yuvaraj, it works like a charm. Simple and clean.

Kind regards,

Ivan

[Yuvaraj Devarajan]

Hi Ivan, 

Thanks for the update. We are happy to hear that your problem is resolved. 

Regards, 

Yuvaraj D.