Localize Web Dashboard Control

• Dec 02, 2019
• 4 minutes to read

Web Dashboard UI localization involves two aspects - UI string translation, and formatting date-time and numeric values.

• You can localize different UI elements such as dialog boxes, button captions, menu items, and error messages. You can localize the Web Dashboard’s user interface in different platforms with satellite resource assemblies and component-specific JSON files.
• For culture-specific formatting, you can use Intl or Globalize.

• 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.

As an example, follow the instructions below to localize the Dashboard UI for the Spanish market (the es culture):

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 es folder that contains 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. Unpack a self-extracting archive on your Mac/Linux PC and extract json resources. Create the wwwroot/Localization directory, and add the dx-analytics-core.es.json and dx-dashboards.es.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 to localize the user interface. Intl is used to support culture-specific data.

Note

As an alternative to Intl, you can use Globalize to format dates, numbers, and currencies. For details, see Use Globalize to Format Dates, Numbers, and Currencies.

Modular Approach

1. Unpack a self-extracting archive on your Mac/Linux PC and extract json resources. Copy the dx-analytics-core.es.json and dx-dashboards.es.json files with the required locale to the application’s directory (for example, to the localization folder).

2. Import locale from the devextreme-localization package and use the ResourceManager.setLocalizationMessages static method to load the localization strings. Apply culture settings with the imported locale method before you embed the bundled resources and render the dashboard control.

   The code below shows how to apply the Spanish localization and culture settings:

   import { DashboardControl, ResourceManager } from 'devexpress-dashboard';
   import { locale } from 'devextreme/localization';
   
   ResourceManager.setLocalizationMessages(require("./localization/dx-dashboard.es.json"));
   ResourceManager.setLocalizationMessages(require("./localization/dx-analytics-core.es.json"));
   
   export class DashboardComponent implements AfterViewInit, OnDestroy {
       private dashboardControl!: DashboardControl;
       constructor(private element: ElementRef) {
           locale('es');
           ResourceManager.embedBundledResources();
       }  
       // ...
   }
   

For Angular applications, open the tsconfig.json file and set the resolveJsonModule property to true to allow the application to import and extract types from json files:

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

Global Namespaces

1. Unpack a self-extracting archive on your Mac/Linux PC and extract json resources. Copy the dx-analytics-core.es.json and dx-dashboards.es.json files with the required locale to the application’s directory (for example, to the localization folder).

2. Use the ResourceManager.setLocalizationMessages static method to load the localization strings. Then, specify one of the added locales in the DevExpress.localization.locale() method before you embed the bundled resources and render the dashboard control.

   The code below shows how to apply the Spanish localization and culture settings:

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