New to Telerik Reporting? Download free 30-day trial

How to Use React Report Viewer with REST Service

This tutorial demonstrates how to add the React Report Viewer component to a new React application and display a report coming from the Telerik Reporting REST Service.

Prerequisites

The following list describes the prerequisites for this tutorial:

  • Review the React Report Viewer Requirements.

  • A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.

  • Copy of the "Product Catalog.trdp" report file from [TelerikReporting_InstallDir]\Report Designer\Examples placed in the folder used by the UriReportSourceResolver in the Reporting REST service project.

  • Entry with the default connection string used by Telerik Reporting sample reports in the configuration file of the project hosting the Reporting REST service. For example:

    web.config file:

    <connectionStrings>
        <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
                    connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
                    providerName="System.Data.SqlClient" />
    </connectionStrings>
    

    appsettings.json file:

    {
        ...
        "ConnectionStrings": [
            {
              "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
              "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
              "providerName": "System.Data.SqlClient"
            }
        ]
    }
    

    Using React Report Viewer in React application

    All paths and URL links in the described steps must be adapted according to your project setup.

Steps:

  1. Create new React application using the React tutorial.

    npx create-react-app my-app-with-viewer
    cd my-app-with-viewer
    
  2. Install jQuery by using the following command:

    npm install jquery
    
  3. Install the Telerik React Report Viewer NPM package by running:

    npm install @progress/telerik-react-report-viewer
    
  4. Once installed, import the TelerikReportViewer in the index.js file:

    import { TelerikReportViewer } from '@progress/telerik-react-report-viewer'
    
  5. Add the report viewer to the page:

    let viewer;
    ReactDOM.render(
        <div>
          <TelerikReportViewer
              ref={ el => viewer = el }
              serviceUrl="http://localhost:[portnumber]/api/reports/"
              reportSource={{
                  report: 'ProductCatalog.trdp',
                  parameters: {}
              }}
              viewerContainerStyle = {{
                  position: 'absolute',
                  left: '5px',
                  right: '5px',
                  top: '40px',
                  bottom: '5px',
                  overflow: 'hidden',
                  clear: 'both',
                  fontFamily: 'ms sans serif'
              }}
              viewMode="INTERACTIVE"
              scaleMode="SPECIFIC"
              scale={1.0}
              enableAccessibility={false} />
        </div>,
      document.getElementById('root')
    );
    
  6. Style the viewer using the desired Kendo UI theme (еither using Less-Based Themes or Sass-Based Themes): Add references to the Less-based CSS files in the <head> element of index.html:

    <!-- The required Less-based styles -->
    <link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.blueopal.min.css" rel="stylesheet" />
    

    To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files or the NPM packages (Getting the Sass-Based Themes).

  7. Run the application:

    npm start
    

    Demo project

A sample project can be found in the installation folder of Telerik Reporting [TelerikReporting_InstallDir]\Examples\React.

See Also

In this article