window.onload = function() {
var locale = getLocale();
var locales = [
{ name: "English", value: "en" },
{ name: "Deutsch", value: "de" },
{ name: "Русский", value: "ru" }
];
var viewModel = {
dataGridOptions: {
dataSource: payments,
columns: [{
dataField: "PaymentId",
allowEditing: false,
width: "100px"
}, {
dataField: "ContactName"
}, {
dataField: "CompanyName"
}, {
dataField: "Amount",
dataType: "number",
format: { type: "currency" }
}, {
dataField: "PaymentDate",
dataType: "date"
}],
filterRow: {
visible: true,
applyFilter: "auto"
},
editing: {
mode: "popup",
allowUpdating: true,
popup: {
width: 700,
height: 345
}
}
},
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);
}
$.when(
$.getJSON("https://unpkg.com/cldr-dates-full/main/de/ca-gregorian.json"),
$.getJSON("https://unpkg.com/cldr-numbers-full/main/de/numbers.json"),
$.getJSON("https://unpkg.com/cldr-numbers-full/main/de/currencies.json"),
$.getJSON("https://unpkg.com/cldr-dates-full/main/ru/ca-gregorian.json"),
$.getJSON("https://unpkg.com/cldr-numbers-full/main/ru/numbers.json"),
$.getJSON("https://unpkg.com/cldr-numbers-full/main/ru/currencies.json"),
$.getJSON("https://unpkg.com/cldr-core/supplemental/likelySubtags.json"),
$.getJSON("https://unpkg.com/cldr-core/supplemental/timeData.json"),
$.getJSON("https://unpkg.com/cldr-core/supplemental/weekData.json"),
$.getJSON("https://unpkg.com/cldr-core/supplemental/currencyData.json"),
$.getJSON("https://unpkg.com/cldr-core/supplemental/numberingSystems.json")
).then(function() {
return [].slice.apply(arguments, [0]).map(function(result) {
return result[0];
});
}).then(
Globalize.load
).then(function() {
Globalize.locale(getLocale());
ko.applyBindings(viewModel, $("#demo-container")[0]);
});
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<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>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/localization/dx.messages.de.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.5/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">
<div id="data-grid-demo">
<div data-bind="dxDataGrid: dataGridOptions"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<label for="selectInput">Language</label>
<div data-bind="dxSelectBox: selectBoxOptions"></div>
</div>
</div>
</div>
</div>
</body>
</html>
#data-grid-demo {
min-height: 540px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.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"
}];