Locale settings
Features have been enhanced to make it easier to set up grids in multilingual environments. Phrases used within the grid can be changed and displayed to suit the specified language, and number formats can also be displayed in currency, accounting, and decimal formats in accordance with international standards.
If you need to add or modify the number format, refer to Intl.NumberFormat (opens in a new tab) and create the format. do.
The numberFormat provided by default is as follows.
number: {
style: "decimal",
excelFormat: "#,##0.0"
},
currency: {
style: "currency",
currency: currency,
excelFormat: currency === "KRW" ? "₩#,##0" : undefined
},
accounting: {
style: "currency",
currency: currency,
currencySign: "accounting",
// excelFormat: currency === "KRW" ? "\"\\"#,##0_);[Red](\"\"#,##0)" : undefined
}**Caution**
- Only the form displayed on the screen is changed, and a general number editor is used as the editor.
const message = {
"en" : {
dateEditorWeekDays: ['sun','mon','tue','wed','thu','fri','sat'],
dateEditorMonths: ['Jun','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' ],
dateEditorSaveLabel: 'Save',
dateEditorCancelLabel: 'Cancel',
dateEditorDeleteLabel: 'Delete',
dateEditorTodayLabel: 'Today',
dateEditorHourLabel: 'Ho',
dateEditorMinuteLabel: 'Mi',
dateEditorSecondLabel: 'Se',
dateEditorYearDisplayFormat: '{Y}',
// dateEditorMonthDisplayFormat: '{M} month',
searchEditorMoreText: "more",
checkListAcceptText: "Accept",
checkListCancelText: "Cancel",
checkListAllCheckText: "Check All",
filterSelectorAcceptText: "Accept",
filterSelectorAllCheckText: "(All Select)",
filterSelectorCancelText: "Cancel",
filterSelectorEmptyFilterText: "(Empty Value)",
filterSelectorFilterResetText: "Reset",
filterSelectorFiltersResetText: "Reset All",
filterSelectorSearchPlaceholder: "Search...",
filterSelectorSearchedCheckText: "(Search All Selected)",
filterSelectorDateYearFormat: '{YYYY}',
filterSelectorDateQuarterFormat: 'Q{Q}',
filterSelectorDateMonthFormat: '{M}',
filterSelectorDateDayFormat: 'YYYY-MM-DD',
dataDropProxyLabel: "${rows} rows ${mode}",
dataDropModeCopy: "Move",
dataDropModeMove: "Copy",
groupingPrompt: "Drag a column header and drop it here to group by that column.",
displayEmptyMessage: "There is no data to display.",
filterOperatorContains: "contains",
filterOperatorNotContains: "not contains",
filterOperatorStartsWith: "starts with",
filterOperatorEndsWith: "ends width",
filterOperatorEqual: "equal",
filterOperatorNotEqual: "not Equal",
filterOperatorEmpty: "empty Value",
filterOperatorReset: "reset",
filterOperatorGreater: "greater then",
filterOperatorGreaterEqual: "greater then or equal",
filterOperatorLower: "less then",
filterOperatorLowerEqual: "less then or equal",
filterOperatorBetween: "between"
},
"ko": {
dateEditorCancelLabel: "Cancel",
dateEditorDeleteLabel: "Delete",
dateEditorHourLabel: "Hour",
dateEditorMinuteLabel: "minute",
dateEditorSecondLabel: "seconds",
dateEditorMonths: ['January','February','March','April','May','June','July','August','September','10 'Month','November','December'],
dateEditorSaveLabel: "Save",
dateEditorTodayLabel: "Today",
dateEditorWeekDays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Sat'],
dateEditorYearDisplayFormat: '{Y} year',
dateEditorMonthDisplayFormat: '{M} month',
searchEditorMoreText: "More",
checkListAcceptText: "Confirm",
checkListCancelText: "Cancel",
checkListAllCheckText: "Select all",
filterSelectorAcceptText: "OK",
filterSelectorAllCheckText: "(Select all)",
filterSelectorCancelText: "Cancel",
filterSelectorEmptyFilterText: "(no value)",
filterSelectorFilterResetText: "Reset",
filterSelectorFiltersResetText: "Reset all",
filterSelectorSearchPlaceholder: "Search...",
filterSelectorSearchedCheckText: "(Select all searched)",
filterSelectorDateYearFormat: '{YYYY} year',
filterSelectorDateQuarterFormat: '{Q}Quarter',
filterSelectorDateMonthFormat: '{M} month',
filterSelectorDateDayFormat: 'YYYY-MM-DD',
filterToastMessage: "Filtering...",
dataDropProxyLabel: "${rows} rows ${mode}",
dataDropModeCopy: "Move",
dataDropModeMove: "Copy",
groupingPrompt: "If you drag a column header here, it will group by that column.",
groupingToastMessage: "Grouping rows...",
displayEmptyMessage: "There is no data to display.",
filterOperatorContains: "contains",
filterOperatorNotContains: "Does not contain",
filterOperatorStartsWith: "Start character",
filterOperatorEndsWith: "End characters",
filterOperatorEqual: "equal",
filterOperatorNotEqual: "Not Equal",
filterOperatorEmpty: "No value",
filterOperatorReset: "Reset",
filterOperatorGreater: "Greater than",
filterOperatorGreaterEqual: "Greater than or equal to",
filterOperatorLower:"less than",
filterOperatorLowerEqual: "Less than or equal to",
filterOperatorBetween: "range",
invalidDatetimeFormat1: "Invalid date format - 'H' and 'a' cannot coexist: ",
invalidDatetimeFormat2: "Invalid date format - 'a' must be present if 'h' is present: ",
commitEditingMessage: "Please complete editing first.",
deleteRowsMessage: "Do you want to delete the selected row(s)?",
invalidFormatMessage: "Invalid input type.",
decimalSeparator: ".",
thousandsSeparator: ",",
sortingToastMessage: "Sorting...",
rowIndicatorHeadText: "No.",
rowIndicatorFootText: "Σ",
rowIndicatorSumText: "Σ",
stateTextCreateAndDeleted: "X",
stateTextCreated: "C",
stateTextDeleted: "D",
stateTextUpdated: "U",
rowOutOfBounds: "row is out of bounds: ",
fieldIndexOutOfBounds: "fieldIndex is out of bounds: ",
fieldNameMustExists: "fieldName must be exists.",
fieldNameAlreadyExists: "fieldName is already exists: ",
clientEditingError: "Client is editing (call grid.commit() or grid.cancel() first)"
},
"ja": {
dateEditorWeekDays: ['日','月','fire','water','wood','geum','earth'],
displayEmptyMessage: 'Let's do it.',
groupingPrompt: 'It's important to remember what to do and what to do.',
dateEditorYearDisplayFormat: '{Y}year',
dateEditorMonthDisplayFormat: '{M}month',
dateEditorTodayLabel: '今日',
dateEditorMonths: ['いちがつ', 'にがつ', 'さがつ', 'しがつ', 'ごがつ', 'ろくがつ', 'しちがつ', 'はちがつ ', 'くがつ', 'じゅうがつ', 'じゅういちがつ', 'じゅうにがつ'],
dateEditorSaveLabel: "セーブ",
dateEditorCancelLabel: "取消",
dateEditorDeleteLabel: "デリート",
checkListAcceptText: "適用する",
checkListCancelText: "取消",
checkListAllCheckText: "All the steps",
},
"fr": {
dateEditorWeekDays: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'],
dateEditorMonths: ['janv', 'févr', 'mars', 'avr', 'mai', 'juin', 'juil', 'août', 'sept', 'oct', 'nov', 'déc' ],
displayEmptyMessage: "Il n'y an aucune donnée à afficher"
},
"hi": {
displayEmptyMessage: 'प्रदर्शित करने के लिए कोई डेटा नहीं है.',
dateEditorWeekDays: ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'],
dateEditorMonths: ['जन॰', 'फ़र॰', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुल॰', 'अग॰', ' सित॰', 'अक्तू॰', ' नव॰', 'दिस॰'],
groupingPrompt: "किसी कॉलम हेडर को खींचें और उसे उस कॉलम के आध ","
dateEditorYearDisplayFormat: "{Y}वर्ष"
}
}
const gridLocale = {
"en-US": {
locale: "en-US",
currency: "USD",
messages: message.en,
numberFormats: {
currency: {
style: "currency",
currency: "USD"
},
USD: {
style: "currency",
currency: "USD"
}
}
},
"en-CA": {
locale: "en-CA",
currency: "CAD",
messages: message.en,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"fr-CA": {
locale: "fr-CA",
currency: "CAD",
messages: message.fr,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"hi-IN": {
locale: "hi-IN",
currency: "INR",
messages: message. hi,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"ko-KR": {
locale: "ko-KR",
currency: "KRW",
messages: message.ko,
numberFormats: {
currency: {
style: "currency",
currency: "KRW",
excelFormat: "\#,##0"
},
accounting: {
style: "currency",
currency: "KRW",
currencySign: "accounting",
// excelFormat: "₩#,##0_);[red](₩#,##0)"
excelFormat:"\"\\"#,##0_);[Red](\"\\"#,##0)"
},
USD: {
style: "currency",
currency: "USD"
}
}
},
"ja-JP": {
locale: "ja-JP",
currency: "JPY",
messages: message.ja,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"fr-FR": {
locale: "fr-FR",
currency: "EUR",
messages: message.fr,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
}
}
RealGrid.setLocale(gridLocale["en-US"])
dataProvider = new RealGrid.LocalDataProvider();
gridView = new RealGrid.GridView(container);
gridView.setDataSource(dataProvider);