Document Viewer Client-Side Configuration in Angular Application

  • 4 minutes to read

You can use the dx-report-viewer component to integrate the Web Document Viewer into your Angular-based application.

Root Options

The following table lists the dx-report-viewer component's options:

Option

Required / Optional

Description

reportUrl

Required

A string or Knockout observable that specifies the initial report's URL. For more information review the following help topic: Open a Report in ASP.NET Core Application.

width

Optional

A string that defines the Document Viewer's width. The default value is '100%'.

height

Optional

A string that defines the Document Viewer's height. The default value is '700px'.

cssClass

Optional

A string that specifies the CSS class name to attach to the root div element.

isMobile

Optional

A boolean value that specifies whether to configure the Document Viewer for mobile devices. Refer to the following topic for more information: Mobile Mode.

rtl

Optional

A boolean value that specifies whether a right-to-left layout is enabled in the Document Viewer's UI.

Nested Options

dxrv-request-options - A nested component that allows you to specify where to send requests from the Document Viewer.

Option

Required / Optional

Description

host

Required

A server-side project's URI.

invokeAction

Required

The URI path of the controller action that processes requests.

getLocalizationAction

Optional

The URI path of the controller action used to customize localization strings.

dxrv-remote-settings - A nested component that configures the Web Document Viewer to display documents that are created remotely with the DevExpress Report and Dashboard Server.

Option

Required / Optional

Description

serverUri

Required

Specifies the Report and Dashboard Server URI.

authToken

Required

Specifies the Bearer token to access documents on the DevExpress Report and Dashboard Server.

dxrv-mobile-mode-settings - A nested component that provides options for the Web Document Viewer's mobile mode (if the root isMobile option is enabled).

Option

Required / Optional

Description

readerMode

Optional

Specifies whether to enable a reader mode that displays document pages without page borders.

animationEnabled

Optional

Specifies whether actions are animated.

dxrv-tabpanel-setting - A nested component that allows you to customize the Document Viewer's tab panel.

Option

Required / Optional

Description

position

Optional

Specifies the tab panel's position ("Left" or "Right").

width

Optional

Specifies the tab panel's width.

dxrv-callbacks - A nested component that provides callbacks to customize the Document Viewer. These callbacks correspond to client-side events at the Document Viewer control level. For a list of available events and details on how to use each event, refer to the following help topic: Document Viewer Client-Side API.

NOTE
  • The Document Viewer passes one argument (the $event object) to callback handlers. This argument contains sender and args properties.

  • The sender object is the Document Viewer's JavaScript equivalent. It provides access to all available client-side methods.

Usage

The following code demonstrates how to use the dx-report-viewer component in a View. The code hides the Print and PrintPage commands in the toolbar, and creates a Print button.

<div>  
  <button (click)="print()"><span>Print</span></button>  
</div> 

 <div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px" cssClass='myViewer'>
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
        <dxrv-tabpanel-settings width="500" position="Left"></dxrv-tabpanel-settings>
        <dxrv-callbacks 
        (CustomizeMenuActions)="CustomizeMenuActions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

Run the application to see the results - as shown below:

TIP

To access the client-side model, use the bindingSender property:

this.viewer.bindingSender.OpenReport("reportName")