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 locales = [
{ name: "English", value: "en" },
{ name: "Deutsch", value: "de" },
{ name: "Русский", value: "ru" }
];
var locale = getLocale();
DevExpress.localization.locale(locale);
var formatMessage = DevExpress.localization.formatMessage;
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
$scope.dataGridOptions = {
dataSource: payments,
columns: [{
dataField: "PaymentId",
caption: formatMessage("Number"),
allowEditing: false,
width: "100px"
}, {
dataField: "ContactName",
caption: formatMessage("Contact")
}, {
dataField: "CompanyName",
caption: formatMessage("Company")
}, {
dataField: "Amount",
caption: formatMessage("Amount"),
dataType: "number",
format: "currency",
editorOptions: {
format: "currency",
showClearButton: true
}
}, {
dataField: "PaymentDate",
caption: formatMessage("PaymentDate"),
dataType: "date"
}],
filterRow: {
visible: true,
applyFilter: "auto"
},
editing: {
mode: "popup",
allowUpdating: true,
popup: {
width: 700,
height: 345
}
}
};
$scope.selectBoxOptions = {
inputAttr: { id: "selectInput" },
dataSource: locales,
displayExpr: "name",
valueExpr: "value",
value: locale,
onValueChanged: changeLocale
};
});
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);
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en,Intl.~locale.de,Intl.~locale.ru"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/localization/dx.messages.de.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/localization/dx.messages.ru.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="data-grid-demo">
<div dx-data-grid="dataGridOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<label for="selectInput">Language</label>
<div dx-select-box="selectBoxOptions"></div>
</div>
</div>
</div>
</div>
</body>
</html>
.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;
}
var payments = [{
"PaymentId": 1,
"ContactName": "Nancy Davolio",
"CompanyName": "Premier Buy",
"Amount": 1740,
"PaymentDate": "2013/01/06"
},
{
"PaymentId": 2,
"ContactName": "Andrew Fuller",
"CompanyName": "ElectrixMax",
"Amount": 850,
"PaymentDate": "2013/01/13"
},
{
"PaymentId": 3,
"ContactName": "Janet Leverling",
"CompanyName": "Video Emporium",
"Amount": 2235,
"PaymentDate": "2013/01/07"
},
{
"PaymentId": 4,
"ContactName": "Margaret Peacock",
"CompanyName": "Screen Shop",
"Amount": 1965,
"PaymentDate": "2013/01/03"
},
{
"PaymentId": 5,
"ContactName": "Steven Buchanan",
"CompanyName": "Braeburn",
"Amount": 880,
"PaymentDate": "2013/01/10"
},
{
"PaymentId": 6,
"ContactName": "Michael Suyama",
"CompanyName": "PriceCo",
"Amount": 5260,
"PaymentDate": "2013/01/17"
},
{
"PaymentId": 7,
"ContactName": "Robert King",
"CompanyName": "Ultimate Gadget",
"Amount": 2790,
"PaymentDate": "2013/01/21"
},
{
"PaymentId": 8,
"ContactName": "Laura Callahan",
"CompanyName": "EZ Stop",
"Amount": 3140,
"PaymentDate": "2013/01/01"
},
{
"PaymentId": 9,
"ContactName": "Anne Dodsworth",
"CompanyName": "Clicker",
"Amount": 6175,
"PaymentDate": "2013/01/24"
},
{
"PaymentId": 10,
"ContactName": "Clark Morgan",
"CompanyName": "Store of America",
"Amount": 4575,
"PaymentDate": "2013/01/11"
}];