Localization - Using Intl

DevExtreme ASP.NET Core components can be localized using the Intl object. Refer to this article for detailed instructions.

Backend API

​x
 
@section Localization {    <script src="https://cdn3.devexpress.com/jslib/25.1.6/js/localization/dx.messages.de.js"></script>    <script src="https://cdn3.devexpress.com/jslib/25.1.6/js/localization/dx.messages.ru.js"></script>}​@model IEnumerable<DevExtreme.NETCore.Demos.Models.Payment>​<div id="data-grid-demo">    @(Html.DevExtreme().DataGrid()        .DataSource(Model)        .Columns(columns => {            columns.Add().DataField("PaymentId")                .Caption(new JS("formatMessage('Number')"))                .Width(100)                .AllowEditing(false);            columns.Add().DataField("ContactName")                .Caption(new JS("formatMessage('Contact')"));            columns.Add().DataField("CompanyName")                .Caption(new JS("formatMessage('Company')"));            columns.Add().DataField("Amount")                .Caption(new JS("formatMessage('Amount')"))                .DataType(GridColumnDataType.Number)                .Format(Format.Currency)                .EditorOptions(new JS("amountEditorOptions"));            columns.Add().DataField("PaymentDate")                .Caption(new JS("formatMessage('PaymentDate')"))                .DataType(GridColumnDataType.Date);        })        .FilterRow(filterRow => filterRow            .Visible(true)            .ApplyFilter(GridApplyFilterMode.Auto)        )        .Editing(c => c            .Mode(GridEditMode.Popup)            .AllowUpdating(true)            .Popup(e => e                .Width(700)                .Height(345)            )        )    )​    <div class="options">        <div class="caption">Options</div>        <div class="option">            <label for="selectInput">Language</label>            @(Html.DevExtreme().SelectBox()                .ID("selectBox")                .InputAttr("id", "selectInput")                .DataSource(new JS("locales"))                .DisplayExpr("name")                .ValueExpr("value")                .Value(new JS("locale"))                .OnValueChanged("changeLocale")            )        </div>    </div></div>​<script>    var amountEditorOptions = {        format: 'currency',        showClearButton: true,        inputAttr: {            'aria-label': 'Filter сell',        },    };​    var dictionary = {        "en": {            "Number": "Number",            "Contact": "Contact",            "Company": "Company",            "Amount": "Amount",            "PaymentDate": "Payment Date"        },        "de": {            "Number": "Nummer",            "Contact": "Ansprechpartner",            "Company": "Firma",            "Amount": "Betrag",            "PaymentDate": "Zahlungsdatum"        },        "ru": {            "Number": "Номер",            "Contact": "Имя",            "Company": "Организация",            "Amount": "Сумма",            "PaymentDate": "Дата оплаты"        }    };    DevExpress.localization.loadMessages(dictionary);    var formatMessage = DevExpress.localization.formatMessage;​    var locales = [        { name: "English", value: "en" },        { name: "Deutsch", value: "de" },        { name: "Русский", value: "ru" }    ];​    var locale = getLocale();    DevExpress.localization.locale(locale);​    function changeLocale(data) {        setLocale(data.value);        document.location.reload();    }​    function getLocale() {        var locale = sessionStorage.getItem("locale");        return locale != null ? locale : "en";    }​    function setLocale(locale) {        sessionStorage.setItem("locale", locale);    }</script>​

xxxxxxxxxx
 
using DevExtreme.AspNet.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class LocalizationController : Controller {        public ActionResult UsingIntl() {            return View(SampleData.Payments);        }    }}

xxxxxxxxxx
 
using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Models {    public class Payment {        public int PaymentId { get; set; }        public string ContactName { get; set; }        public string CompanyName { get; set; }        public int Amount { get; set; }        public DateTime PaymentDate { get; set; }    }}​

xxxxxxxxxx
 
using System;using System.Collections.Generic;​namespace DevExtreme.NETCore.Demos.Models.SampleData {    public partial class SampleData {        public static readonly IEnumerable<Payment> Payments = new[] {            new Payment {                PaymentId = 1,                ContactName = "Nancy Davolio",                CompanyName = "Premier Buy",                Amount = 1740,                PaymentDate = DateTime.Parse("2013/01/06")            },            new Payment {                PaymentId = 2,                ContactName = "Andrew Fuller",                CompanyName = "ElectrixMax",                Amount = 850,                PaymentDate = DateTime.Parse("2013/01/13")            },            new Payment {                PaymentId = 3,                ContactName = "Janet Leverling",                CompanyName = "Video Emporium",                Amount = 2235,                PaymentDate = DateTime.Parse("2013/01/07")            },            new Payment {                PaymentId = 4,                ContactName = "Margaret Peacock",                CompanyName = "Screen Shop",                Amount = 1965,                PaymentDate = DateTime.Parse("2013/01/03")            },            new Payment {                PaymentId = 5,                ContactName = "Steven Buchanan",                CompanyName = "Braeburn",                Amount = 880,                PaymentDate = DateTime.Parse("2013/01/10")            },            new Payment {                PaymentId = 6,                ContactName = "Michael Suyama",                CompanyName = "PriceCo",                Amount = 5260,                PaymentDate = DateTime.Parse("2013/01/17")            },            new Payment {                PaymentId = 7,                ContactName = "Robert King",                CompanyName = "Ultimate Gadget",                Amount = 2790,                PaymentDate = DateTime.Parse("2013/01/21")            },            new Payment {                PaymentId = 8,                ContactName = "Laura Callahan",                CompanyName = "EZ Stop",                Amount = 3140,                PaymentDate = DateTime.Parse("2013/01/01")            },            new Payment {                PaymentId = 9,                ContactName = "Anne Dodsworth",                CompanyName = "Clicker",                Amount = 6175,                PaymentDate = DateTime.Parse("2013/01/24")            },            new Payment {                PaymentId = 10,                ContactName = "Clark Morgan",                CompanyName = "Store of America",                Amount = 4575,                PaymentDate = DateTime.Parse("2013/01/11")            }        };    }}​

xxxxxxxxxx
 
.options {    padding: 20px;    background-color: rgba(191, 191, 191, 0.15);    margin-top: 20px;}​.option {    margin-top: 10px;}​.caption {    font-size: 18px;    font-weight: 500;}​.option > label {    margin-right: 10px;}​.option > .dx-selectbox {    display: inline-block;    vertical-align: middle;}​