Progress® Telerik® Reporting R2 2019

How To: Pass Values to Report Parameters

This topic explains how to update the report parameters with values passed from a custom UI instead of using the report viewer's default parameters area. The report identifier and all required parameters values for it are packed in a ReportSource object. To update the report source, the setReportSource(rs) method is used.

Pass values to report parameters from the application UI

  1. Add the custom UI in your application. For example:

    HTML
    <button (click="onButtonClick(value)">Update parameter value</button>
  2. Declare the variable for the viewer and update the viewer's report source with a new parameter value:

    JavaScript
    import { Component, ViewChild } from '@angular/core';
    import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';
    ...
    
    export class AppComponent {
        @ViewChild('viewer1') viewer: TelerikReportViewerComponent;
        ...
    
        onButtonClick(param: string) {
            var rs = {
                report: 'Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null',
                parameters: { OrderNumber: param }
            };
    
            this.viewer.setReportSource(rs);
        }
    ...
    }

    The setReportSource(rs) method will automatically refresh the report with the new parameter values.

See Also

In this article
Not finding the help you need?