Angular Common - Object Structures - GlobalConfig

Specifies settings that affect all DevExtreme UI components.

import { GlobalConfig } from "devextreme/common"

Type:

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',
    }
});

You can also specify locale-specific formats and the default format as format objects. These objects can include the locale field. Components use this locale in the following scenarios:

When a component uses the global dateFormat
When a component format does not specify locale and uses the "shortDate" type or the same type as the global dateFormat
When a component uses an Intl format that does not specify locale and includes date fields but no time fields:
- Date: year, month, day, weekday
- Time: hour, minute, second

If a component uses a different date format (such as "monthAndYear"), the component displays values in the current application locale. To apply another locale, specify locale in this format.

The following code specifies the "de-DE" locale for the global dateFormat:

jQuery

index.js

DevExpress.config({
    dateFormat: {
        default: {
            type: 'shortDate',
            locale: 'de-DE',
        },
    }
});

Angular

app.component.ts

import config from "devextreme/core/config";

config({
    dateFormat: {
        default: {
            type: 'shortDate',
            locale: 'de-DE',
        },
    }
});

Vue

App.vue

import config from "devextreme/core/config";

config({
    dateFormat: {
        default: {
            type: 'shortDate',
            locale: 'de-DE',
        },
    }
});

React

App.tsx

import config from "devextreme/core/config";

config({
    dateFormat: {
        default: {
            type: 'shortDate',
            locale: 'de-DE',
        },
    }
});

NOTE

Assign format objects to the default key or to specific locale keys. Do not declare format options directly inside dateFormat.
If a format object in dateFormat does not specify type, only the "shortDate" predefined format uses the format object's locale.

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',
    }
});

You can also specify locale-specific formats and the default format as format objects. These objects can include the locale field. Components use this locale in the following scenarios:

When a component uses the global dateTimeFormat
When a component format does not specify locale and uses the "shortDateShortTime" type or the same type as the global dateTimeFormat
When a component uses an Intl format that does not specify locale and includes at least one field from each group:
- Date: year, month, day, weekday
- Time: hour, minute, second

If a component uses a different date-time format (such as "longDateLongTime"), the component displays values in the current application locale. To apply another locale, specify locale in this format.

The following code specifies the "de-DE" locale for the global dateTimeFormat:

jQuery

index.js

DevExpress.config({
    dateTimeFormat: {
        default: {
            type: 'shortDateShortTime',
            locale: 'de-DE',
        },
    }
});

Angular

app.component.ts

import config from "devextreme/core/config";

config({
    dateTimeFormat: {
        default: {
            type: 'shortDateShortTime',
            locale: 'de-DE',
        },
    }
});

Vue

App.vue

import config from "devextreme/core/config";

config({
    dateTimeFormat: {
        default: {
            type: 'shortDateShortTime',
            locale: 'de-DE',
        },
    }
});

React

App.tsx

import config from "devextreme/core/config";

config({
    dateTimeFormat: {
        default: {
            type: 'shortDateShortTime',
            locale: 'de-DE',
        },
    }
});

NOTE

Assign format objects to the default key or to specific locale keys. Do not declare format options directly inside dateTimeFormat.
If a format object in dateTimeFormat does not specify type, only the "shortDateShortTime" predefined format uses the format object's locale.

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',
    }
});

You can also define overrides as format objects. Assign these objects to specific locale keys or the default key. To display values in a specific locale, add the locale field to the format object.

jQuery

index.js

DevExpress.config({
    dateTimeFormatPresets: {
        longDateLongTime: {
            default: {
                type: 'longDateLongTime',
                locale: 'en-CA',
            },
        },
    },
});

Angular

app.component.ts

import config from "devextreme/core/config";

config({
    dateTimeFormatPresets: {
        longDateLongTime: {
            default: {
                type: 'longDateLongTime',
                locale: 'en-CA',
            },
        },
    },
});

Vue

App.vue

import config from "devextreme/core/config";

config({
    dateTimeFormatPresets: {
        longDateLongTime: {
            default: {
                type: 'longDateLongTime',
                locale: 'en-CA',
            },
        },
    },
});

