Reporting for React

• Oct 18, 2023
• 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.

Document Viewer

Quick Start

• Document Viewer Integration in React 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 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 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 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 snippet displays a message when Report Designer switches to another tab, specifies measurement unit when 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;

Print and Export

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

Localization

• Localization in Reporting for React