From d0660f3f4e3b3949f1b9765829c8fe100f199426 Mon Sep 17 00:00:00 2001 From: petar-i-todorov Date: Mon, 27 Oct 2025 11:19:58 +0200 Subject: [PATCH 1/3] chore: fix slug --- .../expressions/extending-expressions/user-functions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/designing-reports/connecting-to-data/expressions/extending-expressions/user-functions.md b/designing-reports/connecting-to-data/expressions/extending-expressions/user-functions.md index a96e461b5..21faeca00 100644 --- a/designing-reports/connecting-to-data/expressions/extending-expressions/user-functions.md +++ b/designing-reports/connecting-to-data/expressions/extending-expressions/user-functions.md @@ -47,7 +47,7 @@ As of 2025 Q1 (19.0.25.211), the __User Function__ resolution behavior has been ## User Function Discovery -The automatic user function discovery applies only to assemblies that are explicitly configured through [assemblyReferences]({%slug telerikreporting/using-reports-in-applications/export-and-configure/configure-the-report-engine/assemblyreferences-element%}) or [typeReferences]({%slug telerikreporting/using-reports-in-applications/export-and-configure/configure-the-report-engine/typereferences-element%}) in the application configuration. This behavior prevents potential security vulnerabilities where malicious actors could exploit report definitions to invoke unintended methods from the host application. +The automatic user function discovery applies only to assemblies that are explicitly configured through [assemblyReferences]({%slug telerikreporting/using-reports-in-applications/export-and-configure/configure-the-report-engine/assemblyreferences-element%}) or [typeReferences]({%slug telerikreporting/using-reports-in-applications/export-and-configure/configure-the-report-engine/typeReferences-element%}) in the application configuration. This behavior prevents potential security vulnerabilities where malicious actors could exploit report definitions to invoke unintended methods from the host application. Even functions defined directly in the executing assembly are not automatically discovered. This behavior is intentional to prevent issues in scenarios where the Reporting engine is embedded in applications with many publicly accessible classes and methods. For example, in applications that host the Web Report Designer, automatically loading all functions from the executing assembly could clutter the function list with unintended methods. From 7b95d2939fd4dd37361b0a4660a606799714208a Mon Sep 17 00:00:00 2001 From: petar-i-todorov Date: Wed, 29 Oct 2025 18:36:19 +0200 Subject: [PATCH 2/3] docs: revamp the wrd angular article --- _config.yml | 1 + ...-report-designer-in-angular-application.md | 130 +++++++++++------- 2 files changed, 78 insertions(+), 53 deletions(-) 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 `