Using Globalize - React Localization

/* eslint-disable import/no-unresolved */ /* eslint-disable import/no-webpack-loader-syntax */ import React, { useState } from 'react'; import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box'; import 'devextreme/common/core/localization/globalize/number'; import 'devextreme/common/core/localization/globalize/date'; import 'devextreme/common/core/localization/globalize/currency'; import 'devextreme/common/core/localization/globalize/message'; import deMessages from 'devextreme/localization/messages/de.json'; import ruMessages from 'devextreme/localization/messages/ru.json'; import deCldrData from 'devextreme-cldr-data/de.json'; import ruCldrData from 'devextreme-cldr-data/ru.json'; import supplementalCldrData from 'devextreme-cldr-data/supplemental.json'; import Globalize from 'globalize'; import service from './data.ts'; const editPopupOptions = { width: 700, height: 345, }; const amountEditorOptions = { format: 'currency', showClearButton: true, }; const selectBoxInputAttr = { id: 'selectInput' }; Globalize.load( deCldrData, ruCldrData, supplementalCldrData, ); Globalize.loadMessages(deMessages); Globalize.loadMessages(ruMessages); Globalize.loadMessages(service.getDictionary()); Globalize.locale(sessionStorage.getItem('locale') || 'en'); const App = () => { const [locale, setLocale] = useState(sessionStorage.getItem('locale') || 'en'); const locales = service.getLocales(); const payments = service.getPayments(); const changeLocale = (e: SelectBoxTypes.ValueChangedEvent) => { setLocale(e.value); sessionStorage.setItem('locale', e.value); document.location.reload(); }; return ( <div> <DataGrid dataSource={payments} keyExpr="PaymentId" > <Editing mode="popup" allowUpdating={true} popup={editPopupOptions} /> <FilterRow visible={true} applyFilter="auto" /> <Column dataField="PaymentId" caption={Globalize.formatMessage('Number')} allowEditing={false} width={100} /> <Column dataField="ContactName" caption={Globalize.formatMessage('Contact')} /> <Column dataField="CompanyName" caption={Globalize.formatMessage('Company')} /> <Column dataField="Amount" caption={Globalize.formatMessage('Amount')} dataType="number" format="currency" editorOptions={amountEditorOptions} /> <Column dataField="PaymentDate" caption={Globalize.formatMessage('PaymentDate')} dataType="date" /> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <label htmlFor="selectInput">Language</label>   <SelectBox items={locales} valueExpr="Value" displayExpr="Name" value={locale} onValueChanged={changeLocale} inputAttr={selectBoxInputAttr} /> </div> </div> </div> ); }; export default App;

/* eslint-disable import/no-unresolved */ /* eslint-disable import/no-webpack-loader-syntax */ import React, { useState } from 'react'; import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; import SelectBox from 'devextreme-react/select-box'; import 'devextreme/common/core/localization/globalize/number'; import 'devextreme/common/core/localization/globalize/date'; import 'devextreme/common/core/localization/globalize/currency'; import 'devextreme/common/core/localization/globalize/message'; import deMessages from 'devextreme/localization/messages/de.json'; import ruMessages from 'devextreme/localization/messages/ru.json'; import deCldrData from 'devextreme-cldr-data/de.json'; import ruCldrData from 'devextreme-cldr-data/ru.json'; import supplementalCldrData from 'devextreme-cldr-data/supplemental.json'; import Globalize from 'globalize'; import service from './data.js'; const editPopupOptions = { width: 700, height: 345, }; const amountEditorOptions = { format: 'currency', showClearButton: true, }; const selectBoxInputAttr = { id: 'selectInput' }; Globalize.load(deCldrData, ruCldrData, supplementalCldrData); Globalize.loadMessages(deMessages); Globalize.loadMessages(ruMessages); Globalize.loadMessages(service.getDictionary()); Globalize.locale(sessionStorage.getItem('locale') || 'en'); const App = () => { const [locale, setLocale] = useState(sessionStorage.getItem('locale') || 'en'); const locales = service.getLocales(); const payments = service.getPayments(); const changeLocale = (e) => { setLocale(e.value); sessionStorage.setItem('locale', e.value); document.location.reload(); }; return ( <div> <DataGrid dataSource={payments} keyExpr="PaymentId" > <Editing mode="popup" allowUpdating={true} popup={editPopupOptions} /> <FilterRow visible={true} applyFilter="auto" /> <Column dataField="PaymentId" caption={Globalize.formatMessage('Number')} allowEditing={false} width={100} /> <Column dataField="ContactName" caption={Globalize.formatMessage('Contact')} /> <Column dataField="CompanyName" caption={Globalize.formatMessage('Company')} /> <Column dataField="Amount" caption={Globalize.formatMessage('Amount')} dataType="number" format="currency" editorOptions={amountEditorOptions} /> <Column dataField="PaymentDate" caption={Globalize.formatMessage('PaymentDate')} dataType="date" /> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <label htmlFor="selectInput">Language</label>   <SelectBox items={locales} valueExpr="Value" displayExpr="Name" value={locale} onValueChanged={changeLocale} inputAttr={selectBoxInputAttr} /> </div> </div> </div> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html 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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></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; }

React Localization - Using Globalize