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
- Visual Studio 2019, version 16.4 or later
- Existing ASP.NET Core 3.1 and higher Blazor Server App or ASP.NET Core 3.1 and higher 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 it can be hosted locally in a Blazor Server application
- Blazor WebAssembly applications are executed directly on the browser UI thread. In other words, Blazor WebAssembly are stictly client-side applications and the Reports Web Service cannot be hosted in the same project. When using Blazor WebAssembly, the Reports Web Service has to be hosted in a separate project. For more information, see Blazor WebAssembly vs. Server. To host the Reporting Service locally, please follow the approach from either the How to Host Reports Service in ASP.NET Core 3.1 or the Hosting the Reports Service in ASP.NET Core in .NET 6 and .NET 7 with Top-Level Statements articles.
Adding the Native Blazor component
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 VS setting using the article How to add the Telerik private NuGet feed to Visual Studio.
-
Make sure app configuration inside the
Configure
method of theStartup.cs
(orProgram.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. -
Add JavaScript and CSS dependencies to the head element of the Pages/_Layout.cshtml (Blazor Server) or wwwroot/index.html (Blazor WebAssembly):
<script src="_content/Telerik.UI.for.Blazor/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.Blazor.Trial package *@ @* <script src="_content/Telerik.ReportViewer.BlazorNative.Trial/js/reporting-blazor-viewer.js" defer></script> *@ <link href="_content/Telerik.ReportViewer.BlazorNative/css/reporting-blazor-viewer.css" rel="stylesheet" /> @* Or this one if using the Telerik.ReportViewer.Blazor.Trial package *@ @* <link href="_content/Telerik.ReportViewer.BlazorNative.Trial/css/reporting-blazor-viewer.css" rel="stylesheet" /> *@
-
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). 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.0.1/kendo-theme-default/all.css" />
-
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
-
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>
-
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:@page "/" <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 }); }
-
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 "/" <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 }); }
Use the rest of the parameters exposed on the Blazor viewer component to setup its appearance and behavior as desired.
- Finally, run the project to see the rendered report.
Learn more about Blazor Reporting in Integration with Telerik Reporting documentation article.