Localization ▸ Using Intl

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

Options
@section Localization {
    <script src="https://cdn3.devexpress.com/jslib/25.1.7/js/localization/dx.messages.de.js"></script>
    <script src="https://cdn3.devexpress.com/jslib/25.1.7/js/localization/dx.messages.ru.js"></script>
}

@model IEnumerable<DevExtreme.MVC.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 cell',
        },
    };

    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>
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class LocalizationController : Controller {

        public ActionResult UsingIntl() {
            return View(SampleData.Payments);
        }

    }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace DevExtreme.MVC.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; }
    }
}
using System;
using System.Collections.Generic;

namespace DevExtreme.MVC.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")
            }
        };
    }
}
.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;
}