Document Viewer's Client-Side Configuration (Angular)
- 3 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 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.Report.Preview.ActionId.Search);
if (searchAction)
searchAction.visible = false;
}
}