Embedding Telerik Reporting in Single Page Web Reporting Applications
Single-Page Applications (SPA) dynamically rewrite the web page content rather than loading entire new pages, making the website faster and feel more like a native app. This article summarizes the most popular approaches for integrating and using Telerik Reporting into SPA Reporting applications.
Supported Operating Systems and Docker Containers
The Telerik Reporting REST Service for .NET and SPA Report Viewers let you deploy seamlessly your Web Reporting Applications in multiple environments. The article Available .NET Support for Operating Systems and Docker Containers elaborates on the specifics when deploying Telerik Reporting on different environments.
Designing Reports in SPA Web Reporting Applications
The Web Report Designer is an HTML/CSS/JS client-side jQuery widget that lets developers embed a report designer into their web reporting applications. It is ready for embedding in the SPA Reporting Applications to allow the users to create, edit, and preview their Telerik Web Reports directly from the browser.
Web Report Designer Requirements
The Web Report Designer requires a Report Designer REST service, whose fully functional implementation resides in the Telerik.WebReportDesigner.Services assembly/package as explained in the section Web Report Designer Implementation.
Web Report Designer Implementation
The following tutorials elaborate on embedding the web report designer jQuery widget into SPA Reporting projects. The jQuery web designer widget requires a Web Report Designer REST service:
Generating Reports for Single Page Web Reporting Applications
The Single Page Applications hosting a Telerik Report Viewer require a Telerik Reporting REST Service to serve the report documents. The service provides an Application Programming Interface (API) over HTTP to the Reporting Engine that processes and renders Telerik Reports. The fully functional implementation of the service is available in the Telerik.Reporting.Services.AspNetCore assembly/package. It may be embedded in any ASP.NET Core and Blazor Server Reporting Application and exposed in a custom controller (for example, ReportsController) inheriting the basic ReportsControllerBase class. The ReportsController may be used as a source of Report documents by Web Reporting, Desktop Reporting, and other third-party client applications.
Implementation
There are different methods for configuring the Telerik Reporting REST Service in an ASP.NET Core or Blazor Server Reporting project:
- Hosting the Telerik Reporting REST Service in ASP.NET Core in .NET 6+ with Minimal API
- Hosting the Telerik Reporting REST Service in ASP.NET Core in .NET 6 and .NET 8 with Top-Level Statements
- Hosting the Telerik Reporting REST Service in an ASP.NET Core Application in .NET 6, .NET 8, and .NET 9 with Startup.cs
Displaying Reports in SPA Web Reporting Applications
The Telerik Reporting product comes with ready-to-use Report Viewers for the following SPA Frameworks:
-
You may find two Report Viewer implementations for the Angular framework:
The Angular Report Viewer is a wrapper of the pure HTML5 Report Viewer, which is an HTML/CSS/JS client-side widget suitable for any web application that works with JavaScript. The Angular Report Viewer does not use Kendo UI for Angular components and doesn't require a subscription for this suite.
The Native Angular Report Viewer is a native Angular widget built on top of Kendo UI for Angular components and as such requires subscription for this suite.
-
The React Report Viewer is a wrapper of the pure HTML5 Report Viewer, which is an HTML/CSS/JS client-side widget suitable for any web application that works with JavaScript.
Requirements
.NET 6 introduced a globalization-invariant mode which, if enabled, does not allow the creation of any culture except the invariant culture. The Report Engine relies on instantiating cultures to support localization, formatting, and unit conversion, so enabling invariant globalization will break the engine's functionality. Refer to the Only invariant culture is supported in globalization-invariant mode article for instructions on how to disable the Invariant Globalization mode.
Implementation
-
Angular
The article Integrating the Angular Report Viewer with Angular CLI is s step-by-step tutorial on integrating the Angular HTML5 Report Viewer in an [Angular CLI application](https://angular.dev/tools/cli.
Use the article Integrating the Native Angular Report Viewer with the Reporting Service as a tutorial for embedding the Native Angular Report Viewer into your Angular Single Page Application.
-
React
Follow the instructions in How to Use React Report Viewer with REST Service.