devexpress-reporting-angular v23.1.10

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

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

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

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.