How can I call a new report in the viewer?

[Frank]

Hello,

I have created an Angular project in which a report is displayed in the Report Viewer, which is loaded by the Report Server.
As described in your example.

I use the option "[reportSource]" to pass the following object:
  "{Report: categoryName / reportName}".

Now I want to change this object to another report and show this.
Unfortunately it did not work that easy.

So I researched the documentation and found out that methods can be run on the viewer.
https://docs.telerik.com/reporting/angular-report-viewer-api-methods

refreshReport() and setReportSource() sounded good and I tried them as they did in your example.

Unfortunately, that did not work either.
In the console came the following errors :

 

My HTML:

01.<button (click)="viewer1.refreshReport()">Refresh</button>
02.<button (click)="viewer1.setReportSource(rs)">setReportSource</button>
03.<button (click)="temp = viewer1.getReportSource()">getReportSource</button>
04.
05.<pre>{{temp|json}}</pre>
06.<pre>{{reportSource|json}}</pre>
07.
08.<tr-viewer #viewer1 *ngIf="reportSource"
09.    [containerStyle]="viewerContainerStyle"
10.    [reportServer]="creds"
11.    [viewMode]="'PRINT_PREVIEW'"
12.    [scaleMode]="'SPECIFIC'"
13.    [scale]="1.0"
14.    [reportSource] = "reportSource"
15.></tr-viewer>

 

What am I doing wrong? How can I call another report in the viewer?

[Silviya]

Hi Frank,

The error implies that we are trying to use getReportSource() method of undefined. This means that this.viewer is undefined at the moment when we call it. HOwever, getReportSource method is not necessary to be used when trying to update the report source of the viewer. 

To update the report source, setReportSource method of the viewer can be used as following:

<button (click)="viewer1.setReportSource({report: 'Samples/Invoice', parameters: {}})">Change Report Source</button>

This method expects a JSON object with report(string) and parameters(JSON) properties - Angular Report Viewer Methods. SetReportSource() method will automatically reload the report (if any) into the view.

Best Regards,
Silviya
Progress Telerik

[Frank]

I found the mistake.
The problem is / was the "*ngIf" directive.
I have solved this now so that I check the "reportSource" before the component is loaded with the viewer, or not in case of errors.
Was stupid of me.

[Travis]

This works for me as long as the viewer is visible.  If it is not shown, i.e. child of some container that is not visible, then set to be visible and then setReportSource is called I get an error "Cannot read property 'setReportSource' of undefined".

[Todor]

Hi Travis,

The described issue is new for us and we would like to investigate it. Can you open a support ticket and send us a runnable project that demonstrates the problem. We would appreciate also the exact step to reproduce the observed behavior.

Regards,
Todor
Progress Telerik