From 96f642ee43fca830516488740aab46285a3707f9 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Thu, 28 May 2026 16:32:10 +0300 Subject: [PATCH 1/6] update with Nia --- .../how-to-use-with-report-server-net.md | 37 ++++++++++++++++--- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md index ef54d7a61..198b54a72 100644 --- a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md +++ b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md @@ -11,9 +11,11 @@ position: 2 # Using the Native Blazor Report Viewer with the Report Server for .NET -The article explains how to set up the Native Blazor Report Viewer to work with the Telerik Report Server for .NET. +This article explains how to configure the Native Blazor Report Viewer to connect to Telerik Report Server for .NET using token-based authentication. -The user account that will authenticate with the Report Server may be any User, including the Guest User, provided there is an enabled Token in its [Tokens](https://docs.telerik.com/report-server/dotnet-docs/token-authentication) collection. +[Telerik Report Server for .NET](https://docs.telerik.com/report-server/dotnet-docs/overview) is a server-based reporting solution that stores and manages reports centrally. Token authentication is the recommended security approach, as it provides better protection than username/password credentials and allows for token rotation without code changes. + +Any user account can authenticate with the Report Server, including the Guest User, provided there is an enabled token in the user's [token collection](https://docs.telerik.com/report-server/dotnet-docs/token-authentication). Personal tokens follow the JWT structure and are managed through the Report Server interface. ## Prerequisites @@ -26,7 +28,7 @@ The user account that will authenticate with the Report Server may be any User, ## Configuring the Native Blazor Report Viewer to work with the Report Server for .NET 1. Add NuGet package reference to the **Telerik.ReportViewer.BlazorNative** package hosted on the Progress Telerik proprietary NuGet feed. Ensure that the Telerik NuGet feed is added to the NuGet Package Sources by following [How to add the Telerik private NuGet feed to Visual Studio](slug:telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio). -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\NativeBlazorViewerUseWithReportServerNet.html region=NativeBlazorViewerConfiguringForRSNET}} @@ -42,11 +44,13 @@ The user account that will authenticate with the Report Server may be any User, {{source=CodeSnippets\BlazorNative\Docs\ReportViewers\TelerikLayout.razor region=NativeViewerTelerikLayout}} -1. Set up an endpoint on the server that will securely return the token used by the Report Server for .NET to authorize. For example, create an environment variable in the `launchSettins.json` file named **'RS_NET_TOKEN**, and store the token in it. Then, the endpoint can be configured to read and return the value of the environment variable: +1. Set up an endpoint on the server that will securely return the token used by the Report Server for .NET to authorize. For example, create an environment variable in the `launchSettings.json` file named **RS_NET_TOKEN** and store the token in it. Then, the endpoint can be configured to read and return the value of the environment variable: {{source=CodeSnippets\BlazorNative\Docs\Program.cs region=Get_RS_NET_TOKEN}} - For Blazor Web Assembly applications where the server is not available, the token can be injected on the `.RAZOR` page at build-time. Use `appsettings.{Environment}.json` files (they are bundled at build time), and read the token from the configuration. + For Blazor WebAssembly applications where the server is not available, the token can be injected on the `.RAZOR` page at build-time. Use `appsettings.{Environment}.json` files (they are bundled at build time) and read the token from the configuration. + + > important Never hardcode tokens directly in client-side code. Always retrieve them from a secure server endpoint or build-time configuration. Store tokens as environment variables or in secure configuration stores, and ensure the token endpoint is properly secured with authentication and authorization. 1. Configure an `HttpClient` in the `Program.cs` file that will be injected on the `.RAZOR` page on the next step when we make an HTTP request to get the token from the server. @@ -62,7 +66,30 @@ The user account that will authenticate with the Report Server may be any User, 1. Finally, run the project to see the rendered report. +## Troubleshooting + +### Token Not Retrieved + +If the viewer cannot retrieve the token, verify: +- The token endpoint is accessible from the client +- The `HttpClient` is properly configured and injected +- The environment variable `RS_NET_TOKEN` is set correctly +- The token has not expired + +### CORS Issues + +If you encounter CORS errors when accessing the token endpoint: +- Ensure CORS is properly configured in `Program.cs` +- Verify the endpoint allows requests from your Blazor application's origin +- Check browser console for specific CORS error messages + +### 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. + ## See Also +- [Configuring the Report Server for .NET for Authentication with Personal Tokens](https://docs.telerik.com/report-server/dotnet-docs/token-authentication) - [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) +- [Native Blazor Report Viewer Requirements](slug:telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview#Requirements) From 13a485eba168d5dc24a958aad65f51249f5f646f Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Thu, 28 May 2026 16:35:41 +0300 Subject: [PATCH 2/6] Update .gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 1129c2c53..a6eec4108 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,5 @@ search.html start-docs.sh watch.sh watch.sh/_assets/ +/.github/agents +/.nia From 936f7542e90d91831a3164613011332b5490c028 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Thu, 28 May 2026 18:22:59 +0300 Subject: [PATCH 3/6] update again with nia --- .../how-to-use-native-blazor-report-viewer.md | 53 ++++++++++++++++--- 1 file changed, 45 insertions(+), 8 deletions(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md index 256ff3825..219124753 100644 --- a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md +++ b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md @@ -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 with no HTML5/JavaScript 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 @@ -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]() 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 @@ -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}} @@ -62,7 +89,12 @@ 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()))"` 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. + > [!CAUTION] + > 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()))"`. + > + > 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: @@ -73,5 +105,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) From f9e4bba2257dca32390a406269c4578975018546 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Thu, 28 May 2026 18:28:41 +0300 Subject: [PATCH 4/6] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../how-to-use-native-blazor-report-viewer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md index 219124753..648c4a46c 100644 --- a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md +++ b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md @@ -15,7 +15,7 @@ The Native Blazor Report Viewer is a component built entirely with Blazor and Te **Key Benefits:** -- Pure Blazor implementation with no HTML5/JavaScript dependencies +- 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 From de4421145aea9db887d25bf0ccfabb7556215537 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Thu, 28 May 2026 18:31:01 +0300 Subject: [PATCH 5/6] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- .../how-to-use-native-blazor-report-viewer.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md index 648c4a46c..cfc83f0ad 100644 --- a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md +++ b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md @@ -89,10 +89,11 @@ 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}} - > [!CAUTION] + > 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()))"`. + > Do NOT set the `ReportSource` directly, for example: `ReportSource="@(new ReportSourceOptions(\"Report Catalog.trdp\", new Dictionary()))"`. > > 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. From 1cf3c24ebf920bc5fb59640d3706514980d0cbaf Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 29 May 2026 11:51:34 +0300 Subject: [PATCH 6/6] Update how-to-use-with-report-server-net.md --- .../how-to-use-with-report-server-net.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md index 198b54a72..38c8592f6 100644 --- a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md +++ b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-with-report-server-net.md @@ -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. +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