devexpress-reporting-angular

Angular DevExpress Reporting. Report Designer and Report Viewer (devexpress-reporting-angular)

Usage

1. Install @devexress/reporting-angular using npm:

   npm install devexpress-reporting-angular --save

2. Import DxReportViewerModule and DxReportDesignerModule into your module (f.e AppModule class) as described below:

    
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxReportViewerModule, DxReportDesignerModule } from 'devexpress-reporting-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DxReportViewerModule,
    DxReportDesignerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Add one the reporting components to html template of your component (f.e. app.component.html) as described below:

   3.1 Report viewer usage

       <div>
           <dx-report-viewer [reportUrl]="reportUrl" height="800px" cssClass='myViewer'>
             <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
             <dxrv-tabpanel-settings width="500" position="Left"></dxrv-tabpanel-settings>
             <dxrv-callbacks 
               (BeforeRender)="BeforeRender($event)" 
               (CustomizeMenuActions)="CustomizeMenuActions($event)"
               (CustomizeElements)="CustomizeElements($event)">
             </dxrv-callbacks>
           </dx-report-viewer>
       </div>
   

   3.2 Report Designer Usage

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

2. Initialization of the attributes inside app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [
      './app.component.css'
      '../../../node_modules/jquery-ui/themes/base/all.css',
      '../../../node_modules/devextreme/dist/css/dx.common.css',
      '../../../node_modules/devextreme/dist/css/dx.light.css',
      '../../../node_modules/devexpress-reporting/css/web-document-viewer-light.min.css'
  ]
})
export class AppComponent {
  reportUrl: string = 'InvoiceReport';
  hostUrl: string = 'http://myReportingServer/';
  invokeAction: string = 'ReportViewer/Invoke';
  
  BeforeRender(event) {
    //...
  }
  CustomizeMenuActions(event) {
    //...
  }
  CustomizeElements(event) {
    //...
  }

  // Report Designer Model Options
  getDesignerModelAction: string = 'ReportDesigner/GetDesignerModel';
  PreviewCustomizeMenuActions(event) {
    //...
  }
}

Common Attributes

Full set of the report viewer options you can find in the documentation page.

Name	Required	Description
reporturl	(required)	A string or Knockout observable that specifies the URL of a report to open when the application starts.
width	(optional)	The width of the report viewer. Default value is '100%'.
height	(optional)	The height of the report viewer. Default value is '700px'.
cssClass	(optional)	class name to attach to the root div element of the report viewer.

Report Viewer Nested Options.

dxrv-callbacks (optional) - Callbacks that allow you to customize the Web Document Viewer. These callbacks correspond to the client-side events available at the Document Viewer control's level (the only difference is that a sender object is a Document Viewer's JavaScript equivalent). See Document Viewer's Client-Side API for a complete list of available events and more information on their use.

dxrv-request-options - Options for processing requests from the Web Document Viewer on the server side:

Name	Required	Description
host	(required)	A server-side project's URI.
invokeAction	(required)	The URI path of the controller action that processes requests.
getLocalizationAction	(optional)	he URI path of the controller action used to customize localization strings.

dxrv-tabpanel-settings (optional) - Settings of the tab panel appearance.

Name	Required	Description	Possible Values
width	(optional)	Width of the right panel in pixels.	N/A
position	(optional)	Tab panel position in the desktop mode.	"Left"/"Right"

Report Designer Nested Options

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

dxrd-request-options - Options for processing requests from the Report Designer on the server side:

Name	Required	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.

Note

• There is only one callback argument of the Report Viewer and the Report Designer events. You can find additional fields sender and args of the $event object
• Any methods of the reporting components are accessible by the sender property of the reporting angular component instance.