React

App.tsx

import config from "devextreme/core/config";

config({
    dateTimeFormatPresets: {
        longDateLongTime: {
            default: {
                type: 'longDateLongTime',
                locale: 'en-CA',
            },
        },
    },
});

NOTE

You cannot use dateTimeFormatPresets to override number formats.

decimalSeparator

A decimal separator. No longer applies.

Type:

String

Default Value: '.'

Beginning with 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'
});

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 and register a license key, refer to the following help topic: Obtain and Register 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',
    }
});

You can also specify locale-specific formats and the default format as format objects. These objects can include the locale field. Components use this locale in the following scenarios:

When a component uses the global numberFormat
When a component format does not specify locale

This locale also defines decimal and group separators in custom format strings. To apply another locale to component formats, specify locale in these formats.

The following code specifies the "de-DE" locale for the global numberFormat:

jQuery

index.js

DevExpress.config({
    numberFormat: {
        default: {
            type: 'fixedPoint',
            precision: 2,
            locale: 'de-DE',
        },
    }
});

Angular

app.component.ts

import config from "devextreme/core/config";

config({
    numberFormat: {
        default: {
            type: 'fixedPoint',
            precision: 2,
            locale: 'de-DE',
        },
    }
});

Vue

App.vue

import config from "devextreme/core/config";

config({
    numberFormat: {
        default: {
            type: 'fixedPoint',
            precision: 2,
            locale: 'de-DE',
        },
    }
});

React

App.tsx

import config from "devextreme/core/config";

config({
    numberFormat: {
        default: {
            type: 'fixedPoint',
            precision: 2,
            locale: 'de-DE',
        },
    }
});

NOTE

Assign format objects to the default key or to specific locale keys. Do not declare format options directly inside numberFormat.

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

A group separator. No longer applies.

Type:

String

Default Value: ','

Beginning with 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',
    }
});

You can also specify locale-specific formats and the default format as format objects. These objects can include the locale field. Components use this locale in the following scenarios:

When a component uses the global timeFormat
When a component format does not specify locale and uses the "shortTime" type or the same type as the global timeFormat
When a component uses an Intl format that does not specify locale and includes time fields but no date fields:
- Time: hour, minute, second
- Date: year, month, day, weekday

If a component uses a different time format (such as "longTime"), the component displays values in the current application locale. To apply another locale, specify locale in this format.

The following code specifies the "de-DE" locale for the global timeFormat:

jQuery

index.js

DevExpress.config({
    timeFormat: {
        default: {
            type: 'shortTime',
            locale: 'de-DE',
        },
    }
});

Angular

app.component.ts

import config from "devextreme/core/config";

config({
    timeFormat: {
        default: {
            type: 'shortTime',
            locale: 'de-DE',
        },
    }
});

Vue

App.vue

import config from "devextreme/core/config";

config({
    timeFormat: {
        default: {
            type: 'shortTime',
            locale: 'de-DE',
        },
    }
});

React

App.tsx

import config from "devextreme/core/config";

config({
    timeFormat: {
        default: {
            type: 'shortTime',
            locale: 'de-DE',
        },
    }
});

NOTE

Assign format objects to the default key or to specific locale keys. Do not declare format options directly inside timeFormat.
If a format object in timeFormat does not specify type, only the "shortTime" predefined format uses the format object's locale.

Angular Common - Object Structures - GlobalConfig

copyStylesToShadowDom

dateFormat

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

dateTimeFormat

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

dateTimeFormatPresets

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

decimalSeparator Deprecated

defaultCurrency

jQuery

Angular

Vue

React

See Also

defaultUseCurrencyAccountingStyle

jQuery

Angular

Vue

React

editorStylingMode

floatingActionButtonConfig

forceIsoDateParsing

licenseKey

numberFormat

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

oDataFilterToLower

jQuery

Angular

Vue

React

rtlEnabled

serverDecimalSeparator

thousandsSeparator Deprecated

timeFormat

jQuery

Angular

decimalSeparator

thousandsSeparator