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
<blockquote class='note'><p>All paths and URL links in the described steps must be adapted according to your project setup.</p></blockquote>
Steps:
-
Create new React application using the React tutorial.
npx create-react-app my-app-with-viewer cd my-app-with-viewer -
Install jQuery by using the following command:
npm install jquery -
Install the Telerik React Report Viewer NPM package by running:
npm install @progress/telerik-react-report-viewer -
Once installed, import the TelerikReportViewer in the index.js file:
import { TelerikReportViewer } from '@progress/telerik-react-report-viewer' -
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') ); -
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.3.913/styles/kendo.common.min.css" rel="stylesheet" /> <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />To get the Sass-based Kendo UI themes, you can use either the pre-build CSS files, the Kendo UI CDN, or the NPM packages (Getting the Sass-Based Themes).
-
Run the application:
npm start
Demo project
A sample project can be found in the installation folder of Telerik Reporting [TelerikReporting_InstallDir]\Examples\React.