New to Telerik Reporting? Download free 30-day trial

Using Query Parameters with Blazor Report Viewer

Environment

Product Version 16.2.22.914+
Product Progress® Telerik® Reporting
Report Viewer Native Blazor Report Viewer

Description

I need to be able to dynamically load a report and its report parameters through the current URL's query parameters, how can I achieve this with the Native Blazor Report Viewer?

For the below example, we will be using the Dashboard report - Dashboard Report Demo. The report is shipped with the installation of the Telerik Reporting product and with a default installation, it would be at the following path:

C:\Program Files (x86)\Progress\Telerik Reporting <Release>\Report Designer\Examples

Solution

  1. To catch the query string, we may use the SupplyParameterFromQuery attribute with the Parameter attribute to specify that a component parameter of a routable component can come from the query string. For example:

    [Parameter]
    [SupplyParameterFromQuery(Name = "ReportName")]
    public string? ReportName { get; set; }
    
    [Parameter]
    [SupplyParameterFromQuery(Name = "ReportYear")]
    public int? ReportYear { get; set; }
    
  2. Since we can use those values only once the parameters have been set, we need to use an empty report source initially:

    <ReportViewer @ref=rv1 ServiceUrl="/api/reports"
        @bind-ReportSource="@ReportSource"
        ServiceType="@ReportViewerServiceType.REST"
        Height="800px"
        Width="100%">
    </ReportViewer>
    
    
    @code {
        public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions();
    }
    
  3. After parameters are set (OnParametersSet{Async}), we may update the ReportSource property:

    protected override Task OnParametersSetAsync()
    {
        ReportSource.Report = ReportName ?? "Dashboard.trdp";
        ReportSource.Parameters.Add("ReportYear", ReportYear ?? 2002);
    
        return base.OnParametersSetAsync();
    }
    

See Also

In this article