Reporting Knockout Bindings

• Jul 05, 2018
• 3 minutes to read

DevExpress Reporting provides custom declarative Knockout bindings for the Web Document Viewer and End-User Report Designer. When constructing user interfaces in the MVVM design pattern, you can use these bindings in the View code (the HTML document) to link it with your View Model and obtain the required data.

dxReportViewer Binding

The dxReportViewer binding injects the Web Document Viewer into an associated DOM element.

This binding contains the following parameters:

• reportUrl (required) - A string or Knockout observable that specifies the URL of a report opened 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) - The URI of a server-side project.
  • 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.
• callbacks (optional) - Callbacks allowing 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’s Client-Side API for a complete list of available events and more information on their use.
• isMobile (optional) - A boolean value that specifies whether the Document Viewer should be configured for mobile devices. See Mobile Mode for information on this Viewer 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

"use strict"

const host = 'http://localhost:10000/',
    reportUrl = ko.observable("Products"),
    viewerOptions = {
        reportUrl,
        requestOptions: {
            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.Report.Preview.ActionId.Search);
                if (searchAction)
                    searchAction.visible = false;
            }
        }
    }

ko.applyBindings({ viewerOptions });

dxReportDesigner Binding

The dxReportDesigner binding injects the End-User Web Report Designer into an associated DOM element.

This binding contains the following parameters:

• reportUrl (required) - A string or Knockout observable that specifies the URL of a report opened in the Report Designer when the application starts.

• requestOptions - Options for processing requests from the Report Designer on the server side:

  • host (required) - The URI of a server-side project.
  • getDesignerModelAction (required) - The URI path of the controller action that returns the Report Designer model.
  • getLocalizationAction (optional) - The URI path of the controller action used to customize localization strings.
• callbacks (optional) - Callbacks allowing you to customize the Report Designer. These callbacks correspond to the client-side events available at the Report Designer control’s level (the only difference is that a sender object is a Report Designer’s JavaScript equivalent). See Report Designer’s Client-Side API for a complete list of available events and more information on their use.

The View code below shows how to use the dxReportDesigner binding:

HTML

<div data-bind="dxReportDesigner: designerOptions" ></div>

In the View Model, initialize binding options and activate this binding as follows:

JS

"use strict"

const host = 'http://localhost:11111/',
    reportUrl = "Products",
    designerOptions = {
        reportUrl,
        requestOptions: {
            host, 
            getDesignerModelAction: "/ReportDesigner/GetReportDesignerModel",
            getLocalizationAction: "/ReportDesigner/GetLocalization"
        },
        callbacks: {
            CustomizeMenuActions: function (s,e) {
                // For demonstration purposes. Get the "Exit" action and hide it. 
                var exitAction = e.GetById(DevExpress.Designer.Report.ActionId.Exit);
                if (exitAction)
                    exitAction.visible = false;
            }
        }
    }

ko.applyBindings({ designerOptions });