The requested page is not available for the requested platform. You are viewing the content for Default platform.

Localization

Intl

You can use the Intl object to localize DevExtreme ASP.NET MVC controls.

Note

Our project templates use Globalize to localize controls. To prevent possible conflicts with Intl, disable the load of Globalize and CLDR resources. You can do this in one of the following ways:

  • Open App_Start/DevExtremeBundleConfig.cs(.vb) and remove code lines that add Globalize and CLDR files to the DevExtreme bundle.
  • Open the shared layout view and remove links to Globalize and CLDR files from the <head> tag.

Follow the steps below to set up Intl localization.

Reference Source Files

  1. Create a @section on the view with a control to be localized and reference the following resources in it:

    • devextreme-intl module;
    • dictionaries for required locales.

      DevExtreme is shipped with several predefined dictionaries - dx.messages.[lang].js files. You can use them "as is" or as a base for your custom dictionary. They are in your project's Scripts/localization or wwwroot/js/devextreme/localization folder.

    In the following example, this section is called Localization:

    @section Localization {
        <script src="https://unpkg.com/devextreme-intl/dist/devextreme-intl.min.js"></script>
        <script src="~/Scripts/localization/dx.messages.de.js"></script>
        <script src="~/Scripts/localization/dx.messages.ru.js"></script>
    }
    

    To create a custom dictionary:

    1. Copy one of the predefined dictionaries and give it an appropriate name, for example, dx.messages.es.js for Spanish translation.
    2. Translate messages in the dictionary to the required language.

    Finally, reference the custom dictionary like a predefined one.

  2. Open the Views/Shared/_Layout.csthml(.vbhtml) file and add the following command to the <head> tag after DevExtreme scripts or the command that renders a bundle with them:

    @RenderSection("Localization", false)
    

Set the Locale On the Fly

  1. Open the view with controls to localize.
  2. Add a <script> tag to the bottom.
  3. Call the DevExpress.localization.locale method to set the current locale.

    <script>
        DevExpress.localization.locale(navigator.languages && navigator.languages[0] ||
            navigator.language ||
            navigator.userLanguage);
    </script>
    

View Demo

Globalize

You can use Globalize to localize DevExtreme-based controls. Its modules and CLDR scripts should already be linked in your project. To ensure the modules are linked, do one of the following:

  • Open App_Start/DevExtremeBundleConfig.cs(.vb) and make sure that Globalize and CLDR files are included in the DevExtreme bundle. Then, open the shared layout view (Views/Shared/_Layout.csthml(.vbhtml)) and check that the <head> tag includes a command similar to this:

      @Scripts.Render("~/Scripts/DevExtremeBundle")
    
  • Open the shared layout view and check that the <head> tag includes links to Globalize and CLDR files.

If everything is correct, follow the steps below.

Get and Load CLDR Data

  1. Add the CLDR JSON files to your project.

    The required files depend on Globalize modules. DevExtreme ASP.NET MVC controls use only five Globalize modules: core, number, currency, date, and message. Refer to the following topics for more information:

  2. Use CldrDataScriptBuilder() to create an action method in your controller that loads CLDR JSON files. The following example shows an action method that loads CLDR JSONs for German and Russian locales from the Content/cldr-data project folder and sets German as the default:

    public ActionResult CldrData() {
        return new CldrDataScriptBuilder()
            .SetCldrPath("~/Content/cldr-data")
            .SetInitialLocale("de")
            .UseLocales("de", "ru")
            .Build();
    }
    
  3. Create a @section on the view with a control to be localized and execute the created action method in it. To do this, use the @Url.Action helper. The third argument passed to it ensures that the browser caches the CLDR data.

    In the following example, this section is called Localization:

    @section Localization {
        <script src="@Url.Action('CldrData', 'ControllerName', new { t = CldrDataScriptBuilder.GetCacheParam() })"></script>
    }
    
  4. Add the command that renders this section to the <head> tag of the shared layout view - Views/Shared/_Layout.csthml(.vbhtml).

    @RenderSection("Localization", false)
    

Reference Dictionaries

DevExtreme is shipped with several predefined dictionaries (dx.messages.[lang].js files) that you can use "as is" or as a base for your custom dictionary. You can find them in your project's Scripts/localization or wwwroot/js/devextreme/localization folder.

Reference a predefined dictionary in the Localization section after the CldrData() action method's call.

@section Localization {
    <script src="@Url.Action('CldrData', 'ControllerName', new { t = CldrDataScriptBuilder.GetCacheParam() })"></script>
    <script src="~/Scripts/localization/dx.messages.de.js"></script>
    <script src="~/Scripts/localization/dx.messages.ru.js"></script>
}

To create a custom dictionary:

  1. Copy one of the predefined dictionaries and give it an appropriate name, for example, dx.messages.es.js for Spanish translation.
  2. Translate messages in the dictionary to the required language.

Finally, reference the custom dictionary in the Localization section like a predefined one.

Set the Locale On the Fly

  1. Open the view with controls to localize.
  2. Add a <script> tag to the bottom.
  3. Call the Globalize.locale method to set the current locale.

    <script>
        Globalize.locale(navigator.languages && navigator.languages[0] ||
            navigator.language ||
            navigator.userLanguage);
    </script>
    

View Demo