Report Designer Client-Side Configuration (Knockout Bindings)

• Jun 17, 2024
• 3 minutes to read

DevExpress Reporting utilizes the dxReportDesigner Knockout bindings to integrate the Web Report Designer into a JavaScript application. 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.

Use the ReportDesignerSettingsBase class to configure the Web End-User Report Designer on the client. For more information, refer to the following section: ReportDesignerSettingsBase for JavaScript Frameworks

You can configure the Report Designer component using the following settings:

reportUrl_Required._ A string or Knockout observable that specifies the URL of a report to open in the Report Designer when the application starts.developmentMode_Optional._ A Boolean value that enables the Development mode for extended diagnostics. Review the following help topic for more information: Troubleshooting: Server-Side Libraries Version.requestOptions_Required._ 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 for the Report Designer component. Refer to the following help topic for a complete list of available events: Report Designer’s Client-Side API.designerModelSettings_Optional_. A nested component that includes the following:

• allowMDI - Specifies whether a user can close all reports designed in the Report Designer and leave the designer empty, or with only a single report.
• rightToLeft - Enables right-to-left layout in the Web Report Designer user interface.
• dataSourceSettings - Allows you to hide data source actions from the Field List panel (part of the Web End-User Report Designer). Review the ReportDesignerDataSourceSettings class description for more information.
• reportPreviewSettings - Allows you to specify the Report Preview settings. Review the ReportPreviewSettings class description for more information.
• wizardSettings - Specifies the Report Wizard settings. Review the ReportDesignerWizardSettings class description for more information.
• parameterEditingSettings - Allows you to specify settings that configure user interface elements related to the editing of parameters, parameter groups, and parameter separators in the Web Report Designer. Review the ReportDesignerWizardSettings class description for more information.

The following code establishes the dxReportDesigner binding:

• View

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

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

• View Model

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;
            }
        },
        designerModelSettings: {
          wizardSettings: {
              useFullscreenWizard: true
          }
        },
    }

ko.applyBindings({ designerOptions });