Embedding Reports / Displaying Reports / Web Application / Blazor Report Viewer

New to Telerik Reporting? Download free 30-day trial

Integrating the Blazor Report Viewer

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

Prerequisites

Adding the Blazor Report Viewer component using an item template

The Blazor Report Viewer item template allows you to quickly and easily add the Blazor Report Viewer to your application.

If you wish to connect the Report Viewer to a Reporting REST service, you can analogically follow the steps outlined in the How to Use HTML5 Report Viewer with REST Service documentation article. Just make sure that you select Blazor Report Viewer page, instead of HTML5 Report Viewer page when adding a new item to your project, and follow the steps in the 'Add new Report Viewer' dialog.

Some options differ between the item templates based on the project they are being added to. For example, the option to host a new REST Service is not available in a Blazor WebAssembly project, since it is a strictly client-side application.

If you wish to connect the Report Viewer to a Report Server instance, refer to the Configuring the HTML5 Report Viewer to work with Report Server using Item Templates section in the How to Use HTML5 Report Viewer with Report Server documentation article, again, making sure that you select the Blazor Report Viewer page in the Add New Item dialog box.

Adding the Blazor Report Viewer component manually

  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 the Visual Studio 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(or Program.cs if .NET 6+ is used) can serve static files:

    app.UseStaticFiles();

  3. Add JavaScript dependencies to the head element of the Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly): 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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>*@

  4. Add Telerik Kendo UI SASS-Based Themes to the head element of the Pages/_Host.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly). The Razor syntax for a server application differs and you need to escape the @ symbol as @@:

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-main.min.css" />

    Alternatively, you can use the Kendo UI LESS-Based Themes (Kendo UI LESS-Based Themes are not compatible with Telerik UI for Blazor and should not be used together):

    <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />

  5. 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):

    <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>*@

  6. If using the Telerik Reporting 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.

    When referencing the Reports service from another application the ServiceUrl setting should be the absolute URI to the service. Please remember to set the actual ReportSource along with the eventual parameters:

    @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" />

  7. 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. Please remember to set the actual ReportServer and ReportSource settings:

    @page "/"
@using Telerik.ReportViewer.Blazor
<style>
    #rv1 {
        position: relative;
        width: 1200px;
        height: 600px;
    }
</style>
<ReportViewer ViewerId="rv1"
              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" />

  8. Use the rest of the parameters exposed on the Blazor viewer component to set up its appearance and behavior as desired.

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

Learn more about Blazor Reporting in Integration with Telerik Reporting documentation article.

In this article
Related articles
Not finding the help you need? Improve this article