Localization of the Native Blazor Report Viewer

Overview

This article elaborates on how to localize the messages displayed by the Native Blazor Report Viewer. Localization is the process of customizing an app for a given language and region.

Blazor already has an established way of providing Localization support for applications. The introduction of this into the Native Blazor Telerik ReportViewer boils down to providing a default Resource with English strings, and exposing a Service Interface that developers can implement in order to provide their own Resources.

The approach is identical with how localization works in Telerik UI for Blazor.

How to Enable Localization in a Blazor App

When localizing a Blazor app, make sure you are familiar with the way localization works in the framework. You can start from the following resources:

• Globalization and Localization in Blazor
• Localization in ASP.NET Core

How to Localize the Native Blazor Report Viewer

The string resources used to localize the report viewer can be in whatever format is preferred - JSON, XML, RESX, etc.

For this example, we will have a Resources folder containing the Messages.resx embedded resource of the report viewer.

This resource will contain the default English messages.

1. Enable localization in the Blazor app from inside Program.cs(or Startup.cs if .NET 5 or older is used):

   builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");
   builder.Services.Configure<RequestLocalizationOptions>(options =>
   {
       // define the list of cultures your app will support
       var supportedCultures = new List<CultureInfo>()
       {
           new CultureInfo("en-US"),
           new CultureInfo("bg-BG")
       };
   
       options.DefaultRequestCulture = new RequestCulture("en-US");
   
       options.SupportedCultures = supportedCultures;
       options.SupportedUICultures = supportedCultures;
   });
   

2. Add .resx files to the ~/Resources folder

   In this example the files must be named ~/Resources/Messages.<culture-locale>.resx, for example Messages.bg-BG.resx. The file names affect the static class that is generated and how you use it in your code.

   It is required that you add the resource file provided in your Telerik Reporting installation that matches the version used in your project. This is the file that contains the current set of localizable strings and whose designer file must be generated by the build.

   Make sure to:

   • Mark the resx files as Embedded Resource (right click > Properties > Build Action).

   • Have the following in your ProjectName.csproj file so the designer file is generated. It should be added when you add the main messages file, or when you open and save it. Copy the snippet in case it is not added. If the Designer file does not get generated, open the resx file in Visual Studio and toggle its Access Modifier to Public.

   <ItemGroup>
       <Compile Update="Resources\Messages.Designer.cs">
           <DesignTime>True</DesignTime>
           <AutoGen>True</AutoGen>
           <DependentUpon>Messages.resx</DependentUpon>
       </Compile>
   </ItemGroup>
   
   <ItemGroup>
       <EmbeddedResource Update="Resources\Messages.resx">
           <Generator>PublicResXFileCodeGenerator</Generator>
           <LastGenOutput>Messages.Designer.cs</LastGenOutput>
       </EmbeddedResource>
   </ItemGroup>
   

3. Create a custom localizer, that implements the ITelerikReportingStringLocalizer Interface. The localizer must provide strings based on keys. For this example, with Messages.resx, the localizer implementation might look as follows

   using CSharp.Net6.BlazorNativeIntegrationDemo.Resources;
   using Telerik.ReportViewer.BlazorNative.Services;
   
   namespace CSharp.Net6.BlazorNativeIntegrationDemo
   {
       public class CustomStringLocalizer : ITelerikReportingStringLocalizer
       {
           public string this[string name]
           {
               get
               {
                   return GetStringFromResource(name);
               }
           }
   
           public string GetStringFromResource(string key)
           {
               return Messages.ResourceManager.GetString(key, Messages.Culture);
           }
       }
   }
   

4. Register the custom localizer for the ITelerikReportingStringLocalizer interface, after registering the Telerik services

   builder.Services.AddTelerikBlazor();
   ...
   builder.Services.AddSingleton(typeof(ITelerikReportingStringLocalizer), typeof(CustomStringLocalizer));
   

5. (Optional) Now to test that the localization is working, you may change the culture in the component with the report viewer through the following code:

   protected override void OnInitialized()
   {
       var culture = new CultureInfo("bg-BG");
   
       CultureInfo.DefaultThreadCurrentCulture = culture;
       CultureInfo.DefaultThreadCurrentUICulture = culture;
   
       base.OnInitialized();
   }
   

Since the Native Blazor Report Viewer uses Telerik UI for Blazor components internally, you would also need to setup the ITelerikStringLocalizer interface in the same fashion, to provide strings to the telerik components - Telerik Blazor UI Localization