The requested page is not available for the requested platform. You are viewing the content for Default platform.

Document Viewer's Client-Side Configuration (Angular)

  • 3 min to read

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

Root Options

The table below 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.

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. See Mobile Mode for more information on this Viewer version.

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 enables you to configure 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 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 the 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 the client-side events at the Document Viewer control's level. See Document Viewer's Client-Side API for a complete list of available events and more information on their use.

Note the following callback specifics:

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

  • The sender object is the Document Viewer's JavaScript equivalent. It provides access to all available client-side methods listed in the Document Viewer's Client-Side API topic.

Usage

The following code snippet demonstrates how to use the dx-report-viewer component in a View:

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

Specify the component's options and event handlers in the View Model as shown below:

import DevExpress from 'devexpress-reporting/dx-web-document-viewer'

// ...

export class AppComponent {
  reportUrl: string = 'InvoiceReport';
  hostUrl: string = 'http://localhost:10000/';
  invokeAction: string = 'WebDocumentViewer/Invoke';

  CustomizeMenuActions(event) {
    // For demonstration purposes, get the "Search" action and hide it. 
    var searchAction = event.args.GetById(DevExpress.Reporting.Viewer.ActionId.Search);
    if (searchAction)
      searchAction.visible = false;
  }
}