jQuery/JS Common - Object Structures - GlobalConfig

Specifies settings that affect all DevExtreme UI components.

import { GlobalConfig } from "devextreme/common"
Type:

Object

Pass this object to the DevExpress.config(GlobalConfig) method to apply these setting, or call the same method without arguments to get the object with current settings.

Code
DevExpress.config({
    rtlEnabled: true,
    forceIsoDateParsing: false,
    //...
});

copyStylesToShadowDom

Specifies whether to copy DevExtreme stylesheets into the Shadow DOM.

Type:

Boolean

Default Value: true

Set this property to true to inject DevExtreme stylesheets into the Shadow DOM (if the stylesheets are hosted on the same domain as index.html). Set to false to skip injection.

dateFormat

Specifies the default date format for all DevExtreme components in the application.

Type: LocalizationFormat | Record
Default Value: undefined

This property can accept a predefined format string, custom format string, or format function.

jQuery
index.js
DevExpress.config({
    dateFormat: 'yyyy-MM-dd',
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    dateFormat: 'yyyy-MM-dd',
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    dateFormat: 'yyyy-MM-dd',
});
React
App.tsx
import config from "devextreme/core/config";

config({
    dateFormat: 'yyyy-MM-dd',
});

You can configure default formats for specific locales. Assign an object with key-value pairs to this property. Use locale identifiers as keys. Use the default key to specify a format for all other locales:

jQuery
index.js
DevExpress.config({
    dateFormat: {
        default: 'longDate',
        en: 'shortDate',
    }
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    dateFormat: {
        default: 'longDate',
        en: 'shortDate',
    }
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    dateFormat: {
        default: 'longDate',
        en: 'shortDate',
    }
});
React
App.tsx
import config from "devextreme/core/config";

config({
    dateFormat: {
        default: 'longDate',
        en: 'shortDate',
    }
});

dateTimeFormat

Specifies the default date and time format for all DevExtreme components in the application.

Type: LocalizationFormat | Record
Default Value: undefined

This property can accept a predefined format string, custom format string, or format function.

jQuery
index.js
DevExpress.config({
    dateTimeFormat: 'yyyy-MM-dd, HH:mm:ss',
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    dateTimeFormat: 'yyyy-MM-dd, HH:mm:ss',
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    dateTimeFormat: 'yyyy-MM-dd, HH:mm:ss',
});
React
App.tsx
import config from "devextreme/core/config";

config({
    dateTimeFormat: 'yyyy-MM-dd, HH:mm:ss',
});

You can configure default formats for specific locales. Assign an object with key-value pairs to this property. Use locale identifiers as keys. Use the default key to specify a format for all other locales:

jQuery
index.js
DevExpress.config({
    dateTimeFormat: {
        default: 'longDateLongTime',
        en: 'shortDateShortTime',
    }
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    dateTimeFormat: {
        default: 'longDateLongTime',
        en: 'shortDateShortTime',
    }
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    dateTimeFormat: {
        default: 'longDateLongTime',
        en: 'shortDateShortTime',
    }
});
React
App.tsx
import config from "devextreme/core/config";

config({
    dateTimeFormat: {
        default: 'longDateLongTime',
        en: 'shortDateShortTime',
    }
});

dateTimeFormatPresets

Configures overrides for predefined date/time formats.

Type: Record
Default Value: undefined

Use this object to override predefined DevExtreme formats. You can specify overrides as custom format strings or format functions.

You can configure overrides for specific locales. To do this, specify key-value pair objects. Use locale identifiers as keys. Use the default key to specify an override for all other locales:

jQuery
index.js
DevExpress.config({
    dateTimeFormatPresets: {
        shortDate: {
            default: 'dd/MM/yyyy',
            'en-US': 'MM/dd/yyyy',
        },
        shortTime: 'HH:mm:ss',
    }
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    dateTimeFormatPresets: {
        shortDate: {
            default: 'dd/MM/yyyy',
            'en-US': 'MM/dd/yyyy',
        },
        shortTime: 'HH:mm:ss',
    }
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    dateTimeFormatPresets: {
        shortDate: {
            default: 'dd/MM/yyyy',
            'en-US': 'MM/dd/yyyy',
        },
        shortTime: 'HH:mm:ss',
    }
});
React
App.tsx
import config from "devextreme/core/config";

config({
    dateTimeFormatPresets: {
        shortDate: {
            default: 'dd/MM/yyyy',
            'en-US': 'MM/dd/yyyy',
        },
        shortTime: 'HH:mm:ss',
    }
});
NOTE
You cannot use dateTimeFormatPresets to override number formats.

decimalSeparator Deprecated

A decimal separator. No longer applies.

Type:

String

Default Value: '.'

Since v19.2, the separator is selected based on the specified locale. See Localize Dates, Numbers, and Currencies for more information.

defaultCurrency

The default currency. Accepts a 3-letter ISO 4217 code.

Type:

String

Default Value: 'USD'
jQuery
index.js
DevExpress.config({ defaultCurrency: 'EUR' });
// ===== or when using modules =====
import config from "devextreme/core/config";

config({
    defaultCurrency: 'EUR'
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    defaultCurrency: 'EUR'
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    defaultCurrency: 'EUR'
});
React
App.js
import config from "devextreme/core/config";

config({
    defaultCurrency: 'EUR'
});
See Also

defaultUseCurrencyAccountingStyle

Specifies whether to apply the accounting style to formatted numbers of the currency type.

Type:

Boolean

Default Value: true

The accounting style adds parentheses to negative numbers instead of the minus sign. To disable the accounting style globally and display formatted numbers of the currency type with the minus sign, set this property to false.

