Report Designer Client-Side Configuration (Angular)

• Apr 03, 2020
• 2 minutes to read

You can use the dx-report-designer component to integrate the Web Report Designer into your Angular-based application.

Root Options

The table below lists the dx-report-designer component’s options:

Option	Required / Optional	Description
reportUrl	Required	A string or Knockout observable that specifies the initial report’s URL.
width	Optional	A string that defines the Report Designer’s width. The default value is ‘100%’.
height	Optional	A string that defines the Report Designer’s height. The default value is ‘700px’.
cssClass	Optional	A string that specifies the CSS class name to attach to the root div element.

Nested Options

dxrd-request-options - A nested component that allows you to specify where to send requests from the Report Designer.

Option	Required / Optional	Description
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.

dxrd-callbacks - A nested component that provides callbacks to customize the Report Designer. These callbacks correspond to the client-side events at the Report Designer control’s level. See Report Designer's Client-Side API for a complete list of available events and and how they are used.

Note

• The Report Designer passes only one argument (the $event object) to callback handlers. This argument contains the sender and args properties.

• The sender object is the Report Designer’s JavaScript equivalent. It provides access to all available client-side methods.

Usage

The following code snippet demonstrates how to use the dx-report-designer component in a View:

HTML

<div>
  <dx-report-designer [reportUrl]="reportUrl" height="700px" cssClass='myDesigner'>
    <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
    <dxrd-callbacks
      (CustomizeMenuActions)="CustomizeMenuActions($event)">
    </dxrd-callbacks>
  </dx-report-designer>
</div>

Specify the component’s options and event handlers in the View Model as shown below:

TS

import DevExpress from 'devexpress-reporting/dx-reportdesigner'

// ...

export class AppComponent {
  reportUrl: string = 'InvoiceReport';
  hostUrl: string = 'http://localhost:10000/';
  getDesignerModelAction: string = 'ReportDesigner/GetReportDesignerModel';

  CustomizeMenuActions(event) {
    // For demonstration purposes, get the "Cut" action and hide it. 
    var cutAction = event.args.GetById(DevExpress.Analytics.Tools.ActionId.Cut);
    if (cutAction)
      cutAction.visible = false;
  }
}