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
$(() => {
const 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);
const locale = getLocale();
Globalize.locale(locale);
const locales = [
{ name: 'English', value: 'en' },
{ name: 'Deutsch', value: 'de' },
{ name: 'Русский', value: 'ru' },
];
const dataGridOptions = {
dataSource: payments,
columns: [{
dataField: 'PaymentId',
caption: Globalize.formatMessage('Number'),
allowEditing: false,
width: '100px',
}, {
dataField: 'ContactName',
caption: Globalize.formatMessage('Contact'),
}, {
dataField: 'CompanyName',
caption: Globalize.formatMessage('Company'),
}, {
dataField: 'Amount',
caption: Globalize.formatMessage('Amount'),
dataType: 'number',
format: 'currency',
editorOptions: {
format: 'currency',
showClearButton: true,
},
}, {
dataField: 'PaymentDate',
caption: Globalize.formatMessage('PaymentDate'),
dataType: 'date',
}],
filterRow: {
visible: true,
applyFilter: 'auto',
},
editing: {
mode: 'popup',
allowUpdating: true,
popup: {
width: 700,
height: 345,
},
},
};
const 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() {
const storageLocale = sessionStorage.getItem('locale');
return storageLocale != null ? storageLocale : 'en';
}
function setLocale(savingLocale) {
sessionStorage.setItem('locale', savingLocale);
}
$('#gridContainer').dxDataGrid(dataGridOptions);
$('#selectBox').dxSelectBox(selectBoxOptions);
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<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=5.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/24.1.7/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="js/dx.all.js"></script>
<script src="https://cdn3.devexpress.com/jslib/24.1.7/js/localization/dx.messages.de.js"></script>
<script src="https://cdn3.devexpress.com/jslib/24.1.7/js/localization/dx.messages.ru.js"></script>
<script src="https://unpkg.com/devextreme-cldr-data@1.0.3/supplemental.js"></script>
<script src="https://unpkg.com/devextreme-cldr-data@1.0.3/de.js"></script>
<script src="https://unpkg.com/devextreme-cldr-data@1.0.3/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 id="gridContainer"></div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<label for="selectBox">Language</label>
<div id="selectBox"></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;
}
const 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',
}];