jQuery
index.js
DevExpress.config({ defaultUseCurrencyAccountingStyle: false });
// ===== or when using modules =====
import config from "devextreme/core/config";

config({
    defaultCurrency: 'EUR'
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    defaultUseCurrencyAccountingStyle: false 
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    defaultUseCurrencyAccountingStyle: false 
});
React
App.js
import config from "devextreme/core/config";

config({
    defaultUseCurrencyAccountingStyle: false 
});

This property specifies the global accounting style setting. If you want to override this setting for a component, specify the useCurrencyAccountingStyle property in the component's format object.

How to Override the defaultUseCurrencyAccountingStyle

editorStylingMode

Specifies how editors' text fields are styled in your application.

Type:

EditorStyle

| undefined
Default Value: undefined

The following styles are available:

Text Editor Styling Modes

JavaScript
DevExpress.config({ 
    editorStylingMode: 'filled' // or 'outlined' | 'underlined'
});

View Demo

floatingActionButtonConfig

Configures a Floating Action Button (FAB) that emits a stack of related actions (speed dial).

Type:

Object

View Demo

If you change this object at runtime, call the DevExpress.ui.repaintFloatingActionButton() method afterwards to apply the changes.

forceIsoDateParsing

Specifies whether dates are parsed and serialized according to the ISO 8601 standard in all browsers.

Type:

Boolean

Default Value: true

The default value is true. This implies that UI components detect date-time values' format automatically. If the values are not provided to the UI component yet, you need to specify the format explicitly using the UI component's dateSerializationFormat property. When you assign false to the forceIsoDateParsing, a browser's resources are utilized to parse and serialize date-time values.

licenseKey

A license key.

Type:

String

For instructions on how to obtain a license key, refer to the following help topic: Obtain Your License Key.

numberFormat

Specifies the default number format for all DevExtreme components in the application.

Type: LocalizationFormat | Record
Default Value: undefined

This property can accept a predefined format string, custom format string, or format function.

jQuery
index.js
DevExpress.config({
    numberFormat: '#0.#',
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    numberFormat: '#0.#',
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    numberFormat: '#0.#',
});
React
App.tsx
import config from "devextreme/core/config";

config({
    numberFormat: '#0.#',
});

You can configure default formats for specific locales. Assign an object with key-value pairs to this property. Use locale identifiers as keys. Use the default key to specify a format for all other locales:

jQuery
index.js
DevExpress.config({
    numberFormat: {
        default: 'billions',
        en: 'millions',
    }
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    numberFormat: {
        default: 'billions',
        en: 'millions',
    }
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    numberFormat: {
        default: 'billions',
        en: 'millions',
    }
});
React
App.tsx
import config from "devextreme/core/config";

config({
    numberFormat: {
        default: 'billions',
        en: 'millions',
    }
});

oDataFilterToLower

Specifies whether to convert string values to lowercase in filter and search requests to OData services. Applies to the following operations: "startswith", "endswith", "contains", and "notcontains".

Type:

Boolean

Default Value: true

When the oDataFilterToLower property is true, the filter expression sent to the server contains a tolower() function call and a lowercase filter value.

jQuery
index.js
DevExpress.config({
    oDataFilterToLower: true
});
// ===== or when using modules =====
import config from "devextreme/core/config";

config({
    oDataFilterToLower: true
})

// The filter expression in the request looks like the following:
// https://...?filter=startswith(tolower(Product_Name), 'tel')
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    oDataFilterToLower: true
})

// The filter expression in the request looks like the following:
// https://...?filter=startswith(tolower(Product_Name), 'tel')
Vue
App.vue
import config from "devextreme/core/config";

config({
    oDataFilterToLower: true
})

// The filter expression in the request looks like the following:
// https://...?filter=startswith(tolower(Product_Name), 'tel')
React
App.js
import config from "devextreme/core/config";

config({
    oDataFilterToLower: true
})

// The filter expression in the request looks like the following:
// https://...?filter=startswith(tolower(Product_Name), 'tel')

You can use the filterToLower property in an individual ODataStore or ODataContext to control the same functionality.

rtlEnabled

Specifies whether the UI components support a right-to-left representation. Available for individual UI components as well.

Type:

Boolean

Default Value: false

serverDecimalSeparator

The decimal separator that is used when submitting a value to the server.

Type:

String

Default Value: '.'

thousandsSeparator Deprecated

A group separator. No longer applies.

Type:

String

Default Value: ','

Since v19.2, the separator is selected based on the specified locale. See Localize Dates, Numbers, and Currencies for more information.

timeFormat

Specifies the default time format for all DevExtreme components in the application.

Type: LocalizationFormat | Record
Default Value: undefined

This property can accept a predefined format string, custom format string, or format function.

jQuery
index.js
DevExpress.config({
    timeFormat: 'HH:mm:ss',
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    timeFormat: 'HH:mm:ss',
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    timeFormat: 'HH:mm:ss',
});
React
App.tsx
import config from "devextreme/core/config";

config({
    timeFormat: 'HH:mm:ss',
});

You can configure default formats for specific locales. Assign an object with key-value pairs to this property. Use locale identifiers as keys. Use the default key to specify a format for all other locales:

jQuery
index.js
DevExpress.config({
    timeFormat: {
        default: 'longTime',
        en: 'shortTime',
    }
});
Angular
app.component.ts
import config from "devextreme/core/config";

config({
    timeFormat: {
        default: 'longTime',
        en: 'shortTime',
    }
});
Vue
App.vue
import config from "devextreme/core/config";

config({
    timeFormat: {
        default: 'longTime',
        en: 'shortTime',
    }
});
React
App.tsx
import config from "devextreme/core/config";

config({
    timeFormat: {
        default: 'longTime',
        en: 'shortTime',
    }
});