Material Light
Material Blue Light
Material Lime Light
Material Orange Light
Material Purple Light
Material Teal Light
Material Dark
Material Blue Dark
Material Lime Dark
Material Orange Dark
Material Purple Dark
Material Teal Dark
Material Light Compact
Material Blue Light Compact
Material Lime Light Compact
Material Orange Light Compact
Material Purple Light Compact
Material Teal Light Compact
Material Dark Compact
Material Blue Dark Compact
Material Lime Dark Compact
Material Orange Dark Compact
Material Purple Dark Compact
Material Teal Dark Compact
Generic Light
Generic Light
Carmine
Soft Blue
Green Mist
Generic Dark
Generic Dark
Contrast
Dark Violet
Dark Moon
Generic Light Compact
Generic Light Compact
Generic Dark Compact
Generic Dark Compact
Contrast Dark Compact
Fluent Light
Fluent Light
Fluent SaaS Light
Fluent Dark
Fluent Dark
Fluent SaaS Dark
Fluent Light Compact
Fluent Light Compact
Fluent SaaS Light Compact
Fluent Dark Compact
Fluent Dark Compact
Fluent SaaS Dark Compact
Backend API
@section ExternalDependencies { <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>}@section Localization { <script src="@Url.Action( "CldrData", "Localization", new { t = CldrDataScriptBuilder.GetCacheParam() })"></script> <script src="https://cdn3.devexpress.com/jslib/23.2.5/js/localization/dx.messages.de.js"></script> <script src="https://cdn3.devexpress.com/jslib/23.2.5/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 { format = "currency", showClearButton = true }); 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") .InputAttr("aria-label", "Language") .DataSource(new JS("locales")) .DisplayExpr("name") .ValueExpr("value") .Value(new JS("locale")) .OnValueChanged("changeLocale") ) </div> </div></div><script> 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": "Дата оплаты" } }; Globalize.loadMessages(dictionary); var formatMessage = Globalize.formatMessage.bind(Globalize); var locales = [ { name: "English", value: "en" }, { name: "Deutsch", value: "de" }, { name: "Русский", value: "ru" } ]; var locale = getLocale(); Globalize.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.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;using System.Linq;namespace DevExtreme.NETCore.Demos.Controllers { public class LocalizationController : Controller { public ActionResult UsingGlobalize() { return View(SampleData.Payments); } public ActionResult CldrData() { return new CldrDataScriptBuilder() .SetCldrPath("~/wwwroot/cldr-data") .UseLocales(new[] { "de", "ru" }) .Build(); } }}
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; } }}
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 Peaco*ck", 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;}