Customize Report Viewer in Angular by Loading Its Resources Locally

Environment

Product Version	13.0.19.222+
Product	Progress® Telerik® Reporting
Project Type	Angular application

Description

I want to customize the Angular Wrapper Report Viewer's default layout and behavior by loading a custom template, stylesheet, or JS resource.

Prerequisites

Angular requires a folder called assets to be used for serving custom files, so they could be included in the production build. This is done via the assets property in the .angular-cli.json file (or .angular.json for Angular 6+ applications).

"assets": [
    "src/assets",
    ...
],

Depending on the Angular version, it may be necessary to add the full path for each asset in the assets array rather than the whole folder, for example, src/assets/telerikReportViewerTemplate.html

Check out the documentation for this feature here to learn how to use it: Angular workspace configuration.

Important notes

Keep in mind that this will require merging the new changes for each of the local files manually on upgrade.

Solution

The following three scenarios could be applied together (if all resources have to be modified). However, if you intend to modify just one resource, for example, the script file, check only the corresponding section.

Scenario 1

How to load the viewer's JS resource (telerikReportViewer-18.0.24.305.js) locally?

Example

I would like to change the behavior of the report viewer widget (toolbar, parameters area, document map)

How to

1. Copy the script file from C:\Program Files (x86)\Progress\Telerik Reporting 2024 Q1\Html5\ReportViewer\js\telerikReportViewer-18.0.24.305.js to assets folder

2. In index.html load the jQuery library (required for the JS logic) and the local file itself:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="assets/telerikReportViewer-18.0.24.305.js"></script>
   

Scenario 2

How to load the viewer's HTML template (telerikReportViewerTemplate-18.0.24.305.html) locally?

Example

I would like to change the layout of the report viewer widget (hide toolbar buttons, add additional buttons, localize string resources, etc.)

How to

1. Copy the template file from C:\Program Files (x86)\Progress\Telerik Reporting 2024 Q1\Html5\ReportViewer\templates\telerikReportViewerTemplate-18.0.24.305.html to assets folder

2. Load it setting templateUrl option of the report viewer like:

   <tr-viewer #viewer1 
       [serviceUrl]="'http://localhost:12345/api/reports/'"
       [templateUrl]="'assets\\telerikReportViewerTemplate-18.0.24.305.html'"
       [reportSource]="{
           report: 'SampleReport.trdp',
           parameters: {}
       }"
       >
   </tr-viewer>
   

Scenario 3

How to load the viewer's styles (telerikReportViewer-18.0.24.305.css) locally?

Example

I would like to change the default styling of the viewer widget.

How to

1. Important: This depends on the template, so make sure that local telerikReportViewerTemplate-18.0.24.305.html is used (check Scenario 2).
2. Copy the stylesheet file from C:\Program Files (x86)\Progress\Telerik Reporting 2024 Q1\Html5\ReportViewer\styles\telerikReportViewer-18.0.24.305.css to assets folder

3. Open telerikReportViewerTemplate-18.0.24.305.html file and change the path to the stylesheet resource from:

   <link href="{service}resources/styles/telerikReportViewer-18.0.24.305.css" rel="stylesheet" />
   

   To:

   <link href="assets/telerikReportViewer-18.0.24.305.css" rel="stylesheet" />
   

See Also

• Angular workspace configuration
• Using Angular Wrapper Report Viewer with Angular CLI