Telerik Report Viewer Library

Introduction

The Telerik Report Viewer is an Angular library that allows seamless integration of Telerik Reporting into Angular applications. It enables embedding of reports from a Telerik Report Server and provides a rich, interactive report viewing experience, with customization and control over various events such as rendering, exporting, and errors.

Features

• Easy integration with Telerik Reporting Server.
• Customizable report viewer with support for different scaling options.
• Handles important lifecycle events such as report rendering, exporting, and error handling.
• Support for username and password authentication for report servers.

Installation

To use the Telerik Angular Report Viewer in your Angular application, follow the steps below:

Step 1: Install the Library

Run the following command to install the library and its dependency, jQuery:

npm install telerik-report-viewer jquery --save

Step 2: Update angular.json

You need to add jQuery and the Telerik Report Viewer script to the scripts section of your angular.json file:

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "scripts": ["node_modules/jquery/dist/jquery.min.js"]
          }
        }
      }
    }
  }
}

Step 3: Add Required CSS Files

To style the Telerik report viewer, include the following styles in your index.html file:

<link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.blueopal.min.css" rel="stylesheet" />

Usage

Step 1: Import the Library

To use the report viewer in your application, import the TelerikAngularReportViewerComponent into your module or your standalone component:

import { TelerikAngularReportViewerComponent } from "telerik-report-viewer";

Step 2: Add the Component to Your Template

Add the component into your template and pass the necessary inputs, including server URL, report name, and scaling options.

<telerik-report-viewer [serverUrl]="'http://your-report-server-url/reports'" [reportSrc]="'YourReportName.trdp'" [serverUserName]="'admin'" [serverPassword]="'password'" [scale]="1.0"></telerik-report-viewer>

Inputs

• serverUrl: (required) URL of the Telerik Report Server.
• reportSrc: (required) Name or path of the report to be loaded.
• serverUserName: (optional) Username for authenticating with the report server.
• serverPassword: (optional) Password for authenticating with the report server.
• scale: (optional) Scaling factor for the report viewer (default is 1.0).

Outputs (Events)

• renderComplete: Emitted when the report rendering is completed.
• fileLoaded: Emitted when the report file is successfully loaded.
• renderingBegin: Emitted at the start of report rendering.
• renderingEnd: Emitted when the report rendering ends.
• exportBegin: Emitted at the start of the report export process.
• exportEnd: Emitted when the report export process ends.
• error: Emitted if an error occurs during report rendering or export.
• pageReady: Emitted when a page of the report is ready.

Events Usage Example

You can listen to the component's events to handle specific actions:

<telerik-report-viewer [serverUrl]="'http://your-report-server-url/reports'" [reportSrc]="'YourReportName.trdp'" (renderComplete)="onRenderComplete()" (error)="onError($event)"> </telerik-report-viewer>

In your component:

onRenderComplete() {
  console.log('Report rendering completed!');
}

onError(error: string) {
  console.error('Error:', error);
}