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

• Integrating Native Blazor Viewer in Blazor Server or WebAssembly App
• ASP.NET Core Blazor routing and navigation