Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Specify Parameter Values in a React Reporting Application

  • 2 minutes to read

Use report parameters to control data displayed in a report. For more information on web report parameters, review the following help topic: Use Report Parameters.

#Use the Parameters Panel

Open the Parameters Panel and use its editors to specify parameter values. Click Submit to apply the values to the report and display the document.

Use the Parameters Panel to specify parameter values in a React Reporting application

#Handle the ParametersInitialized Event

You can initialize parameters before the Document Viewer loads the document.

The following code sample handles the client-side ParametersInitialized event:

typescript
'use client';
import React from 'react'
import ReportViewer, { RequestOptions, Callbacks, DxReportViewerRef } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onClick = () => viewerRef.current?.instance().ResetParameters();
  const onParametersReset = ({ args }: { args: any }) => {
    console.log("ParametersReset");
    console.log("Parameter " + args.Parameters[0].path + " is reset to " + args.Parameters[0].value);
  };
  const onParametersSubmitted = ({ args }: { args: any }) => {
    console.log("ParametersSubmitted");
    args.Parameters.forEach((parameter: any) => {
      console.log("Parameter " + parameter.Key + " value " + JSON.stringify(parameter.Value));
    });
  };
  const onParametersInitialized = ({ args }: { args: any }) => {
    console.log("ParametersInitialized");
    args.ActualParametersInfo.forEach((parameterModel: any) => {
      console.log("Parameter " + parameterModel.parameterDescriptor.name + " value " + JSON.stringify(parameterModel.parameterDescriptor.value));
    });
    args.ParametersModel['parameter1'] = 10;
    args.ShouldRequestParameters = false;
  };

  return (
    <>
      <button onClick={onClick}>Reset parameters</button>
      <ReportViewer ref={viewerRef} reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks ParametersReset={onParametersReset} ParametersSubmitted={onParametersSubmitted} ParametersInitialized={onParametersInitialized} />
      </ReportViewer>
    </>
  )
}

export default App