Localize Web Dashboard Control

• May 07, 2019
• 3 minutes to read

The topic describes how to localize different UI elements such as dialog boxes, button captions, menu items, error messages. You can localize the Web Dashboard’s user interface in different platforms with satellite resource assemblies and component-specific JSON files.

• Localize ASP.NET WebForms and MVC Dashboard with Satellite Resource Assemblies
• Localize ASP.NET Core Dashboard with JSON Files
• Localize HTML JavaScript Dashboard with JSON Files

Tip

See the main Localization topic for information on how to localize the culture-specific data.

Localize ASP.NET WebForms and MVC Dashboard with Satellite Resource Assemblies

ASP.NET WebForms and MVC Dashboard wrappers supports localization with satellite resource assemblies.

1. Use the DevExpress Localization Service to obtain satellite assemblies for DevExpress .NET controls that correspond to other cultures. Copy the folders (for example, es) that contain satellite assemblies to the application’s bin folder.

   Refer to Localize ASP.NET Controls via Satellite Resource Assemblies for a detailed guide.

2. Set a culture for the application. You can use declarative or programmatic approaches.

   See How to: Set a Culture for an ASP.NET Web Page for more information.

KB article: Best practices to change the current Culture in ASP.NET MVC Application using ComboBox Extension

Localize ASP.NET Core Dashboard with JSON Files

ASP.NET Core Dashboard uses component-specific JSON files that correspond to other cultures.

1. Extract json resources. Create the wwwroot/Localization directory, and add the dx-analytics-core.xx.json and dx-dashboards.xx.json files to it.

2. Load localization strings for the required culture on the DashboardBuilder.OnInitializing event.

   @inject Microsoft.AspNetCore.Hosting.IHostingEnvironment Hosting
   
   <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
       @(Html.DevExpress().Dashboard("dashboardControl1")
           .Width("100%")
           .Height("100%")
           .UseNeutralFilterMode(true)
           .OnInitializing("onInitializing")
           .OnBeforeRender("onBeforeRender")
       )
   </div>
   <script>
       function onInitializing() {
           DevExpress.Analytics.Localization.loadMessages(@Html.Raw(System.IO.File.ReadAllText(System.IO.Path.Combine(Hosting.WebRootPath, "Localization", "dx-analytics-core.es.json"))))
           DevExpress.Analytics.Localization.loadMessages(@Html.Raw(System.IO.File.ReadAllText(System.IO.Path.Combine(Hosting.WebRootPath, "Localization", "dx-dashboard.es.json"))))
       }
   </script>
   

Localize HTML JavaScript Dashboard with JSON Files

HTML JavaScript Dashboard uses component-specific JSON files that correspond to other cultures.

Modular Approach

1. Extract json resources. Copy the dx-analytics-core.xx.json and dx-dashboards.xx.json files with the required locale to the application’s directory.

2. Open the dashboard.component.ts file, add localization strings, and apply culture settings:

   import { DashboardControl, ResourceManager, DashboardPanelExtension } from 'devexpress-dashboard';
   import AnaliticsCore from '@devexpress/analytics-core' 
   
   AnaliticsCore.Analytics.Localization.loadMessages(require('./localization/dx-dashboard.es.json')) 
   AnaliticsCore.Analytics.Localization.loadMessages(require('./localization/dx-analytics-core.es.json'))
   
   export class DashboardComponent implements AfterViewInit, OnDestroy {
   private dashboardControl: DashboardControl; 
   // ...
   initGlobalize() {
       Globalize.load(
       require('devextreme-cldr-data/es.json'),
       require('devextreme-cldr-data/supplemental.json')
       );
       Globalize.locale('es');
   }
   ngAfterViewInit(): void {
       // ...
   }
   // ...
   

If you use TypeScript, open the tsconfig.json file and set the resolveJsonModule property to true to allow the application to import and extract types from json files:

```json
"compilerOptions": {
    "resolveJsonModule": true, 
    //...
}
```

Global Namespaces

1. Extract json resources. Copy the dx-analytics-core.xx.json and dx-dashboards.xx.json files with the required locale to the application’s directory.

2. Add scripts for other languages to support corresponding cultures:

   <head>
       <!-- ...  -->
       <script src="node_modules/devextreme-cldr-data/en.js" charset="UTF-8"></script>
       <script src="node_modules/devextreme-cldr-data/es.js" charset="UTF-8"></script>
   </head>
   

3. Change a script where you initialize a dashboard control to the script below. Specify one of the added locales in the Globalize.locale() method to change the culture:

   <script>
       var Globalize = Globalize;
       $.when(
           $.getJSON("Localization/dx-dashboard.es.json").then(DevExpress.Analytics.Localization.loadMessages),
           $.getJSON("Localization/dx-analytics-core.es.json").then(DevExpress.Analytics.Localization.loadMessages)
       ).then(function () {
           Globalize.locale('es');
           DevExpress.Dashboard.ResourceManager.embedBundledResources();
           // ...
           dashboardControl.render();
       })
   </script>