Localization of React Report Viewer allows you to localize the static text such as tooltip, parameter block, and dialog text based on a specific culture. To render the static text with specific culture, refer to the following corresponding culture script files and set culture name to the locale
property of the Report Viewer.
* `ej.localetexts.fr-FR.min.js`
* `ej.culture.fr-FR.min.js`
Refer this CDN links for Localization and Culture to get the Localization and Culture scripts for available Culture Code.
@boldreports/global
package.npm install @boldreports/global --save
ej.localetexts.fr-FR.min.js
and ej.culture.fr-FR.min.js
script files from node_modules
in the App.js
file.import React from 'react';
import './App.css';
//Report Viewer source
import '@boldreports/javascript-reporting-controls/Scripts/bold.report-viewer.min';
import '@boldreports/javascript-reporting-controls/Content/material/bold.reports.all.min.css';
//Data-Visualization
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.bulletgraph.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej.chart.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-circulargauge.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-lineargauge.min';
import '@boldreports/javascript-reporting-controls/Scripts/data-visualization/ej2-maps.min';
//Reports react base
import '@boldreports/react-reporting-components/Scripts/bold.reports.react.min';
import '@boldreports/global/l10n/ej.localetexts.fr-FR.min.js';
import '@boldreports/global/i18n/ej.culture.fr-FR.min.js';
...
...
Initialize the locale
property in the App.js
file as shown like in below code snippet.
var locale = 'fr-FR';
function App() {
return (<div id="viewer" style={viewerStyle}>
<BoldReportViewerComponent id="reportviewer-container"
reportServiceUrl = {'https://demos.boldreports.com/services/api/ReportViewer'}
reportPath = { 'GroupingAgg.rdl' }
locale = {locale}
>
</BoldReportViewerComponent>
</div>);
}