Localize Web Dashboard Control

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

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 Web Forms and MVC Dashboard with Satellite Resource Assemblies

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

  1. Use the DevExpress Localization Service to download satellite assemblies for DevExpress .NET controls that correspond to other cultures.
  2. Copy the es folder that contains satellite assemblies to the application's bin folder.
  3. Set a culture for the application. You can use declarative or programmatic approaches.

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.

  3. Specify the locale in the locale() method to apply culture settings. Call this 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.

  3. Specify the locale in the DevExpress.localization.locale() method to apply culture settings. Call this 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>