Skip to main content

Report Designer Client-Side Configuration (Knockout Bindings)

  • 2 minutes to read

DevExpress Reporting provides the dxReportDesigner Knockout binding for the Web Report Designer. 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 provides the following parameters:

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

  • requestOptions - Options to process requests from the Report Designer on the server side:

    • host (required) - A server-side project’s URI.
    • 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 that allow you to customize the Report Designer. These callbacks correspond to the client-side events available at the Report Designer control’s level (the 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.

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

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

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

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

const host = 'https://localhost:52454/',
    reportUrl = "Products",
    designerOptions = {
        reportUrl: reportUrl,
        requestOptions: {
            host: host, 
            // If you use the ASP.NET Core backend:
            // getDesignerModelAction: "/DXXRD/GetDesignerModel"
            // If you use the ASP.NET MVC backend:
            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.Reporting.Designer.Actions.ActionId.Exit);
                if (exitAction)
                    exitAction.visible = false;
            }
        }
    }

ko.applyBindings({ designerOptions });