Document Viewer Client-Side Configuration (Knockout Bindings)

• Aug 28, 2023
• 3 minutes to read

DevExpress Reporting provides the dxReportViewer Knockout binding for the Web Document Viewer. When you construct user interfaces in the MVVM design pattern, you can use this binding in the View code (the HTML document) to link it to your View Model and obtain the required data.

This binding contains the following parameters:

• reportUrl (required) - A string or Knockout observable that specifies the URL of a report to open in the Web Document Viewer when the application starts.

• accessibilityCompliant (optional) - Enables accessibility mode. Review the following help topic for more information: Web Reporting - Accessibility.

• requestOptions - Options for processing requests from the Web Document Viewer on the server side:

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

• remoteSettings - Options to configure the Web Document Viewer to display documents that are created remotely with the DevExpress Report and Dashboard Server. See Use the Report and Dashboard Server as a Backend for a step-by-step tutorial.

  • serverUri (required) - Specifies the Report and Dashboard Server URI.
  • authToken (required) - Specifies the Bearer token to access documents on the Report and Dashboard Server.

• exportSettings - Options to configure the Web Document Viewer print and export settings.

  • useSameTab (optional) - Specifies whether the print and export operations are performed in the same browser tab with the Document Viewer control. Review the ExportSettings.UseSameTab topic for more information.
  • showPrintNotificationDialog (optional) - Specifies whether to display an additional dialog that allows users to download the PDF file sent to printing. Review the ExportSettings.ShowPrintNotificationDialog topic for more information.
  • useAsynchronousExport (optional) - Allows you to export documents asynchronously. Review the DxDocumentViewerExportSettings.UseAsynchronousExport topic for more information.

• callbacks (optional) - Callbacks that allow you to customize the Web Document Viewer. These callbacks correspond to the client-side events available at the Document Viewer control’s level (the only difference is that a sender object is a Document Viewer’s JavaScript equivalent). See Document Viewer Client-Side API for a complete list of available events and more information on their use.

• tabPanelSettings (optional) - Provides settings for the Web Document Viewer’s tab panel.

  • position - Specifies the tab panel’s position (one of the DevExpress.Analytics.TabPanel.Position enumeration values).
  • width - Specifies the tab panel’s width.

• isMobile (optional) - A boolean value that specifies whether to configure the Document Viewer for mobile devices.

• mobileModeSettings (optional) - Provides settings for the Web Document Viewer’s mobile mode (if the isMobile option is enabled).

  • readerMode - Specifies whether to enable the reader mode that displays document pages without indicating page borders.
  • animationEnabled - Specifies whether animation is enabled on performing various actions.

• developmentMode (optional) - A boolean value that enables the Development mode for extended diagnostics. Review the follolwing help topic for more information: Trooubleshooting: Server-Side Libraries Version.

Use the dxReportViewer binding in a View, for instance, as shown below:

HTML

<div data-bind="dxReportViewer: viewerOptions" ></div>

Initialize binding options within a View Model and activate this binding as follows:

JS

const host = 'http://localhost:10000/',
    reportUrl = ko.observable("Products"),
    viewerOptions = {
        reportUrl: reportUrl,
        requestOptions: {
            host: host,
            invokeAction: "/WebDocumentViewer/Invoke",
            getLocalizationAction: "/WebDocumentViewer/GetLocalization"
        },
        callbacks: {
            // For demonstration purposes. Get the "Search" action and hide it. 
            CustomizeMenuActions: function (s,e) {
                var searchAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.Search);
                if (searchAction)
                    searchAction.visible = false;
            }
        }
    }

ko.applyBindings({ viewerOptions });