Document Viewer Client-Side Configuration (Knockout Bindings)

• Jul 13, 2021
• 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.

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

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

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

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 });