The requested page is not available for the requested platform. You are viewing the content for Default platform.

Report Designer's Client-Side Configuration (Angular)

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.

rtl

Optional

A boolean value that specifies whether a right-to-left layout is enabled in the Report Designer's UI.

allowMDI

Optional

A boolean value that specifies whether the Report Designer allows users to close all the reports or a single report should remain associated with it.

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 more information on their use.

Note the following callback specifics:

  • 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 listed in the Report Designer's Client-Side API topic.

Usage

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

<div>
  <dx-report-designer [reportUrl]="reportUrl" height="700px" [allowMDI]="allowMDI" 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:

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

// ...

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

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