devexpress-reporting-angular

DevExpress Angular Reporting

Usage

1. Use the following command to install the devexress-reporting-angular npm package:

   npm install devexpress-reporting-angular

2. Import DxReportViewerModule and DxReportDesignerModule in your module (for instance, the AppModule class) as shown 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 { }
   

3. Add the required reporting component to your component's HTML template (for example, app.component.html) as demonstrated below:

   • Report Viewer

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

   • Report Designer

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

4. Specify the component's options and event handlers in the app.component.ts file:

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'my-app',
     encapsulation: ViewEncapsulation.None,      
     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/analytics-core/dist/css/dx-analytics.common.css',
         '../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css',
         '../../node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css',          
         '../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css',
         '../../node_modules/devexpress-reporting/dist/css/dx-reportdesigner.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 Options

The full set of the reporting components' 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 default value is '100%'.
height	(optional)	The default value is '700px'.
cssClass	(optional)	The class name to attach to the root div element.

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

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

• The sender property of the corresponding angular component instance provides access to all availalble methods.