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

New to Telerik Reporting? Download free 30-day trial

Using Native Blazor Report Viewer

The following article will guide you on how to use the new Native Blazor Report Viewer in a Blazor web application.

Prerequisites

Adding the Native Blazor Report Viewer component using an Item Template

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

Suppose you wish to connect the Report Viewer to a Reporting REST service. In that case, 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 Native 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 Native Blazor Report Viewer page in the Add New Item dialog box.

Adding the Native Blazor Report Viewer Component Manually

  1. Add NuGet package reference to the Telerik.ReportViewer.BlazorNative (or Telerik.ReportViewer.BlazorNative.Trial) package hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to the 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 (or Program.cs if .NET 6+ with Top Level Statements is used) file can serve static files:

    app.UseStaticFiles();

    When it comes to Blazor WebAssembly applications, the above step should be implemented in the project used as the Server where the Telerik Reporting REST Service is located. With the ASP.NET Core Hosted template, that would be the Blazor.Server project.

  3. Add JavaScript and CSS dependencies to the head element of the Pages/_Layout.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly), or Components/App.razor (Blazor Web App):

    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
@* Or this one if using the Telerik.UI.for.Blazor.Trial package *@
@* <script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script> *@

<script src="_content/Telerik.ReportViewer.BlazorNative/js/reporting-blazor-viewer.js" defer></script>
@* Or this one if using the Telerik.ReportViewer.BlazorNative.Trial package *@
@* <script src="_content/Telerik.ReportViewer.BlazorNative.Trial/js/reporting-blazor-viewer.js" defer></script> *@

<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
@* Or this one if using the Telerik.UI.for.Blazor.Trial package *@
@* <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" /> *@

<link href="_content/Telerik.ReportViewer.BlazorNative/css/reporting-blazor-viewer.css" rel="stylesheet" />
@* Or this one if using the Telerik.ReportViewer.BlazorNative.Trial package *@
@* <link href="_content/Telerik.ReportViewer.BlazorNative.Trial/css/reporting-blazor-viewer.css" rel="stylesheet" /> *@

  4. Add Telerik UI for Blazor Built-in Themes to the head element of the Pages/_Layout.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly), or Components/App.razor (Blazor Web App). The Razor syntax for a server application differs and you need to escape the @ symbol as @@:

    <link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/4.4.0/kendo-theme-default/all.css" />

  5. You can set the project to recognize all Telerik components without explicit @using statements on every .razor file. To achieve this, add the following to your ~/_Imports.razor:

    @using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.ReportViewer.BlazorNative

  6. Wrap the content of the main layout file(by default, the ~/Shared/MainLayout.razor file in the Blazor project) with a razor component called TelerikLayout.razor:

    @inherits LayoutComponentBase

<TelerikRootComponent>
    @Body
</TelerikRootComponent>

  7. If using the 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:

    @page "/"
@* For Blazor Web Apps, an interactive render mode should be used, for example: *@
@* @rendermode InteractiveServer *@

<PageTitle>Report Viewer</PageTitle>

<ReportViewer
    ServiceType="@ReportViewerServiceType.REST"
    ServiceUrl="https://demos.telerik.com/reporting/api/reports"
    @bind-ReportSource="@ReportSource"
    @bind-ScaleMode="@ScaleMode"
    @bind-ViewMode="@ViewMode"
    @bind-ParametersAreaVisible="@ParametersAreaVisible"
    @bind-DocumentMapVisible="@DocumentMapVisible"
    @bind-Scale="@Scale">
</ReportViewer>

@code {
    public ScaleMode ScaleMode { get; set; } = ScaleMode.Specific;
    public ViewMode ViewMode { get; set; } = ViewMode.Interactive;
    public bool ParametersAreaVisible { get; set; }
    public bool DocumentMapVisible { get; set; }
    public double Scale { get; set; } = 1.0;

    public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Report Catalog.trdx", 
        new Dictionary<string, object>
        {
            // Add parameters if applicable
        });
}

    The ReportSource of the viewer should be set as in the above example. i.e. with the binding @bind-ReportSource="@ReportSource". Setting the ReportSource directly, for example, like ReportSource="@(new ReportSourceOptions("Report Catalog.trdp", new Dictionary<string, object>()))" introduces circular dependency that causes endless refreshes of the Report Viewer that lead to infinite sequence of requests to the Reporting REST Service starting with Registe Client, etc.

  8. 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:

    @page "/"
@* For Blazor Web Apps, an interactive render mode should be used, for example: *@
@* @rendermode InteractiveServer *@

<PageTitle>Report Viewer</PageTitle>

<ReportViewer 
    ServiceType="@ReportViewerServiceType.ReportServer" 
    @bind-ReportSource="@ReportSource"
    @bind-ScaleMode="@ScaleMode"
    @bind-ViewMode="@ViewMode"
    @bind-ParametersAreaVisible="@ParametersAreaVisible"
    @bind-DocumentMapVisible="@DocumentMapVisible"
    @bind-Scale="@Scale">
    <ReportViewerSettings>
        <ReportServerSettings Url="https://demos.telerik.com/report-server/" Username="demouser" Password="demopass"></ReportServerSettings>
    </ReportViewerSettings>
</ReportViewer>

@code {
    public ScaleMode ScaleMode { get; set; } = ScaleMode.Specific;
    public ViewMode ViewMode { get; set; } = ViewMode.Interactive;
    public bool ParametersAreaVisible { get; set; }
    public bool DocumentMapVisible { get; set; }
    public double Scale { get; set; } = 1.0;

    public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Published/Dashboard", new Dictionary<string, object>
    {
        // Add parameters if applicable
    });
}

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

  10. 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