New to Telerik Reporting? Download free 30-day trial

Overview

Below is the list of all options available during initialization for the Native Angular Report Viewer.

How to configure the options

The options can be set from the .HTML/.TS component file or both(combined):

<reporting-angular-viewer
    #viewer
    [reportSource]="reportSource"
    [serviceUrl]="serviceUrl"
    viewMode="interactive"
    [keepClientAlive]="true">
</reporting-angular-viewer>
import { Component, ViewChild  } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { ReportSourceOptions } from '@progress/telerik-common-report-viewer'

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.scss']
    })

    export class AppComponent {
        title = 'Native Angular Report Viewer Demo';

        @ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;

        reportSource: ReportSourceOptions = { report: "Dashboard.trdx", parameters: { ReportYear: 2004 } };
        serviceUrl: string = "https://demos.telerik.com/reporting/api/reports";
    }

Options

Property Description
serviceType

string, required;

Specifies the type of service that the report viewer will connect to. Available options are:

  • REST - Telerik Reporting REST Service
  • reportServer - Telerik Report Server
serviceUrl

string, required if serviceType is REST;

Sets the address of the Reporting REST Service;

reportSource

ReportSourceOptions, required;

Specifies the report and initial report parameter values to be displayed in the report viewer.

The ReportSourceOptions object is made up of the following properties:

  • report - Gets or sets a string that uniquely identifies a report from the Reporting REST service or the Telerik Report Server.
  • parameters - Gets or sets an object with properties name/value equal to the report parameters names and values used in the report definition.

To set the reportSource to a physical (TRDP/TRDX/TRBP) file, provide a relative path to the Report property of the ReportSourceOptions object.


reportSource: ReportSourceOptions = { report: "Dashboard.trdx", parameters: { ReportYear: 2004 } };
                

To set the ReportSource to a type definition:

  1. Make sure that the Reporting REST Service project references the project containing the type definition.
  2. Pass the assembly qualified name (format: "{type}, {assembly}") of the report's type to the Report property of the ReportSourceOptions object.

reportSource: ReportSourceOptions = { report: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary", parameters: { ReportYear: 2004 } };
                
scaleMode

string, optional;

Sets how the report pages to be scaled. Available options are:

  • fitPageWidth - the pages are scaled proportional to fit the entire width in the viewer's view port;
  • fitPage- the pages are scaled proportional to fit the entire page in the view port;
  • specific - the pages are scaled with the Scale value;
    Default value is: specific
scale

double, optional;

Sets the scale factor for the report pages. The scale takes effect when the ScaleMode is set to Specific.

Default value is 1.0 (100%); the original size of the report

viewMode

Sets if the report is displayed in interactive mode or in print preview.

The available values are:

  • interactive - enables drill-down interactivity, etc;
  • printPreview - the report is paged according to the page settings; For more information please see Interactive vs. Print Layout.
    Default value is: interactive
pageMode

Sets if the report is displayed in Single page or Continuous scroll mode.

The available values are:

  • singlePage - only one page is loaded in the view port;
  • continuousScroll - more than one page could be loaded in the view port;
    Default value is: continuousScroll
printMode

Specifies how the viewer should print reports.

The available values are:

  • autoSelect - specifies that the viewer should automatically decide which option for printing to use depending on browser's version and whether the PDF plug-in is available or not. This is the default value;
  • forcePDFFile - specifies that the document for printing will be downloaded as a file (in PDF format with a special 'print' script enabled);
  • forcePDFPlugin - specifies that the viewer should always use the PDF plug-in;
parametersAreaVisible

boolean, optional;

Determines whether the viewer's parameters area is displayed if any parameter editor exists.

Default value: true

documentMapVisible

boolean, optional;

Determines whether the viewer's document map is displayed if any bookmark is defined.

Default value: true

keepClientAlive

boolean, optional;

Determines whether the client will be kept alive. When set to true, expiration of the client will be prevented by continually sending a request to the server, determined by the Reporting REST service's ClientSessionTimeout.

Default value: false

width

string, optional;

The width of the component.

Default value: 100%

height

string, optional;

The height of the component.

Default value: 700px

contentTabIndex

number, optional;

Controls what value will be set on the tabindex attribute of the reportng-angular-viewer component.

Default value is 1000.

authenticationToken

string, optional;

If provided, a Bearer token will be set in the Authorization header for requests to the Reporting REST service. The token is not sent only when requesting document resources. The reason is that resources like images are referenced with relative URLs in the HTML of the report document, hence the requests for them are made by the browser.

In this article