Localization and Custom Editors

You can localize the display of numbers, dates, and currency values within the grid by providing a locale identifier and options, compliant to the Intl (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) object specification, to the format property of the column metaData.

JavaScript

grid.model.columnMetaData(3).set("format", {
 locales: "ja-JP"
        options: { currency: "JPY" }
});

By default, the inplace editors, provided by the grid control for the Date, DateTime and Image type columns are:

• <input type="date"> for Date
• <input type="datetime-local"> for DateTime
• <input type="file"> for Image

You can replace the default editors with a corresponging control from the MindFusion.Common.UI library (DateTimePicker for Date and DateTime and ImagePicker for Image) by setting the "customEditor" property in the column metaData. The value of the "customEditor" property should be a dictionary of property names and values, that you wish to set for the control, as specified by its API.

To localize the DateTimePicker you should set its "locale" property to an instance of the MindFusion.Common.Locale class. The Locale class provides culture-specific information, that can be loaded from a CLDR dates json file.

JavaScript

// set MindFusion.Common.UI.DateTimePicker as an inplace editor for the column and configure it
// to use the loaded german locale, to try to parse incomplete input and to consider empty values valid.var url = 'https://unpkg.com/cldr-dates-full/main/de/ca-gregorian.json';fetch(url)
 .then(response => response.json())
 .then((data) =>
        {
            var localeObj = new common.Locale("de");
            localeObj.fromJson(JSON.stringify(data));            grid.model.columnMetaData(1).set("customEditor", {
                    "autoComplete": true,
                    "allowEmptyInput": true,
                    "locale": localeObj
            });           grid.refresh();
 })