Reporting for Angular
- 4 minutes to read
The topics in this section describe how to create reporting applications based on the Angular framework.
DevExpress Web Reporting controls are composed of DevExtreme UI components. Angular versions supported by the DevExtreme Component Suite are listed in the following help topic: Supported Versions.
Document Viewer
Quick Start
- Use Visual Studio Templates to Create an Angular Application with a Document Viewer
- Create an Angular Front-End Application with a Document Viewer
Customization
- Document Viewer Client-Side Configuration in Angular Application
- Customize the Document Viewer Toolbar in Angular Application
- Customize the Document Viewer Tab Panel in Angular Application
- Specify Parameter Values in an Angular Reporting Application
- ASP.NET Core Reporting Best Practices (Angular Front-End)
- Tasks and Solutions for ASP.NET Core Applications
A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.
Client-Side API
Client Object
Use the JSReportViewer class to access the client-side API in Angular applications.
Events
Client-side events in Angular are handled with callbacks specified in the Knockout bindings. For more information on Knockout bindings, review the following help topic: Document Viewer Client-Side Configuration (Knockout Bindings)
Event names and data in event arguments passed to the Angular callback handler functions are the same as events in an ASP.NET Core application specified with the WebDocumentViewerClientSideEventsBuilder methods.
The following code demonstrates how to use the dx-report-viewer component in a View. The code hides the Print and PrintPage commands in the toolbar, disables asynchronous search, and creates a Print button.
<div>
<button (click)="print()"><span>Print</span></button>
</div>
<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-export-settings [useSameTab]="false" [useAsynchronousExport]="false"></dxrv-export-settings>
<dxrv-search-settings [useAsyncSearch]="false"></dxrv-search-settings>
<dxrv-callbacks
(CustomizeMenuActions)="CustomizeMenuActions($event)">
</dxrv-callbacks>
</dx-report-viewer>
</div>
Report Designer
Quick Start
- Use Visual Studio Templates to Create an Angular Application with a Report Designer
- Create an Angular Front-End Application with a Report Designer
Customization
- Report Designer Client-Side Configuration in Angular Application
- Custom Functions in the Expression Editor (Angular)
- ASP.NET Core Reporting Best Practices (Angular Front-End)
- Tasks and Solutions for ASP.NET Core Applications
A general technique that allows you to customize the UI elements in Reporting components: Use Custom HTML Templates.
Client-Side API
Client Object
Use the JSReportDesigner class to access the client-side API in Angular applications.
Events
Client-side events in Angular are handled with callbacks specified in the Knockout bindings. For more information on Knockout bindings, review the following help topic: Report Designer Client-Side Configuration (Knockout Bindings)
Event names and data in event arguments passed to the Angular callback handler functions are the same as events in an ASP.NET Core application specified with the ReportDesignerClientSideEventsBuilder methods.
The following code snippets demonstrate how to configure the Report Designer component in the client application:
<div>
<button (click)="open()"><span>Open</span></button>
</div>
<div>
<dx-report-designer [reportUrl]="reportUrl" height="700px">
<dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
<dxrd-callbacks (CustomizeMenuActions)="CustomizeMenuActions($event)">
</dxrd-callbacks>
<dxrd-designer-model-settings [allowMDI]="true">
<dxrd-datasource-settings [allowAddDataSource]="false" [allowRemoveDataSource]="false"></dxrd-datasource-settings>
<dxrd-preview-settings>
<dxrv-export-settings [useSameTab]="false"></dxrv-export-settings>
<dxrv-progressbar-settings position="TopRight"></dxrv-progressbar-settings>
<dxrv-search-settings [useAsyncSearch]="false"></dxrv-search-settings>
</dxrd-preview-settings>
<dxrd-wizard-settings [useFullscreenWizard]="false" [enableSqlDataSource]="false"></dxrd-wizard-settings>
</dxrd-designer-model-settings>
</dx-report-designer>
</div>