Breaking Change T812036
Visible to All Users

HTML JavaScript Dashboard does not include globalize integration by default

Overview

Before 19.2, DevExpress Web Dashboard imported the Globalize modules to format dates, numbers, and currencies.

Starting from 19.2, Web Dashboard better integrates with DevExtreme and enables you to choose whether to localize date, number and currency values using Intl or Globalize. We recommend you use Intl, but you can continue using Globalize.

Note that one of the internationalization and localization provider (Intl or Globalize) is required for the Web Dashboard control to provide correct number formating.

Changes

  1. The Web Dashboard uses Intl as a default library.
  2. The Web Dashboard does not import the devextreme/localization/globalize/* modules.
  3. The dependencies of the devexpress-dashboard package are changed: globalize and devextreme-cldr-data are removed.

Motivation

Intl is a short name used to refer to a particular ECMAScript Internationalization API object.

Globalize is an open source JavaScript library for internationalization and localization that leverage the official Unicode CLDR JSON data.

Intl has several advantages over Globalize:

  1. Intl is a part of ECMAScript standard. You do not need to add any extra language resources to your page. In case of Globalize, you need to load cldr-data.
  2. Intl is easier to configure. (See documentation).
  3. You do not need to patch the tsconfig.json / config-overrides.js / webpack.config files to enable Globalize in a modular application.

Affected platforms

Changes affect only modular approach.

Changes does not affect ASP.NET Web Forms, ASP.NET MVC, and ASP.NET Core platforms.

Changes do not affect your application, if you use the approach with global namespaces for HTML JavaScript control and Globalize scripts are included into your html page. In this case, you can choose whether to use Intl or Globalize in your application.

Migration Guide

For modular approach, when you migrate from 19.1 to 19.2, you need to perform the following changes to start using Intl instead of Globalize.

Switch to Intl (recommended):

  1. Remove the following lines if they are present in your code:
JavaScript
import "devextreme/localization/globalize/message"; import "devextreme/localization/globalize/number"; import "devextreme/localization/globalize/currency"; import "devextreme/localization/globalize/date";
  1. Replace the Globalize.locale method with the following code:
JavaScript
import { locale } from 'devextreme/localization'; // ... export class DashboardComponent implements AfterViewInit, OnDestroy { private dashboardControl!: DashboardControl; constructor(private element: ElementRef) { // ... // Apply your culture: locale('de'); }
  1. Remove Globalize.load and code associated with them.
  2. Remove the Globalize integration from the tsconfig.json (compilerOption.paths) or config-overrides.js(config.resolve.alias) files.

You can continue to use Globalize, but we do not recommend this approach.

Continue to Use Globalize

In 19.2, Globalize should be globally initialized in the application before 'devexpress-dashboard' is used:

  1. Install the following packages (for Global Namespaces and Modular approaches):
Code
npm install globalize@^1.0.1 devextreme-cldr-data@^1.0.2
  1. Import the globalize libraries before devexpress-dashboard is used (only for the Modular approach):
JavaScript
import "devextreme/localization/globalize/message"; import "devextreme/localization/globalize/number"; import "devextreme/localization/globalize/currency"; import "devextreme/localization/globalize/date"; import * as Globalize from 'globalize'; import { DashboardControl, ResourceManager } from 'devexpress-dashboard';

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.