DevExtreme Vue - Using Intl

DevExtreme ASP.NET MVC Controls can be localized using the Intl object. Follow the steps described in this topic to set up Intl localization.

NOTE

Our project templates use Globalize as default means of localization. To prevent possible conflicts with Intl, remove the load of Globalize and CLDR resources by doing one of the following:

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

Reference Source Files

Files that you need to reference include the devextreme-intl module and 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 located in your project's Scripts/localization or wwwroot/js/devextreme/localization folder. Reference the module and dictionaries in a section created on the view with the DevExtreme ASP.NET MVC Controls to be localized.

Razor C#
Razor VB
@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>
}
@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>
End Section

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.

Razor C#
Razor VB
@RenderSection("Localization", false)
@RenderSection("Localization", false)

To create a custom dictionary, copy one of the predefined dictionaries and give it an appropriate name, for example, dx.messages.es.js for Spanish translation. Then, translate messages in the dictionary to the required language. Finally, reference the custom dictionary like a predefined one.

Set the Locale On the Fly

Open the view with controls to localize, add a <script> tag to the bottom, and call the DevExpress.localization.locale method to set the current locale.

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

View Demo