Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@section Localization {
<script src="https://cdn3.devexpress.com/jslib/24.2.3/js/localization/dx.messages.de.js"></script>
<script src="https://cdn3.devexpress.com/jslib/24.2.3/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;
}