Progress® Telerik® Reporting R3 2020

How to Use Blazor Report Viewer

The following article guides you how to use Blazor Report Viewer in a Blazor web application.

  • Visual Studio 2019, version 16.4 or later

  • Existing ASP.NET Core 3.1 Blazor Server App or ASP.NET Core 3.1-hosted Blazor WebAssembly App

  • The report viewer consumes reports generated and served from a running Reports Web Service. Such can be referenced from another application or Telerik Report Server instance or it can be hosted locally in the Blazor application. In case you need to host it locally follow the article How to Host Reports Service in ASP.NET Core 3+.

Adding the HTML5 Report Viewer component

  1. Add NuGet package reference to the Telerik.ReportViewer.Blazor (or Telerik.ReportViewer.Blazor.Trial) package hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to VS setting using the article How to add the Telerik private NuGet feed to Visual Studio.

  2. Make sure app configuration inside the Configure method of the Startup.cs can serve static files:

    C#
    app.UseStaticFiles();
  3. Add JavaScript and CSS dependencies in the head element of the Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly):

    CSHTML
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
    @* For Reports service hosted in the same project: *@
    <script src="/api/reports/resources/js/telerikReportViewer"></script>
    
    @* For Reports service hosted in another application / Report Server use absolute URI: *@
    @*<script src="https://demos.telerik.com/report-server/api/reports/resources/js/telerikReportViewer"></script>*@
    
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" rel="stylesheet" />
  4. Add the dedicated interop.js dependency at the end of the body element of the Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly):

    CSHTML
    <script src="_content/telerik.reportviewer.blazor/interop.js" defer></script>
    
    @* Or this one if using the Telerik.ReportViewer.Blazor.Trial package *@
    @*<script src="_content/telerik.reportviewer.blazor.trial/interop.js" defer></script>*@
  5. If using Reports web service (either locally hosted or in another application) use the following snippet to place the viewer component in a razor page like Pages/Index.razor. Note that when referencing the Reports service from another application the ServiceUrl setting should be the absolute URI to the service. Remember to set the actual ReportSource along with eventual parameters:

    razor
    @page "/"
    @using Telerik.ReportViewer.Blazor
    
    <style>
        #rv1 {
            position: relative;
            width: 1200px;
            height: 600px;
        }
    
    </style>
    
    <ReportViewer ViewerId="rv1"
                  ServiceUrl="/api/reports"
                  ReportSource="@(new ReportSourceOptions()
                                  {
                                      Report = "YOUR_REPORT_HERE.trdp"
                                  })"
                  Parameters="@(new ParametersOptions { Editors = new EditorsOptions { MultiSelect = EditorType.ComboBox, SingleSelect = EditorType.ComboBox } })"
                  ScaleMode="@(ScaleMode.Specific)"
                  Scale="1.0" />
  6. If displaying reports from a Report Server instance use the following snippet to place the viewer component in a razor page like Pages/Index.razor. Remember to set the actual ReportServer and ReportSource settings:

    razor
    @page "/"
    @using Telerik.ReportViewer.Blazor
    
    <style>
        #rv1 {
            position: relative;
            width: 1200px;
            height: 600px;
        }
    
    </style>
    
    <ReportViewer ViewerId="rv2"
                  ReportServer="@(new ReportServerOptions {  Url = "https://demos.telerik.com/report-server/", Username = "demouser", Password = "demopass" })"
                  ReportSource="@(new ReportSourceOptions()
                                  {
                                      Report = "Published/Dashboard"
                                  })"
                  ScaleMode="@(ScaleMode.Specific)"
                  Scale="1.0" />
  7. Use the rest of the parameters exposed on the Blazor viewer component to setup its appearance and behavior as desired.

  8. Finally, run the project to see the rendered report.

In this article
Not finding the help you need?