Localization

• May 14, 2019
• 2 minutes to read

This document describes how to use JSON files from the DevExpress Localization Service to localize the Document Viewer and End-User Report Designer in ASP.NET Core applications.

Obtain JSON Files from the Localization Service

1. Log into the DevExpress website.

2. Open the DevExpress Localization Service.

3. Select your target language, modify translations, and click the Download button. Refer to the Localization Service documentation topic for detailed information.

4. Unpack the downloaded executable file to get the satellite assemblies and json resources directory. This directory contains the following JSON files required to localize the reporting controls (where xx is a culture name):

File Name	Localization Strings
dx-analytics-core.xx.json	Shared Components: Query Builder, Data Source Wizard, Filter Editor, Expression Editor
dx-reporting.xx.json	Web Document Viewer, End-User Report Designer and other reporting-specific components

Load JSON Files in a Razor-Based Application

Do the following if you have a .NET Razor-based ASP.NET Core application and use the ReportDesigner or WebDocumentViewer extension method:

1. Copy the dx-analytics-core.xx.json and dx-reporting.xx.json files to the application directory (for instance, wwwroot).

2. Open the View file and disable the ReportDesignerClientSideModelSettings.IncludeLocalization (or WebDocumentViewerClientSideModelSettings.IncludeLocalization) option not to load the default localization strings.

3. Handle the client-side ReportDesignerClientSideEventsBuilder.CustomizeLocalization (or WebDocumentViewerClientSideEventsBuilder.CustomizeLocalization) event.

4. In the event handler, use the argument’s LoadMessages method to load JSON files to a reporting component.

CSHTML

<script type="text/javascript" id="script">
    function CustomizeLocalization(s, e) {
        e.LoadMessages($.get("/dx-analytics-core.de.json"))
        e.LoadMessages($.get("/dx-reporting.de.json"))
    } 
</script>

@(Html.DevExpress().ReportDesigner("reportDesigner")
    .ClientSideModelSettings(x => x.IncludeLocalization = false)
    .ClientSideEvents(x => x.CustomizeLocalization("CustomizeLocalization"))
    .Height("1000px")
    .Bind("Report")) 

Load JSON Files in an Angular-Based Application

Do the following if you use the dx-report-viewer/dx-report-designer Angular component and an ASP.NET Core application acts as a backend:

1. Copy the dx-analytics-core.xx.json and dx-reporting.xx.json files to the application directory (for instance, wwwroot).

2. Open a View (HTML file) and handle the CustomizeLocalization callback.

   HTML

   <div>
   <dx-report-designer [reportUrl]="reportUrl" height="700px" [allowMDI]="allowMDI" cssClass='myDesigner'>
       <dxrd-request-options [getDesignerModelAction]="getDesignerModelAction" [host]="hostUrl"></dxrd-request-options>
       <dxrd-callbacks
           (CustomizeLocalization)="CustomizeLocalization($event)">
       </dxrd-callbacks>
   </dx-report-designer>
   </div>
   

3. Open a View Model (TS file) and write the CustomizeLocalization event handler. Use the event argument’s LoadMessages method to load JSON files to a reporting component.

   TS

   // ...
   import * as $ from "jquery";
   // ...
   
   export class AppComponent {
       // ...
       CustomizeLocalization(event) {
           event.args.LoadMessages($.get("/dx-analytics-core.de.json"));
           event.args.LoadMessages($.get("/dx-reporting.de.json"));
       } 
   }