New to Telerik Reporting? Download free 30-day trial

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 jQuery in 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.

  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.

  2. 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.

See Also

In this article