Skip to content

Commit 823c9c8

Browse files
petar-i-todorovpetar-i-todorov
committed
docs: revamp wrd angular article
1 parent 2436f68 commit 823c9c8

File tree

2 files changed

+78
-53
lines changed

2 files changed

+78
-53
lines changed

‎_config.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,7 @@ angularsubsetversion: "17.2.0"
474474
kendosubsetversion: "2025.1.227"
475475
kendothemeversion: "10.2.0"
476476
blazoruiversion: "9.1.0"
477+
jqueryversion: "3.7.1"
477478
mindotnetversion: "8"
478479
mindotnetoutputdir: "\\bin\\Debug\\net8.0"
479480
dotnetversions: ".NET 8 and .NET 9"

‎knowledge-base/display-web-report-designer-in-angular-application.md‎

Lines changed: 77 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ res_type: kb
1515
<tbody>
1616
<tr>
1717
<td>Product Version</td>
18-
<td>13.2.19.918 or higher</td>
18+
<td>{{site.buildversion}}</td>
1919
</tr>
2020
<tr>
2121
<td>Product</td>
@@ -30,86 +30,110 @@ res_type: kb
3030

3131
## Description
3232

33-
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.
33+
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.
3434

35-
## Solution
36-
37-
Here are the major steps for integrating the jQuery-based Telerik Web Report Designer and HTML5 Report Viewer in an Angular application:
35+
## Prerequisites
3836

39-
* 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`:
37+
To follow the steps from this tutorial, you must have:
4038

41-
````HTML
42-
<head>
43-
//...
44-
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
45-
<script src="https://kendo.cdn.telerik.com/{{kendosubsetversion}}/js/kendo.all.min.js"></script>
46-
47-
<script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script>
48-
<script src="https://demos.telerik.com/reporting/api/reportdesigner/designerresources/js/webReportDesigner"></script>
49-
</head>
50-
````
39+
- 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).
40+
- An Angular application where you want to embed the designer.
5141

42+
## Solution
5243

53-
* Declare `jQuery` in the component where the Telerik Web Report Designer will be initialized:
44+
Follow these steps to integrate the Telerik Web Report Designer in your Angular application:
5445

55-
````TypeScript
56-
declare var $: any;
57-
````
46+
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:
5847

48+
````HTML
49+
<head>
50+
<!-- jQuery -->
51+
<script src="https://code.jquery.com/jquery-{{site.jqueryversion}}.min.js"></script>
52+
<!-- Kendo UI for jQuery -->
53+
<script src="https://localhost:5000/js/webReportDesigner.kendo-19.2.25.813.min.js"></script>
54+
<!-- Telerik Reporting resources -->
55+
<script src="https://localhost:5000/api/reports/resources/js/telerikReportViewer"></script>
56+
<script src="https://localhost:5000/api/reportdesigner/designerresources/js/webReportDesigner"></script>
57+
</head>
58+
````
5959

60-
* Initialize the Telerik Web Report Designer in `designer.component.ts`:
60+
> 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.
6161

62-
````TypeScript
63-
this.designer = $("#webReportDesigner").telerik_WebReportDesigner({
64-
serviceUrl: "https://demos.telerik.com/reporting/api/reportdesigner/",
65-
report: "Product Catalog.trdp"
66-
}).data("telerik_WebDesigner");
67-
````
62+
1. Generate a new Angular component for the report designer:
6863

64+
````bash
65+
ng generate component report-designer
66+
````
6967

70-
* Reference the Kendo LESS themes for the report viewer in `viewer.component.html`:
68+
1. In your `report-designer.component.html`, add a container element for the designer:
7169

7270
````HTML
73-
<link href="https://kendo.cdn.telerik.com/{{kendosubsetversion}}/styles/kendo.common.min.css" rel="stylesheet" id="common-css" />
74-
<link href="https://kendo.cdn.telerik.com/{{kendosubsetversion}}/styles/kendo.blueopal.min.css" rel="stylesheet" id="skin-css" />
75-
<div id="reportViewer">
76-
//...
77-
````
78-
79-
80-
* Initialize the Telerik HTML5 Report Viewer in `viewer.component.ts`:
81-
71+
<div id="webReportDesigner"></div>
72+
````
73+
74+
1. In your `report-designer.component.js(ts)`, declare jQuery and initialize the designer:
75+
76+
````JavaScript
77+
import { Component, OnInit } from '@angular/core';
78+
79+
@Component({
80+
selector: 'app-report-designer',
81+
templateUrl: './report-designer.component.html',
82+
styleUrls: ['./report-designer.component.css']
83+
})
84+
export class ReportDesignerComponent {
85+
constructor() {}
86+
87+
ngOnInit() {
88+
this.designer = $("#webReportDesigner").telerik_WebReportDesigner({
89+
serviceUrl: "https://localhost:5000/api/reportdesigner/", // Replace with your service URL
90+
report: "SampleReport.trdp" // Replace with your report file
91+
}).data("telerik_WebDesigner");
92+
}
93+
}
94+
````
8295
````TypeScript
83-
this.viewer = $("#reportViewer").telerik_ReportViewer({
84-
serviceUrl: "https://demos.telerik.com/reporting/api/reports/",
85-
reportSource: {
86-
report: 'Product Sales.trdx',
87-
parameters: {}
88-
}
89-
}).data("telerik_ReportViewer");
90-
````
91-
96+
import { Component, OnInit } from '@angular/core';
97+
98+
declare var $: any;
99+
100+
@Component({
101+
selector: 'app-report-designer',
102+
templateUrl: './report-designer.component.html',
103+
styleUrls: ['./report-designer.component.css']
104+
})
105+
export class ReportDesignerComponent implements OnInit {
106+
private designer: any;
107+
108+
ngOnInit(): void {
109+
this.designer = $("#webReportDesigner").telerik_WebReportDesigner({
110+
serviceUrl: "https://localhost:5000/api/reportdesigner/", // Replace with your service URL
111+
report: "SampleReport.trdp" // Replace with your report file
112+
}).data("telerik_WebDesigner");
113+
}
114+
}
115+
````
92116

93117
## Additional Resources
94118

95119
[Download the demo application from the Reporting-Samples GitHub Repository](https://github.com/telerik/reporting-samples/tree/master/telerik-angular-viewer-and-designer).
96120

97121
To run the example:
98122

99-
````powershell
100-
>npm install
101-
>npm start
123+
````bash
124+
$ npm install
125+
$ npm start
102126
````
103127

104128
## Known Issues
105129

106-
Several things that you should keep in mind when using Telerik Web Report Designer in your projects.
130+
Keep the following limitations in mind when using the Telerik Web Report Designer in Angular:
107131

108-
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.
132+
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.
109133

110-
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.
134+
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 `<style>` tags in your page's `<head>`. If you need to reinitialize the designer multiple times in your application, you may need to manually remove duplicate style elements. See the demo project's `designer.component.ts` file for implementation details.
111135

112-
1. Telerik Web Report Designer could not be integrated into an angular application together with Angular Telerik Report Viewer. That is why this article shows how to use the Telerik Web Report Designer in an angular application with jQuery-based HTML5 Telerik Report Viewer.
136+
3. Angular Report Viewer compatibility—The Telerik Web Report Designer cannot coexist with the [Angular Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/angular-report-viewer/angular-report-viewer-overview%}) in the same Angular application. While the designer includes its own built-in report viewer, if you need a standalone report viewer component, use either the [Native Angular Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/native-angular-report-viewer/overview%}) or the [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%}) instead.
113137

114138
## See Also
115139

0 commit comments

Comments
 (0)