Reporting for React

• Mar 27, 2024
• 4 minutes to read

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

DevExpress Web Reporting controls are composed of DevExtreme UI components. React versions supported by the DevExtreme Component Suite are listed in the following help topic: Supported Versions.

Constants and enums in typescript code may require the import directive. The following example declares the DevExpress.Reporting.Viewer.ZoomAutoBy enum:

import { ZoomAutoBy } from "devexpress-reporting/viewer/constants";

You can import the Document Viewer constants from the devexpress-reporting/dx-webdocumentviewer source, and the Report Designer constants from the devexpress-reporting/dx-reportdesigner source.

Document Viewer

Quick Start

• Document Viewer Integration in React Application
• Specify Parameter Values in a React Reporting Application

Customization

• Customize the Document Viewer Toolbar in React Application
• Customize the Document Viewer Tab Panel in React Application
• 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 React applications.

Events

Client-side events in React are handled with callbacks specified in 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 React callback handler functions are the same as events in an ASP.NET Core application specified with the WebDocumentViewerClientSideEventsBuilder methods.

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:

App.js

import './App.css';
import { useEffect, useRef } from 'react';
import { DxReportViewer, ExportFormatID} from 'devexpress-reporting/dx-webdocumentviewer';
import * as ko from 'knockout';

const ReportViewer = () => {
  const reportUrl = ko.observable("TestReport");
  const viewerRef = useRef();
  const requestOptions = {
    host: "https://localhost:5001/",
    invokeAction: "DXXRDV"
  };
  useEffect(() => {
    const viewer = new DxReportViewer(viewerRef.current, { 
      reportUrl, 
      requestOptions,
      callbacks: {
        CustomizeExportOptions: function(s,e) {
          e.HideFormat(ExportFormatID.XLS);
      }
        }
     });
    viewer.render(); 
    return () => viewer.dispose();
  })
  return (<div ref={viewerRef}></div>);
}

function App() {
  return (<div style={{ width: "100%", height: "1000px" }}>
      <ReportViewer />
  </div>);
  }

export default App;

Report Designer

Quick Start

• Report Designer Integration in React Application

Customization

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

• Use the ReportDesignerSettingsBase class to configure the Web End-User Report Designer.

Client-Side API

Client Object

Use the JSReportDesigner class to access the client-side API in Angular applications.

Events

Client-side events in React are handled with callbacks specified in 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 snippet displays a message when the Report Designer switches to another tab, specifies a measurement unit when the Report Designer opens a report, hides the Print Page action in Preview, and adds a new action button to Preview:

App.js

import './App.css';
import { useEffect, useRef } from 'react';
import { DxReportDesigner} from 'devexpress-reporting/dx-reportdesigner';
import {ActionId } from 'devexpress-reporting/dx-webdocumentviewer';
import * as ko from 'knockout';

const ReportDesigner = () => {
  const reportUrl = ko.observable("TestReport");
  const designerRef = useRef();
  const requestOptions = {
    host: "https://localhost:5001/",
    getDesignerModelAction: "DXXRD/GetDesignerModel"
  };

  useEffect(() => {
    const designer = new DxReportDesigner(designerRef.current, { 
      reportUrl, 
      requestOptions, 
      callbacks: {
        TabChanged(s,e) {
          alert("The tab was changed to " + e.Tab.displayName());
        },
        ReportOpened(s,e){
          e.Report.measureUnit("TenthsOfAMillimeter");
        },
        PreviewCustomizeMenuActions(s, e){
          var actions = e.Actions;
          // Get the "Print Page" action and hide it. 
          var printPageAction = e.GetById(ActionId.PrintPage);
          if (printPageAction)
              printPageAction.visible = false;
          // Add a new action. 
          actions.push({
              text: "Custom Command",
              imageClassName: "customButton",
              imageTemplateName: "dxrd-svg-wizard-warning",
              hasSeparator: false,
              disabled: ko.observable(false),
              visible: true,
              hotKey: { ctrlKey: true, keyCode: "Z".charCodeAt(0) },
              clickAction: function () {
                  alert('Clicked.');
              }
          })
        }
      }
    }
        );

    designer.render(); 
    return () => designer.dispose();
  })
  return (<div ref={designerRef}></div>);
}

function App() {
  return (<div style={{ width: "100%", height: "1000px" }}>
      <ReportDesigner />
  </div>);
  }

export default App;