[]
Blazor Viewer supports English, Japanese, and Chinese localizations for which the localized files are already available. This article discusses setting a Blazor Viewer UI language from the supported localizations and adding custom localization for the languages that are not explicitly supported.
To set the UI language of Blazor Viewer, specify the Locale API while initializing the component. The supported values are 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for simplified Chinese).
<div id="viewerContainer">
<ReportViewer @ref="_viewer" ReportName="@_currentReport" Locale="ja-JP" />
</div>
The localization file for Blazor Viewer is ar-blazor-viewer-locale.json. The file is added to the project in the **grapecity.activereports.blazor.viewer\**content\ folder when you install the MESCIUS.ActiveReports.Blazor.Viewer NuGet package, which is required when using Blazor Viewer. By default, the 'ar-blazor-viewer-locale.json' file contains all the strings in English that are required to localize the viewer.
type=note
Note: The full path where you can find localization file is:
C:\Users\UserName\.nuget\packages\grapecity.activereports.blazor.viewer\version\content\ar-blazor-viewer-locale.json.
To add custom localization to the Blazor Viewer UI,
Copy the 'ar-blazor-viewer-locale.json' file to the 'wwwroot' folder and rename the file to, say, 'ar-blazor-viewer-fr-locale.json'.
Open the file and translate the strings in the file to any language, say French. For example, here we are localizing the Blazor Viewer component for French language, so the strings must be translated to French language.
{
"viewer": {
"toolbar": {
"refresh": "Rafraîchir",
"cancel": "Annuler"
},
"search": {
"start-search-btn": "Recherche",
"paneltitle": "Recherche"
}
}
}
Specify the URL of 'ar-blazor-viewer-fr-locale.json' file using the LocaleUri API to add localization to the viewer.
@page "/"
@using BlazorViewerServer.Data
@inject ReportsService ReportsService
<div class="main">
<ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList>
<div id="viewerContainer">
<ReportViewer @ref="_viewer" ReportName="@_currentReport" LocaleUri="./ar-blazor-viewer-fr-locale.json" />
</div>
</div>
@code{
private ReportViewer _viewer;
private List<string> reportsList;
private string _currentReport = null;
protected override void OnInitialized()
{
reportsList = ReportsService.GetReports().ToList();
_currentReport = reportsList.FirstOrDefault();
}
private async void OnClick(string res)
{
_currentReport = res;
await _viewer.OpenReport(_currentReport);
}
}
type=note
Note: As you may notice, some of the localization strings are skipped in the above example. The values for which localization strings are missing are by default displayed using EN localization data.
An alternate approach is to use the Blazor Viewer API to directly assign the localized JSON to the viewer, as shown.
@page "/"
@using BlazorViewerServer.Data
@inject ReportsService ReportsService
<div class="main">
<ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList>
<div id="viewerContainer">
<ReportViewer @ref="_viewer" ReportName="@_currentReport" LocaleData="@_localeData" />
</div>
</div>
@code{
private ReportViewer _viewer;
private List<string> reportsList;
private string _currentReport = null;
string _localeData = "{\"viewer\":{\"toolbar\":{\"refresh\":\"Rafraîchir\",\"cancel\":\"Annuler\"},\"search\":{\"start-search-btn\":\"Recherche\",\"paneltitle\":\"Recherche\"} } }";
protected override void OnInitialized()
{
reportsList = ReportsService.GetReports().ToList();
_currentReport = reportsList.FirstOrDefault();
}
private async void OnClick(string res)
{
_currentReport = res;
await _viewer.OpenReport(_currentReport);
}
}