diff --git a/_config.yml b/_config.yml index b6e5624ff..6af07217b 100644 --- a/_config.yml +++ b/_config.yml @@ -474,6 +474,7 @@ angularsubsetversion: "17.2.0" kendosubsetversion: "2025.1.227" kendothemeversion: "10.2.0" blazoruiversion: "9.1.0" +jqueryversion: "3.7.1" mindotnetversion: "8" mindotnetoutputdir: "\\bin\\Debug\\net8.0" dotnetversions: ".NET 8 and .NET 9" diff --git a/knowledge-base/display-web-report-designer-in-angular-application.md b/knowledge-base/display-web-report-designer-in-angular-application.md index 7e1d6be53..1d927b22d 100644 --- a/knowledge-base/display-web-report-designer-in-angular-application.md +++ b/knowledge-base/display-web-report-designer-in-angular-application.md @@ -15,7 +15,7 @@ res_type: kb Product Version - 13.2.19.918 or higher + {{site.buildversion}} Product @@ -30,65 +30,89 @@ res_type: kb ## Description -With the [Telerik® Reporting R3 2019](https://www.telerik.com/support/whats-new/reporting/release-history/progress-telerik-reporting-r3-2019-13-2-19-918) we have introduced our new Telerik Web Report Designer, which is a pure HTML5/JavaScript/CSS3 jQuery-based widget that allows developers to integrate a report designer into their web applications. +The Telerik Web Report Designer is a jQuery-based HTML5/JavaScript/CSS3 widget that allows you to integrate a report designer into your Angular web applications. While currently there is no dedicated Angular wrapper of the component, you can still integrate the jQuery version in your application, as explained in this article. -## Solution - -Here are the major steps for integrating the jQuery-based Telerik Web Report Designer and HTML5 Report Viewer in an Angular application: +## Prerequisites -* Add a reference to all required [Telerik Web Report Designer resources]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}#prerequisites) in the main html page of the application. In the demo project linked below, this is `index.html`: +To follow the steps from this tutorial, you must have: - ````HTML - - //... - - - - - - -```` +- A running ASP.NET application that hosts both a [Telerik Reporting REST service]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}) and a [Telerik Report Designer REST service]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/how-to-set-up-in-.net-5-and-.net-core-3.1-applications%}#setting-up-the-report-designer-rest-service). +- An Angular application where you want to embed the designer. +## Solution -* Declare `jQuery` in the component where the Telerik Web Report Designer will be initialized: +Follow these steps to integrate the Telerik Web Report Designer in your Angular application: - ````TypeScript -declare var $: any; -```` +1. Add references to all required [Telerik Web Report Designer resources]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}#prerequisites) in your main HTML page (`index.html`). Replace `https://localhost:5000` with your actual ASP.NET application URL: + ````HTML + + + + + + + + + + ```` -* Initialize the Telerik Web Report Designer in `designer.component.ts`: + > The `webReportDesigner.kendo-19.2.25.813.min.js` file is not served automatically by the Report Designer REST service. You need to copy this file from your Telerik Reporting installation directory (`C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q3\Html5\ReportDesigner\js\`) to your ASP.NET Core application's `wwwroot/js/` folder and reference it as shown above. This approach uses the Kendo UI subset included with your Telerik Reporting license instead of requiring a separate Kendo UI license. - ````TypeScript -this.designer = $("#webReportDesigner").telerik_WebReportDesigner({ - serviceUrl: "https://demos.telerik.com/reporting/api/reportdesigner/", - report: "Product Catalog.trdp" - }).data("telerik_WebDesigner"); -```` +1. Generate a new Angular component for the report designer: + ````bash + ng generate component report-designer + ```` -* Reference the Kendo LESS themes for the report viewer in `viewer.component.html`: +1. In your `report-designer.component.html`, add a container element for the designer: ````HTML - - -
- //... -```` - - -* Initialize the Telerik HTML5 Report Viewer in `viewer.component.ts`: - +
+ ```` + +1. In your `report-designer.component.js(ts)`, declare jQuery and initialize the designer: + + ````JavaScript + import { Component, OnInit } from '@angular/core'; + + @Component({ + selector: 'app-report-designer', + templateUrl: './report-designer.component.html', + styleUrls: ['./report-designer.component.css'] + }) + export class ReportDesignerComponent { + constructor() {} + + ngOnInit() { + this.designer = $("#webReportDesigner").telerik_WebReportDesigner({ + serviceUrl: "https://localhost:5000/api/reportdesigner/", // Replace with your service URL + report: "SampleReport.trdp" // Replace with your report file + }).data("telerik_WebDesigner"); + } + } + ```` ````TypeScript -this.viewer = $("#reportViewer").telerik_ReportViewer({ - serviceUrl: "https://demos.telerik.com/reporting/api/reports/", - reportSource: { - report: 'Product Sales.trdx', - parameters: {} - } - }).data("telerik_ReportViewer"); -```` - + import { Component, OnInit } from '@angular/core'; + + declare var $: any; + + @Component({ + selector: 'app-report-designer', + templateUrl: './report-designer.component.html', + styleUrls: ['./report-designer.component.css'] + }) + export class ReportDesignerComponent implements OnInit { + private designer: any; + + ngOnInit(): void { + this.designer = $("#webReportDesigner").telerik_WebReportDesigner({ + serviceUrl: "https://localhost:5000/api/reportdesigner/", // Replace with your service URL + report: "SampleReport.trdp" // Replace with your report file + }).data("telerik_WebDesigner"); + } + } + ```` ## Additional Resources @@ -96,20 +120,20 @@ this.viewer = $("#reportViewer").telerik_ReportViewer({ To run the example: -````powershell ->npm install ->npm start +````bash +$ npm install +$ npm start ```` ## Known Issues -Several things that you should keep in mind when using Telerik Web Report Designer in your projects. +Keep the following limitations in mind when using the Telerik Web Report Designer in Angular: -1.[Telerik Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) does not support theming. The Web Designer is built to use a customized version of the Kendo SASS Default theme. The Designer loads all styles that are required by itself. There is no additional option that could prevent it. The required styles are added to the body header of the document. If the application uses another Kendo theme, there will be conflicts between the two themes. +1. Theming limitations—The [Telerik Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) does not support custom theming. It uses a customized version of the Kendo SASS Default theme that loads automatically. If your Angular application uses a different Kendo theme, style conflicts may occur between the two themes. -1. Because the Telerik Web Report Designer loads all required styles when the designer widget is created, and in the latest version there is no check, if the resources are already loaded, you will need to clean up the duplicated resources. See `designer.component.ts` in the demo project for more details. +1. Duplicate CSS resources—The Web Report Designer automatically loads its required CSS styles each time it is initialized, without checking if they are already present. This can result in duplicate `