Angular Report Viewer Report Source Update

[Bob]

I'm using the new Angular Report Viewer. My Component allows the user to change different parameters to generate the report. The first time the report runs, everything is fine. When a new set of parameters are selected, requesting the report still shows the report with the initial parameters.

In the prior version, I was able to get this to work by doing this in my ts file:

const v1 = $('#reportViewer1').data('telerik_ReportViewer');
v1.reportSource(requestedReportSource)
v1.refreshReport();

Where requestedReportSource contained the new report parameters.

In the new TelerikReportViewerComponent, I see there' a setReportSource() method, but I'm unable to get the right JSON parameter format to be passed to the method.

Any examples on how to update the ReportSource for the component would be appreciated.

Bob

 

 

[Katia]

Hi Bob,

You can check the update in the support ticket #1110176 that you opened on the same question. For other members interested in this topic, below is the reply from the ticket:

"setReportSource method of the viewer can be used to update the report source as following:

<button (click)="viewer1.setReportSource({report: 'assembly-qualified name of the report or path to the file',
parameters: { Parameter1: 'value'}})">Refresh Report</button>

This method expects a JSON object with report(string) and parameters(JSON) properties - Angular Report Viewer Methods."


Regards,
Katia
Telerik by Progress

[Bob]

ngOnInit() {
  this.setParameters();
}

setParameters(): void {
  this.reportViewer.setReportSource({
    report: 'Residents.trdp',
    parameters: {}
  });
}

This comes up with the error 

Argument of type '{ report: string; }' is not assignable to parameter of type 'JSON'.
  Type '{ report: string; }' is missing the following properties from type 'JSON': parse, stringify, [Symbol.toStringTag]

[Bob]

I didn't submit this post. It just appeared in email....

 

[Bob]

I'm also called Bob...

[Bob]

For anyone interested The following code was used to cast the reportSource object:

ngAfterViewInit() {
  this.setReportSource();
}

setReportSource(): void {
  let rs = {
    report: 'FoodAndFluid.trdp',
    parameters: {
      NcEntityId: this.id,
      From: this.range.From,
      To: this.range.To
    }
  } as unknown as JSON;
  this.viewer.setReportSource(rs);
}

[Silviya]

Hi Bob,
 
Thank you for bringing this issue to our attention. We consider this as a bug and it is already logged to our Public Feedback and Ideas portal on your behalf (Angular Report Viewer Report Source Update throws an error). 

Thank you also for coming up with a possible workaround.

Best Regards,
Silviya
Progress Telerik

[Bhavika]

To update the Report Source in an Angular Report Viewer, follow these steps:

1. Set Up Report Viewer Component:
   Ensure you have the Angular Report Viewer integrated correctly. Most libraries like Telerik or similar provide modules for seamless integration.

• Bind the Report Source Dynamically:
  Use two-way data binding or an Angular service to dynamically update the report source based on your application's logic. For example:

• // Component.ts
  reportSource: any = {
    report: 'InitialReport',
    parameters: { param1: 'value1' },
  };
  
  updateReportSource(newReport: string, parameters: any) {
    this.reportSource = {
      report: newReport,
      parameters: parameters,
    };
  }
  

<!-- Component.html -->
<report-viewer 
  [reportSource]="reportSource">
</report-viewer>

Handle Events (if applicable):

Some report viewers provide events to detect updates or refresh the view. Ensure you trigger the refresh after changing the report source. For example:

refreshReport() {
  this.reportViewer.refresh();
}

Test Parameters:

Ensure that the parameters you pass align with the requirements of the updated report. Mismatched or missing parameters can cause rendering issues.