Report Designer Client-Side Configuration in Angular Application

  • 3 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 following table 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 client-side events at the Report Designer control level. For a complete list of available events and details on how to use each event, refer to the following help topic: Report Designer's Client-Side API.

NOTE
  • The Report Designer passes only one argument (the $event object) to callback handlers. This argument contains 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 snippets demonstrate how to use the dx-report-designer component in a View:

<div>  
  <button (click)="open()"><span>Open</span></button>  
</div> 
<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>

Run the application to see the results - as shown below:

TIP

To access the client-side model, use the bindingSender property:

this.documentViewer1.bindingSender.OpenReport("reportName")
See Also