Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,41 @@ position: 1

# Using Native Blazor Report Viewer

The following articles will guide you on [how to use the new Native Blazor Report Viewer](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) and [embed the Native Blazor Report Viewer](https://www.telerik.com/blogs/embed-reporting-native-blazor-applications) in a web application.
The Native Blazor Report Viewer is a component built entirely with Blazor and Telerik UI for Blazor, providing a modern, native experience for displaying reports in Blazor Server and Blazor WebAssembly applications.

**Key Benefits:**

- Pure Blazor implementation (no HTML5 viewer wrapper; only the standard Telerik UI for Blazor JS/CSS dependencies)
- Seamless integration with Telerik UI for Blazor applications
- Full support for both Blazor Server and WebAssembly hosting models
- Can connect to either a Reporting REST Service or Report Server

This article guides you through integrating the Native Blazor Report Viewer into your application using either the item template or manual configuration.

## Prerequisites

- [Visual Studio 2019, version 16.4 or later](https://www.visualstudio.com/vs/)
- [Visual Studio 2022 or later](https://visualstudio.microsoft.com/vs/) or [Visual Studio Code](https://code.visualstudio.com/) with the C# Dev Kit extension
- Existing .NET {{site.mindotnetversion}} and higher Blazor Server App or .NET {{site.mindotnetversion}} 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 is strictly a client-side application, 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](https://www.telerik.com/faqs/blazor-ui/what-is-the-difference-between-blazor-webassembly-vs-server). To host the Reporting Service locally, please follow the approach from either the [Hosting the Telerik Reporting REST Service in ASP.NET Core with Top-Level Statements](slug:how-to-host-reports-service-in-aspnet-core-in-net-6-with-minimal-api) or the [Hosting the Telerik Reporting REST Service in an ASP.NET Core Application with Startup.cs](slug:telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-5) articles.
- The report viewer consumes reports generated and served from a running Reporting REST 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 is strictly a client-side application, and the Reporting REST Service cannot be hosted in the same project. When using Blazor WebAssembly, the Reporting REST Service has to be hosted in a separate project. For more information, see [Blazor WebAssembly vs. Server](https://www.telerik.com/faqs/blazor-ui/what-is-the-difference-between-blazor-webassembly-vs-server). To host the Reporting Service locally, please follow the approach from either the [Hosting the Telerik Reporting REST Service in ASP.NET Core with Top-Level Statements](slug:how-to-host-reports-service-in-aspnet-core-in-net-6-with-minimal-api) or the [Hosting the Telerik Reporting REST Service in an ASP.NET Core Application with Startup.cs](slug:telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-5) articles.

## Integration Options

The Native Blazor Report Viewer supports two backend integration options:

1. **Reporting REST Service** - Ideal when:
- You need full control over report generation
- Reports are stored as definition files (.trdp, .trdx) or cs/vb types.
- You want to host reports alongside your application
- You're building a new reporting solution

2. **Report Server** - Ideal when:
- You have centralized report management needs
- Multiple applications share the same reports
- You need role-based access control
- You want browser-based report authoring

This article covers both approaches. Choose the one that fits your architecture.

## Adding the Native Blazor Report Viewer component using an Item Template

Expand All @@ -30,7 +57,7 @@ Just make sure that you select **Native Blazor Report Viewer page**, instead of

> note Some of the 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](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server#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](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/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](<https://learn.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2010/w0572c5b(v=vs.100)>) dialog box.
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](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server#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](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/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](https://learn.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2010/w0572c5b(v=vs.100)) dialog box.

## Adding the Native Blazor Report Viewer Component Manually

Expand All @@ -42,7 +69,7 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t

> note 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](slug:telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview) is located. With the [ASP.NET Core Hosted](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=windows) template, that would be the `Blazor.Server` project.

1. (Optional) The [Native Blazor Report Viewer](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview) depends on version **9.1.0** of the [Telerik UI for Blazor](https://www.telerik.com/blazor-ui) product. If [Telerik UI for Blazor](https://www.telerik.com/blazor-ui) is already used in your Blazor application, this step can be skipped. Otherwise, add the [Telerik UI for Blazor](https://www.telerik.com/blazor-ui) JS and its [Kendo theme](https://www.telerik.com/design-system/docs/themes/get-started/introduction/) 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):
1. (Optional) The [Native Blazor Report Viewer](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview) depends on version **{{site.blazoruiversion}}** of the [Telerik UI for Blazor](https://www.telerik.com/blazor-ui) product. If [Telerik UI for Blazor](https://www.telerik.com/blazor-ui) is already used in your Blazor application, this step can be skipped. Otherwise, add the [Telerik UI for Blazor](https://www.telerik.com/blazor-ui) JS and its [Kendo theme](https://www.telerik.com/design-system/docs/themes/get-started/introduction/) 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):

{{source=CodeSnippets\Blazor\Docs\ReportViewers\NativeBlazorViewerUseNativeBlazorReportViewer.html region=NativeBlazorViewerAddingTheNativeBlazorReportViewerComponentManually}}

Expand All @@ -62,7 +89,13 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t

{{source=CodeSnippets\BlazorNative\Docs\ReportViewers\NativeBlazorViewerWithRest.razor region=NativeViewerWithRESTService}}

> 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 a circular dependency that causes endless refreshes of the Report Viewer that lead to an infinite sequence of requests to the Reporting REST Service.
> warning
>
> The `ReportSource` of the viewer must be set using data binding as shown in the example above: `@bind-ReportSource="@ReportSource"`.
>
> Do NOT set the `ReportSource` directly, for example: `ReportSource="@(new ReportSourceOptions(\"Report Catalog.trdp\", new Dictionary<string, object>()))"`.
>
> Direct assignment introduces a circular dependency that causes endless refreshes of the Report Viewer, leading to an infinite sequence of requests to the Reporting REST Service.

1. If you need to display the 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:

Expand All @@ -73,5 +106,10 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t

## See Also

- [Integration with Telerik Reporting](https://docs.telerik.com/blazor-ui/integrations/reporting)
- [Native Blazor Report Viewer Overview](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview)
- [Using Native Blazor Report Viewer with Report Server for .NET](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net)
- [Native Blazor Report Viewer Options](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/api-reference/options)
- [Native Blazor Report Viewer Commands](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/api-reference/commands)
- [Native Blazor Report Viewer Events](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/api-reference/events)
- [Hosting Telerik Reporting REST Service in ASP.NET Core](slug:how-to-host-reports-service-in-aspnet-core-in-net-6-with-minimal-api)
- [Telerik Blazor Integration with Telerik Reporting](https://docs.telerik.com/blazor-ui/integrations/reporting)
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ If you encounter CORS errors when accessing the token endpoint:

### Guest User Access

The **Guest User** can only authenticate using tokens. It does not have a password and cannot use username/password authentication. Ensure at least one enabled token is added to the Guest User account by an administrator. - [Guest User Administration](https://www.telerik.com/report-server/documentation/implementer-guide/user-management/guest-user).
The Guest User can only authenticate using tokens. It does not have a password and cannot use username/password authentication. Ensure at least one enabled token is added to the Guest User account by an administrator: [Guest User Administration](https://www.telerik.com/report-server/documentation/implementer-guide/user-management/guest-user).

## See Also

Expand Down