Reporting for React

• Apr 10, 2023
• 2 minutes to read

Topics in this section describe how to create reporting applications based on the React framework.

Document Viewer

Integration

• Document Viewer Integration in React Application

Customization

• Customize the Document Viewer Toolbar in React Application
• Customize the Document Viewer Tab Panel in React Application

Report Designer

Integration

• Report Designer Integration in React Application

Print and Export

• Print and Export in React Application
• Print and Export without a Preview in React Application

Localization

• Localization in Reporting for React

Client-Side API

To access the client-side Reporting API in React applications, use the following objects:

• Document Viewer - the JSReportViewer class
• Report Designer - the JSReportDesigner class

Client-side events in React are handled with callbacks specified in the 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. Review the following help topics with information on ASP.NET Core client-side events:

• WebDocumentViewerClientSideEventsBuilder
• ReportDesignerClientSideEventsBuilder

For more information on Knockout bindings, review the following help topics:

• Document Viewer Client-Side Configuration (Knockout Bindings)
• Report Designer Client-Side Configuration (Knockout Bindings)

The following code snippet illustrates how to use the CustomizeExportOptions callback to remove the XLS format from the Export To drop-down list and from the Export Options panel:

React

import { ExportFormatID } from 'devexpress-reporting/dx-webdocumentviewer'
import React from "react";

import ko from "knockout";

class ReportViewer extends React.Component {
    constructor(props) {
        super(props);
// ...

        this.callbacks = {
            CustomizeExportOptions: function(s,e) {
                e.HideFormat(ExportFormatID.XLS);
            }
        };
    }
    componentDidMount() {
      ko.applyBindings(
        {
          //...
          callbacks: this.callbacks
        },
        this.refs.viewer
      );
    }

// ...
}
export default ReportViewer;