Integrate the Web Report Designer in Angular
Environment
| Product Version | 13.2.19.918 or higher |
| Product | Progress® Telerik® Reporting |
| Web Report Designer | Angular |
Description
With the Telerik® Reporting R3 2019 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.
Solution
Here are the major steps for integrating the jQuery-based Telerik Web Report Designer and HTML5 Report Viewer in an Angular application:
-
Add a reference to all required Telerik Web Report Designer resources in the main html page of the application. In the demo project linked below, this is
index.html:<head> //... <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script> <script src="https://demos.telerik.com/reporting/api/reports/resources/js/telerikReportViewer"></script> <script src="https://demos.telerik.com/reporting/api/reportdesigner/designerresources/js/webReportDesigner"></script> </head> -
Declare
jQueryin the component where the Telerik Web Report Designer will be initialized:declare var $: any; -
Initialize the Telerik Web Report Designer in
designer.component.ts:this.designer = $("#webReportDesigner").telerik_WebReportDesigner({ serviceUrl: "https://demos.telerik.com/reporting/api/reportdesigner/", report: "Product Catalog.trdp" }).data("telerik_WebDesigner"); -
Reference the Kendo LESS themes for the report viewer in
viewer.component.html:<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" id="common-css" /> <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" id="skin-css" /> <div id="reportViewer"> //... -
Initialize the Telerik HTML5 Report Viewer in
viewer.component.ts:this.viewer = $("#reportViewer").telerik_ReportViewer({ serviceUrl: "https://demos.telerik.com/reporting/api/reports/", reportSource: { report: 'Product Sales.trdx', parameters: {} } }).data("telerik_ReportViewer");
Additional Resources
Download the demo application from the Reporting-Samples GitHub Repository.
To run the example:
>npm install
>npm start
Known Issues
Several things that you should keep in mind when using Telerik Web Report Designer in your projects.
1.Telerik Web Report Designer 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.
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.tsin the demo project for more details.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.