From 2f941c882f2d816c52b1f627d5fd9514048ab8bd Mon Sep 17 00:00:00 2001 From: Vlada Skorokhodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Fri, 17 Jul 2026 14:27:25 +0400 Subject: [PATCH] Localization: big docs update (#8961) # Conflicts: # concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md # concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md # concepts/Common/Localization/01 Dictionaries/Dictionaries.md # concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/05 Using Intl.md # concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md # concepts/Common/Localization/20 Right-to-Left Support.md --- MenuConfig.xml | 7 +- .../1 Configuration/tooltip/argumentFormat.md | 3 +- .../tooltip/contentTemplate.md | 3 +- .../scale/label/customizeText.md | 2 +- .../tooltip/customizeTooltip.md | 4 +- .../1 Configuration/tooltip/format.md | 2 +- .../dateSerializationFormat.md | 3 +- .../1 Configuration/displayFormat.md | 3 +- .../1 Configuration/label/format.md | 3 +- .../dateSerializationFormat.md | 4 +- .../argumentAxis/label/format.md | 5 +- .../tooltip/contentTemplate.md | 3 +- .../AreaSeries/label/customizeText.md | 4 +- .../BarSeries/label/customizeText.md | 2 +- .../BubbleSeries/label/customizeText.md | 2 +- .../CandleStickSeries/label/customizeText.md | 4 +- .../CommonSeries/label/argumentFormat.md | 3 +- .../CommonSeries/label/customizeText.md | 2 +- .../CommonSeries/label/format.md | 3 +- .../label/customizeText.md | 4 +- .../label/customizeText.md | 4 +- .../label/customizeText.md | 4 +- .../label/customizeText.md | 4 +- .../label/customizeText.md | 4 +- .../LineSeries/label/customizeText.md | 4 +- .../RangeAreaSeries/label/customizeText.md | 4 +- .../RangeBarSeries/label/customizeText.md | 4 +- .../ScatterSeries/label/customizeText.md | 2 +- .../SplineAreaSeries/label/customizeText.md | 4 +- .../SplineSeries/label/customizeText.md | 4 +- .../StackedAreaSeries/label/customizeText.md | 4 +- .../StackedBarSeries/label/customizeText.md | 4 +- .../StackedLineSeries/label/customizeText.md | 4 +- .../label/customizeText.md | 4 +- .../label/customizeText.md | 4 +- .../StepAreaSeries/label/customizeText.md | 4 +- .../StepLineSeries/label/customizeText.md | 4 +- .../StockSeries/label/customizeText.md | 4 +- .../9 Types/ArgumentAxisLabel/format.md | 4 +- .../1 Configuration/displayFormat.md | 2 +- .../dxDateBox/1 Configuration/pickerType.md | 5 +- .../dxFunnel/1 Configuration/label/format.md | 5 +- .../dxList/1 Configuration/nextButtonText.md | 2 +- .../dxList/1 Configuration/pageLoadingText.md | 4 +- .../dxList/1 Configuration/pulledDownText.md | 2 +- .../dxList/1 Configuration/pullingDownText.md | 2 +- .../dxList/1 Configuration/refreshingText.md | 2 +- .../dxNumberBox/1 Configuration/format.md | 6 +- .../label/argumentFormat.md | 3 +- .../label/customizeText.md | 2 +- .../argumentAxis/label/customizeText.md | 2 +- .../valueAxis/label/customizeText.md | 2 +- .../label/argumentFormat.md | 3 +- .../label/customizeText.md | 2 +- .../scale/label/customizeText.md | 2 +- .../1 Configuration/sliderMarker/format.md | 3 +- .../1 Configuration/fields/format.md | 11 +- .../BaseChartTooltip/argumentFormat.md | 4 +- .../BaseWidgetTooltip/format.md | 4 +- .../GlobalConfig/dateFormat.md | 3 +- .../GlobalConfig/dateTimeFormat.md | 3 +- .../GlobalConfig/dateTimeFormatPresets.md | 4 +- .../GlobalConfig/decimalSeparator.md | 2 +- .../GlobalConfig/defaultCurrency.md | 2 +- .../GlobalConfig/numberFormat.md | 3 +- .../GlobalConfig/thousandsSeparator.md | 2 +- .../GlobalConfig/timeFormat.md | 3 +- .../Object Structures/format/currency.md | 2 +- .../Object Structures/format/format.md | 10 +- .../Object Structures/format/type.md | 5 +- .../localization/formatDate(value_format).md | 4 +- .../localization/formatMessage(key_value).md | 2 +- .../formatNumber(value_format).md | 4 +- .../localization/loadMessages(messages).md | 4 +- .../50 Common/utils/localization/locale().md | 2 +- .../utils/localization/locale(locale).md | 2 +- .../utils/localization/localization.md | 6 +- .../localization/parseDate(text_format).md | 6 +- .../_hidden/dxDataGridColumn/format.md | 16 +- .../_hidden/dxFilterBuilderField/format.md | 5 +- .../10 Visual Elements/40 Tooltips.md | 6 +- .../Chat/40 Customize the Empty View.md | 5 +- .../10 Visual Elements/70 Tooltips.md | 3 +- .../DateBox/01 Overview/10 Key Features.md | 7 +- .../04 Value Formatting and Masked Input.md | 5 +- .../10 Value Formatting and Masked Input.md | 3 +- .../10 Visual Elements/70 Tooltips.md | 9 +- concepts/05 UI Components/List/08 Paging.md | 5 +- .../List/25 Selection/01 User Interaction.md | 2 +- .../35 Item Deletion/01 User Interaction.md | 9 +- .../01 Touch-Screen Gestures.md | 4 +- .../05 UI Components/List/50 Localization.md | 183 ---------- .../030 Series Point Labels.md | 6 +- .../10 Visual Elements/040 Tooltips.md | 6 +- .../10 Visual Elements/070 Axis Labels.md | 6 +- .../02 Globalize Registration.md | 7 +- ...65 Additional Configuration for Webpack.md | 3 +- .../2 Globalize Registration.md | 5 +- ...orted Formats, Exceptions, and Settings.md | 4 +- .../00 Overview.md | 34 ++ .../00 UI Text Localization.md | 74 ++++ .../05 DevExtreme Dictionaries Reference.md | 323 ++++++++++++++++++ .../10 Create a New Dictionary.md | 15 + .../15 Add Strings to a Dictionary.md | 117 +++++++ .../20 Override Strings in a Dictionary.md | 79 +++++ .../00 Value Formatting.md | 10 + .../10 Value Formatting/04 Using Intl.md | 107 ++++++ .../10 Value Formatting/08 Using Globalize.md | 221 ++++++++++++ .../00 Format UI Component Values.md} | 0 .../10 Predefined Formats.md | 125 +++++++ .../15 Intl Formats.md | 136 ++++++++ .../20 Custom Format String.md | 35 +- .../30 Custom Function.md | 157 +++++++++ .../40 Format and Parse Dates and Numbers.md | 140 ++++++++ .../20 Right-to-Left (RTL) Support.md} | 99 ++---- .../02 Create a New Dictionary.md | 8 - .../05 Add Strings to a Dictionary.md | 139 -------- .../07 Override Strings in a Dictionary.md | 91 ----- .../01 Dictionaries/Dictionaries.md | 115 ------- .../05 Using Intl.md | 249 -------------- .../10 Using Globalize.md | 306 ----------------- ...Localize Dates, Numbers, and Currencies.md | 1 - .../Localization/15 Localize Custom Values.md | 5 - concepts/Common/Localization/Localization.md | 8 - .../10 Predefined Formats.md | 122 ------- .../15 Intl Formats.md | 125 ------- .../30 Custom Function.md | 119 ------- .../40 Format Custom Values.md | 94 ----- .../Value Formatting/Value Formatting.md | 1 - 129 files changed, 1798 insertions(+), 1833 deletions(-) delete mode 100644 concepts/05 UI Components/List/50 Localization.md create mode 100644 concepts/Common/Localization and Globalization/00 Overview.md create mode 100644 concepts/Common/Localization and Globalization/05 UI Text Localization/00 UI Text Localization.md create mode 100644 concepts/Common/Localization and Globalization/05 UI Text Localization/05 DevExtreme Dictionaries Reference.md create mode 100644 concepts/Common/Localization and Globalization/05 UI Text Localization/10 Create a New Dictionary.md create mode 100644 concepts/Common/Localization and Globalization/05 UI Text Localization/15 Add Strings to a Dictionary.md create mode 100644 concepts/Common/Localization and Globalization/05 UI Text Localization/20 Override Strings in a Dictionary.md create mode 100644 concepts/Common/Localization and Globalization/10 Value Formatting/00 Value Formatting.md create mode 100644 concepts/Common/Localization and Globalization/10 Value Formatting/04 Using Intl.md create mode 100644 concepts/Common/Localization and Globalization/10 Value Formatting/08 Using Globalize.md rename concepts/Common/{Value Formatting/10 Format UI Component Values/Format UI Component Values.md => Localization and Globalization/10 Value Formatting/10 Format UI Component Values/00 Format UI Component Values.md} (100%) create mode 100644 concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/10 Predefined Formats.md create mode 100644 concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/15 Intl Formats.md rename concepts/Common/{Value Formatting => Localization and Globalization/10 Value Formatting}/10 Format UI Component Values/20 Custom Format String.md (68%) create mode 100644 concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/30 Custom Function.md create mode 100644 concepts/Common/Localization and Globalization/10 Value Formatting/40 Format and Parse Dates and Numbers.md rename concepts/Common/{Localization/20 Right-to-Left Support.md => Localization and Globalization/20 Right-to-Left (RTL) Support.md} (50%) delete mode 100644 concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md delete mode 100644 concepts/Common/Localization/01 Dictionaries/05 Add Strings to a Dictionary.md delete mode 100644 concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md delete mode 100644 concepts/Common/Localization/01 Dictionaries/Dictionaries.md delete mode 100644 concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/05 Using Intl.md delete mode 100644 concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md delete mode 100644 concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/Localize Dates, Numbers, and Currencies.md delete mode 100644 concepts/Common/Localization/15 Localize Custom Values.md delete mode 100644 concepts/Common/Localization/Localization.md delete mode 100644 concepts/Common/Value Formatting/10 Format UI Component Values/10 Predefined Formats.md delete mode 100644 concepts/Common/Value Formatting/10 Format UI Component Values/15 Intl Formats.md delete mode 100644 concepts/Common/Value Formatting/10 Format UI Component Values/30 Custom Function.md delete mode 100644 concepts/Common/Value Formatting/40 Format Custom Values.md delete mode 100644 concepts/Common/Value Formatting/Value Formatting.md diff --git a/MenuConfig.xml b/MenuConfig.xml index 487974818f..11b14f053a 100644 --- a/MenuConfig.xml +++ b/MenuConfig.xml @@ -63,13 +63,12 @@ - - + - + - + diff --git a/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/argumentFormat.md b/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/argumentFormat.md index 904f7e56e4..58ca22633c 100644 --- a/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/argumentFormat.md +++ b/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/argumentFormat.md @@ -9,4 +9,5 @@ Formats the point argument before it is displayed in the tooltip. To format the #####See Also##### - [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') - provides a comprehensive overview of formatting capabilities. -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') - shows how to apply formatting to various UI component elements. +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) - shows how to apply formatting to various UI component elements. + diff --git a/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/contentTemplate.md b/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/contentTemplate.md index dd3bfd6b62..3266d9c9d6 100644 --- a/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/contentTemplate.md +++ b/api-reference/10 UI Components/BaseChart/1 Configuration/tooltip/contentTemplate.md @@ -27,4 +27,5 @@ Series point data. } #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) + diff --git a/api-reference/10 UI Components/BaseGauge/1 Configuration/scale/label/customizeText.md b/api-reference/10 UI Components/BaseGauge/1 Configuration/scale/label/customizeText.md index bdb1fd7bfe..250b2fd023 100644 --- a/api-reference/10 UI Components/BaseGauge/1 Configuration/scale/label/customizeText.md +++ b/api-reference/10 UI Components/BaseGauge/1 Configuration/scale/label/customizeText.md @@ -26,4 +26,4 @@ The text for the label to display. } #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/BaseGauge/1 Configuration/tooltip/customizeTooltip.md b/api-reference/10 UI Components/BaseGauge/1 Configuration/tooltip/customizeTooltip.md index 0a16f1ca51..51198cc67c 100644 --- a/api-reference/10 UI Components/BaseGauge/1 Configuration/tooltip/customizeTooltip.md +++ b/api-reference/10 UI Components/BaseGauge/1 Configuration/tooltip/customizeTooltip.md @@ -15,7 +15,7 @@ The raw value. The [formatted](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '{basewidgetpath}/Configuration/tooltip/#format') value converted to a string. ##### return: Object -The tooltip's configuration. +Tooltip configuration. --- #include dataviz-customize-tooltip-return @@ -23,4 +23,4 @@ The tooltip's configuration. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) diff --git a/api-reference/10 UI Components/BaseWidget/1 Configuration/tooltip/format.md b/api-reference/10 UI Components/BaseWidget/1 Configuration/tooltip/format.md index 0d36582e23..708e1cafd8 100644 --- a/api-reference/10 UI Components/BaseWidget/1 Configuration/tooltip/format.md +++ b/api-reference/10 UI Components/BaseWidget/1 Configuration/tooltip/format.md @@ -9,4 +9,4 @@ Formats a value before it is displayed it in a tooltip. See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/format/') section for information on accepted values. #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) diff --git a/api-reference/10 UI Components/DateBoxBase/1 Configuration/dateSerializationFormat.md b/api-reference/10 UI Components/DateBoxBase/1 Configuration/dateSerializationFormat.md index f88b899a36..f82c2aedb1 100644 --- a/api-reference/10 UI Components/DateBoxBase/1 Configuration/dateSerializationFormat.md +++ b/api-reference/10 UI Components/DateBoxBase/1 Configuration/dateSerializationFormat.md @@ -10,7 +10,7 @@ Specifies the date value serialization format. --- Date serialization involves date value conversion into a string format for storage or transmission. To ensure proper format detection, specify this property. -Use LDML patterns to pass [custom format strings](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String') to this property. +Use LDML patterns to pass [custom format strings](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md) to this property. [important] **dateSerializationFormat** does not support all LDML pattern combinations. @@ -30,3 +30,4 @@ For instance, you can specify the `"yyyy-MM-dd"` date pattern. #####See Also##### - [Troubleshooting - Date String Handling Issues](/concepts/80%20Troubleshooting/10%20Date%20String%20Handling%20Issues/00%20Date%20String%20Handling%20Issues.md '/Documentation/Guide/Troubleshooting/Date_String_Handling_Issues/') + diff --git a/api-reference/10 UI Components/DateBoxBase/1 Configuration/displayFormat.md b/api-reference/10 UI Components/DateBoxBase/1 Configuration/displayFormat.md index 65cd3248d2..958469c3ce 100644 --- a/api-reference/10 UI Components/DateBoxBase/1 Configuration/displayFormat.md +++ b/api-reference/10 UI Components/DateBoxBase/1 Configuration/displayFormat.md @@ -20,4 +20,5 @@ The default display format is selected automatically based on the current [local } #####See Also##### -- [Format Widget Values](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values') +- [Format Widget Values](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/00%20Format%20UI%20Component%20Values.md) + diff --git a/api-reference/10 UI Components/dxBarGauge/1 Configuration/label/format.md b/api-reference/10 UI Components/dxBarGauge/1 Configuration/label/format.md index 182c856ebf..3fa660fb9a 100644 --- a/api-reference/10 UI Components/dxBarGauge/1 Configuration/label/format.md +++ b/api-reference/10 UI Components/dxBarGauge/1 Configuration/label/format.md @@ -16,4 +16,5 @@ See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documen #####See Also##### - [customizeText](/api-reference/10%20UI%20Components/dxBarGauge/1%20Configuration/label/customizeText.md '/Documentation/ApiReference/UI_Components/dxBarGauge/Configuration/label/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) + diff --git a/api-reference/10 UI Components/dxCalendar/1 Configuration/dateSerializationFormat.md b/api-reference/10 UI Components/dxCalendar/1 Configuration/dateSerializationFormat.md index b291d52ef3..2378832907 100644 --- a/api-reference/10 UI Components/dxCalendar/1 Configuration/dateSerializationFormat.md +++ b/api-reference/10 UI Components/dxCalendar/1 Configuration/dateSerializationFormat.md @@ -10,7 +10,7 @@ Specifies the date-time value serialization format. --- Date-time serialization involves date-time value conversion into a string format for storage or transmission. To ensure proper format detection, specify this property. -Use LDML patterns to pass [custom format strings](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String') to this property. +Use LDML patterns to pass [custom format strings](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md) to this property. [important] **dateSerializationFormat** does not support all LDML pattern combinations. @@ -41,4 +41,4 @@ Date and time with a timezone. [/note] #####See Also##### -- [Troubleshooting - Date String Handling Issues](/concepts/80%20Troubleshooting/10%20Date%20String%20Handling%20Issues/00%20Date%20String%20Handling%20Issues.md '/Documentation/Guide/Troubleshooting/Date_String_Handling_Issues/') \ No newline at end of file +- [Troubleshooting - Date String Handling Issues](/concepts/80%20Troubleshooting/10%20Date%20String%20Handling%20Issues/00%20Date%20String%20Handling%20Issues.md '/Documentation/Guide/Troubleshooting/Date_String_Handling_Issues/') diff --git a/api-reference/10 UI Components/dxChart/1 Configuration/argumentAxis/label/format.md b/api-reference/10 UI Components/dxChart/1 Configuration/argumentAxis/label/format.md index 173dbf6454..82b228694c 100644 --- a/api-reference/10 UI Components/dxChart/1 Configuration/argumentAxis/label/format.md +++ b/api-reference/10 UI Components/dxChart/1 Configuration/argumentAxis/label/format.md @@ -10,8 +10,9 @@ Formats a value before it is displayed in an axis label. --- See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/format/') section for information on accepted values. -When this property value is `undefined`, the date-time axes display larger date range boundaries in labels. For example, if an axis displays months, it also displays a year near each instance of January. If an axis displays days, it also displays a month name near each first visible day mark. +When this property value is `undefined`, the date-time axes display larger date range boundaries in labels. For example, if an axis displays months, it also displays a year near each instance of January. If an axis displays days, it also displays the month near each first visible day mark. #####See Also##### - [customizeText](/api-reference/10%20UI%20Components/dxChart/1%20Configuration/argumentAxis/label/customizeText.md '{currentpath}/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') + diff --git a/api-reference/10 UI Components/dxChart/1 Configuration/tooltip/contentTemplate.md b/api-reference/10 UI Components/dxChart/1 Configuration/tooltip/contentTemplate.md index 79eddc2bb9..4f7493b930 100644 --- a/api-reference/10 UI Components/dxChart/1 Configuration/tooltip/contentTemplate.md +++ b/api-reference/10 UI Components/dxChart/1 Configuration/tooltip/contentTemplate.md @@ -27,4 +27,5 @@ Series point data. } #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) + diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/AreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/AreaSeries/label/customizeText.md index 0144ff3af1..9ba5d3ccca 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/AreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/AreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/BarSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/BarSeries/label/customizeText.md index ab80f71163..f63cf75341 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/BarSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/BarSeries/label/customizeText.md @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/BubbleSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/BubbleSeries/label/customizeText.md index 208249e685..0c725de8fb 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/BubbleSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/BubbleSeries/label/customizeText.md @@ -62,4 +62,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/CandleStickSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/CandleStickSeries/label/customizeText.md index 9c7d6ec1fc..6a373fd32d 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/CandleStickSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/CandleStickSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -102,4 +102,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/argumentFormat.md b/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/argumentFormat.md index f4e6157135..e639de6991 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/argumentFormat.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/argumentFormat.md @@ -12,4 +12,5 @@ A point label displays only the point value by default. Using the **label**.[cus #####See Also##### - [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') - provides a comprehensive overview of formatting capabilities. -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') - shows how to apply formatting to various UI component elements. +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') - shows how to apply formatting to various UI component elements. + diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/customizeText.md index 46a0dc76c1..53c8b06e93 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/customizeText.md @@ -159,4 +159,4 @@ The following fields are inherent to financial series ([candlestick](/api-refere #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/format.md b/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/format.md index c5526bdaf4..d90537d906 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/format.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/CommonSeries/label/format.md @@ -21,4 +21,5 @@ If you specify the format with an object and apply it to a full-stacked-like ser #####See Also##### - [customizeText](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/CommonSeries/label/customizeText.md '{currentpath}/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') + diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedAreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedAreaSeries/label/customizeText.md index 75b8c9673b..bf933d678b 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedAreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedAreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedBarSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedBarSeries/label/customizeText.md index 1eb69a161a..926ad6cc29 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedBarSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedBarSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedLineSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedLineSeries/label/customizeText.md index b3590ef49b..2c63f25156 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedLineSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedLineSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineAreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineAreaSeries/label/customizeText.md index 65723f6414..57b9f3e863 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineAreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineAreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineSeries/label/customizeText.md index 48a1c7d997..478595c385 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/FullStackedSplineSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/LineSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/LineSeries/label/customizeText.md index ec0b579863..e4aa222e80 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/LineSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/LineSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/RangeAreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/RangeAreaSeries/label/customizeText.md index ca6068baf0..4c9d36c767 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/RangeAreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/RangeAreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -62,4 +62,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/RangeBarSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/RangeBarSeries/label/customizeText.md index 5a3eefe6ec..74f62e80c1 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/RangeBarSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/RangeBarSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -62,4 +62,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/ScatterSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/ScatterSeries/label/customizeText.md index df6a90012d..cfd800aa1a 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/ScatterSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/ScatterSeries/label/customizeText.md @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/SplineAreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/SplineAreaSeries/label/customizeText.md index 14319e82f6..1e13cd887e 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/SplineAreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/SplineAreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/SplineSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/SplineSeries/label/customizeText.md index 920a6b590c..9142a16327 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/SplineSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/SplineSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StackedAreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StackedAreaSeries/label/customizeText.md index 2efe18d8b9..996bb38f0a 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StackedAreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StackedAreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StackedBarSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StackedBarSeries/label/customizeText.md index 5ba0cfe082..aa13a00c76 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StackedBarSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StackedBarSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StackedLineSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StackedLineSeries/label/customizeText.md index 617df9985d..27a83bb7f0 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StackedLineSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StackedLineSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineAreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineAreaSeries/label/customizeText.md index 997208956f..f734b8713a 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineAreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineAreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineSeries/label/customizeText.md index 3196e29ec8..79c3192e45 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StackedSplineSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -74,4 +74,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StepAreaSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StepAreaSeries/label/customizeText.md index 5d8970aa39..9b6c3c99be 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StepAreaSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StepAreaSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StepLineSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StepLineSeries/label/customizeText.md index f26daa1775..4f778ea423 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StepLineSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StepLineSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -58,4 +58,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/5 Series Types/StockSeries/label/customizeText.md b/api-reference/10 UI Components/dxChart/5 Series Types/StockSeries/label/customizeText.md index 62808cb415..ba137ac8a6 100644 --- a/api-reference/10 UI Components/dxChart/5 Series Types/StockSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxChart/5 Series Types/StockSeries/label/customizeText.md @@ -5,7 +5,7 @@ notUsedInTheme: --- --- ##### shortDescription -Customizes the text displayed by point labels. +Customizes text displayed by point labels. ##### param(pointInfo): Object Information on the series point. @@ -102,4 +102,4 @@ This property accepts a function whose parameter exposes the following fields. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxChart/9 Types/ArgumentAxisLabel/format.md b/api-reference/10 UI Components/dxChart/9 Types/ArgumentAxisLabel/format.md index f000159109..d0d4f6898a 100644 --- a/api-reference/10 UI Components/dxChart/9 Types/ArgumentAxisLabel/format.md +++ b/api-reference/10 UI Components/dxChart/9 Types/ArgumentAxisLabel/format.md @@ -13,6 +13,6 @@ See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documen #####See Also##### - [customizeText](/api-reference/10%20UI%20Components/dxChart/1%20Configuration/argumentAxis/label/customizeText.md '{currentpath}/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') ---> \ No newline at end of file +--> diff --git a/api-reference/10 UI Components/dxDateBox/1 Configuration/displayFormat.md b/api-reference/10 UI Components/dxDateBox/1 Configuration/displayFormat.md index fc864cf77f..17dbcbc415 100644 --- a/api-reference/10 UI Components/dxDateBox/1 Configuration/displayFormat.md +++ b/api-reference/10 UI Components/dxDateBox/1 Configuration/displayFormat.md @@ -20,4 +20,4 @@ The default display format is selected automatically based on the current [local } #####See Also##### -- [Format Widget Values](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values') \ No newline at end of file +- [Format Widget Values](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/00%20Format%20UI%20Component%20Values.md) diff --git a/api-reference/10 UI Components/dxDateBox/1 Configuration/pickerType.md b/api-reference/10 UI Components/dxDateBox/1 Configuration/pickerType.md index 19adddb305..f2e7e2db46 100644 --- a/api-reference/10 UI Components/dxDateBox/1 Configuration/pickerType.md +++ b/api-reference/10 UI Components/dxDateBox/1 Configuration/pickerType.md @@ -5,7 +5,7 @@ default: 'calendar', 'native' (Android, iOS) --- --- ##### shortDescription -Specifies the type of the date/time picker. +Specifies the date/time picker type. --- This property accepts the following values: @@ -23,7 +23,7 @@ The picker type depends on the current platform or web browser. When **pickerType** is *"native"*, DateBox behavior changes as follows: - - The component overrides [DevExtreme localization](/concepts/Common/Localization '/Documentation/Guide/Common/Localization/') settings and formats dates according to the user device locale. + - The component overrides [DevExtreme localization](/concepts/Common/Localization%20and%20Globalization/00%20Overview.md) settings and formats dates according to the user device locale. - DateBox raises [onValueChanged](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/onValueChanged.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#onValueChanged') while the user edits the value, not after editing is complete. - The component does not raise the following events: - [onClosed](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/onClosed.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#onClosed') @@ -44,3 +44,4 @@ The DateBox displays rollers for users to select date and time. Users cannot edi #include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Overview/" } + diff --git a/api-reference/10 UI Components/dxFunnel/1 Configuration/label/format.md b/api-reference/10 UI Components/dxFunnel/1 Configuration/label/format.md index 5a6c1043de..f7f9b66730 100644 --- a/api-reference/10 UI Components/dxFunnel/1 Configuration/label/format.md +++ b/api-reference/10 UI Components/dxFunnel/1 Configuration/label/format.md @@ -5,7 +5,7 @@ default: undefined --- --- ##### shortDescription -Formats the item value before displaying it in the label. +Formats the item value before it is displayed in the label. --- See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/format/') section for information on accepted values. @@ -21,4 +21,5 @@ If you specify the format with an object, it can also contain the **percentPreci #####See Also##### - [customizeText](/api-reference/10%20UI%20Components/dxFunnel/1%20Configuration/label/customizeText.md '{currentpath}/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) + diff --git a/api-reference/10 UI Components/dxList/1 Configuration/nextButtonText.md b/api-reference/10 UI Components/dxList/1 Configuration/nextButtonText.md index 032b9ed0a5..5ae1097c9d 100644 --- a/api-reference/10 UI Components/dxList/1 Configuration/nextButtonText.md +++ b/api-reference/10 UI Components/dxList/1 Configuration/nextButtonText.md @@ -9,4 +9,4 @@ The text displayed on the button used to load the next page from the data source --- #####See Also##### -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') \ No newline at end of file +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md) diff --git a/api-reference/10 UI Components/dxList/1 Configuration/pageLoadingText.md b/api-reference/10 UI Components/dxList/1 Configuration/pageLoadingText.md index 98abe30f9a..9c47567a2c 100644 --- a/api-reference/10 UI Components/dxList/1 Configuration/pageLoadingText.md +++ b/api-reference/10 UI Components/dxList/1 Configuration/pageLoadingText.md @@ -5,8 +5,8 @@ default: 'Loading...', '' (Fluent, Material) --- --- ##### shortDescription -Specifies the text shown in the pullDown panel, which is displayed when the list is scrolled to the bottom. +Specifies the text shown in the pullDown panel that is displayed when the list is scrolled to the bottom. --- #####See Also##### -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') \ No newline at end of file +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md) diff --git a/api-reference/10 UI Components/dxList/1 Configuration/pulledDownText.md b/api-reference/10 UI Components/dxList/1 Configuration/pulledDownText.md index b242e69229..ca4b62ca39 100644 --- a/api-reference/10 UI Components/dxList/1 Configuration/pulledDownText.md +++ b/api-reference/10 UI Components/dxList/1 Configuration/pulledDownText.md @@ -9,4 +9,4 @@ Specifies the text displayed in the pullDown panel when the list is pulled below --- #####See Also##### -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') \ No newline at end of file +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md) diff --git a/api-reference/10 UI Components/dxList/1 Configuration/pullingDownText.md b/api-reference/10 UI Components/dxList/1 Configuration/pullingDownText.md index 2008ae5ec1..a6d70eb91b 100644 --- a/api-reference/10 UI Components/dxList/1 Configuration/pullingDownText.md +++ b/api-reference/10 UI Components/dxList/1 Configuration/pullingDownText.md @@ -9,4 +9,4 @@ Specifies the text shown in the pullDown panel while the list is being pulled do --- #####See Also##### -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') \ No newline at end of file +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md) diff --git a/api-reference/10 UI Components/dxList/1 Configuration/refreshingText.md b/api-reference/10 UI Components/dxList/1 Configuration/refreshingText.md index 68a4358d7c..b5dada9caa 100644 --- a/api-reference/10 UI Components/dxList/1 Configuration/refreshingText.md +++ b/api-reference/10 UI Components/dxList/1 Configuration/refreshingText.md @@ -9,4 +9,4 @@ Specifies the text displayed in the pullDown panel while the list is being refre --- #####See Also##### -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') \ No newline at end of file +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md) diff --git a/api-reference/10 UI Components/dxNumberBox/1 Configuration/format.md b/api-reference/10 UI Components/dxNumberBox/1 Configuration/format.md index 9256ae15dc..cb39dc6317 100644 --- a/api-reference/10 UI Components/dxNumberBox/1 Configuration/format.md +++ b/api-reference/10 UI Components/dxNumberBox/1 Configuration/format.md @@ -30,7 +30,7 @@ The format property can accept the following value types: - Custom format string - Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard characters and characters displayed as is. The **format** property supports the following wildcard characters: + Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard characters and literal characters that are displayed as-is. The **format** property supports the following wildcard characters: @@ -125,7 +125,7 @@ The format property can accept the following value types: } - Function -A function should apply a custom format to a value and return the formatted value as a string. A shortcut for the [formatter](/api-reference/50%20Common/Object%20Structures/format/formatter.md '/Documentation/ApiReference/Common/Object_Structures/Format/#formatter') property. Refer to the following article for more information: [Custom Function](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Function'). +A function should apply a custom format to a value and return the formatted value as a string. A shortcut for the [formatter](/api-reference/50%20Common/Object%20Structures/format/formatter.md '/Documentation/ApiReference/Common/Object_Structures/Format/#formatter') property. Refer to the following article for more information: [Custom Function](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md). [important] If you allow users to edit the formatted value, implement the [parser](/api-reference/50%20Common/Object%20Structures/format/parser.md '/Documentation/ApiReference/Common/Object_Structures/format/#parser') function to convert the value back to a number. @@ -143,4 +143,4 @@ Full format configuration. The object structure is shown in the [format](/api-re [/note] #####See Also##### -- [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') \ No newline at end of file +- [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') diff --git a/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/argumentFormat.md b/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/argumentFormat.md index 423be4d5b6..3ce823ec8f 100644 --- a/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/argumentFormat.md +++ b/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/argumentFormat.md @@ -11,4 +11,5 @@ Formats the point argument before it is displayed in the point label. To format #####See Also##### - [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') - provides a comprehensive overview of formatting capabilities. -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') - shows how to apply formatting to various UI component elements. +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') - shows how to apply formatting to various UI component elements. + diff --git a/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/customizeText.md b/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/customizeText.md index eaf34b8757..ef4f7a4492 100644 --- a/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxPieChart/5 Series Types/CommonPieChartSeries/label/customizeText.md @@ -38,4 +38,4 @@ Specifies the tag of the represented point. } #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxPolarChart/1 Configuration/argumentAxis/label/customizeText.md b/api-reference/10 UI Components/dxPolarChart/1 Configuration/argumentAxis/label/customizeText.md index aaca9ca709..9962c5d4e6 100644 --- a/api-reference/10 UI Components/dxPolarChart/1 Configuration/argumentAxis/label/customizeText.md +++ b/api-reference/10 UI Components/dxPolarChart/1 Configuration/argumentAxis/label/customizeText.md @@ -23,4 +23,4 @@ The text for the label to display. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxPolarChart/1 Configuration/valueAxis/label/customizeText.md b/api-reference/10 UI Components/dxPolarChart/1 Configuration/valueAxis/label/customizeText.md index 392d2a087e..9dea297094 100644 --- a/api-reference/10 UI Components/dxPolarChart/1 Configuration/valueAxis/label/customizeText.md +++ b/api-reference/10 UI Components/dxPolarChart/1 Configuration/valueAxis/label/customizeText.md @@ -23,4 +23,4 @@ The text for the label to display. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/argumentFormat.md b/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/argumentFormat.md index 3b4232e72a..b7ce232bb1 100644 --- a/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/argumentFormat.md +++ b/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/argumentFormat.md @@ -11,4 +11,5 @@ Formats the point argument before it is displayed in the point label. To format #####See Also##### - [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') - provides a comprehensive overview of formatting capabilities. -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') - shows how to apply formatting to various UI component elements. +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') - shows how to apply formatting to various UI component elements. + diff --git a/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/customizeText.md b/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/customizeText.md index 09566ae730..0fe66cbcd7 100644 --- a/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/customizeText.md +++ b/api-reference/10 UI Components/dxPolarChart/5 Series Types/CommonPolarChartSeries/label/customizeText.md @@ -40,4 +40,4 @@ Specifies the series of the represented point. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxRangeSelector/1 Configuration/scale/label/customizeText.md b/api-reference/10 UI Components/dxRangeSelector/1 Configuration/scale/label/customizeText.md index 5e4176c765..0f274fabdf 100644 --- a/api-reference/10 UI Components/dxRangeSelector/1 Configuration/scale/label/customizeText.md +++ b/api-reference/10 UI Components/dxRangeSelector/1 Configuration/scale/label/customizeText.md @@ -23,4 +23,4 @@ The text for the label to display. #include dataviz-ref-functioncontext #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') diff --git a/api-reference/10 UI Components/dxRangeSelector/1 Configuration/sliderMarker/format.md b/api-reference/10 UI Components/dxRangeSelector/1 Configuration/sliderMarker/format.md index af27ff8013..99f097fa22 100644 --- a/api-reference/10 UI Components/dxRangeSelector/1 Configuration/sliderMarker/format.md +++ b/api-reference/10 UI Components/dxRangeSelector/1 Configuration/sliderMarker/format.md @@ -16,4 +16,5 @@ See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documen #####See Also##### - [customizeText](/api-reference/10%20UI%20Components/dxRangeSelector/1%20Configuration/sliderMarker/customizeText.md '{currentpath}/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) + diff --git a/api-reference/30 Data Layer/PivotGridDataSource/1 Configuration/fields/format.md b/api-reference/30 Data Layer/PivotGridDataSource/1 Configuration/fields/format.md index 8bda666547..37a9a4d921 100644 --- a/api-reference/30 Data Layer/PivotGridDataSource/1 Configuration/fields/format.md +++ b/api-reference/30 Data Layer/PivotGridDataSource/1 Configuration/fields/format.md @@ -159,7 +159,7 @@ See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documen --- -Date formats require additional configuration. The **PivotGridDataSource** groups date field values by date component: Year-Quarter-Month. For this, the values are converted from dates to numbers, but you cannot use date formats to format numbers. To apply a date format in this case, override this grouping. +Date formats require additional configuration. The **PivotGridDataSource** groups date field values by the date component: Year-Quarter-Month. To do this, the values are converted from dates to numbers, but you cannot use date formats to format numbers. To apply a date format in this case, override this grouping. The following code declares a custom group for the `ShippingDate` data field. This configuration overrides this field's default grouping. Field values are grouped by year and then by month. Months are formatted as `MMM` (`Jan`, `Feb`, `Mar`, etc.). This format is applied to the Date values the [selector](/api-reference/30%20Data%20Layer/PivotGridDataSource/1%20Configuration/fields/selector.md '/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#selector') function returns. @@ -362,20 +362,20 @@ The following code declares a custom group for the `ShippingDate` data field. Th When a format is [exported to Excel](/api-reference/10%20UI%20Components/dxPivotGrid/1%20Configuration/export '/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/export/'), it is converted to an Excel format as follows: - **Numeric** -Converted to Number format, except for *"largeNumber"*, which is exported without formatting. +Converted to Number format, except for the *"largeNumber"* since it is exported without formatting. - **Currency** Converted to the Currency format. - **Date-Time** -Converted to the Date or Time format, depending on the cell value. +Converted to the Date or Time format, depending on cell value. Exceptions: *"quarter"* and *"quarterAndYear"* are exported as Short Date; *"minute"* and *"millisecond"* are exported as Long Time. - **Function** Cannot be converted automatically. Assign this function to the [customizeText](/api-reference/30%20Data%20Layer/PivotGridDataSource/1%20Configuration/fields/customizeText.md '/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#customizeText') property instead of the **format** property. -- [Custom format string](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String') -Cannot be converted, the cell value is exported without formatting. To export this format, return the formatted string from the [customizeText](/api-reference/30%20Data%20Layer/PivotGridDataSource/1%20Configuration/fields/customizeText.md '/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#customizeText') callback as follows: +- [Custom format string](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md') +Cannot be converted: the cell value is exported without formatting. To export this format, return the formatted string from the [customizeText](/api-reference/30%20Data%20Layer/PivotGridDataSource/1%20Configuration/fields/customizeText.md '/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#customizeText') callback as follows: --- ##### jQuery @@ -547,3 +547,4 @@ Cannot be converted, the cell value is exported without formatting. To export th #####See Also##### - **fields[]**.[customizeText](/api-reference/30%20Data%20Layer/PivotGridDataSource/1%20Configuration/fields/customizeText.md '/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#customizeText') + diff --git a/api-reference/40 Common Types/05 charts/BaseChartTooltip/argumentFormat.md b/api-reference/40 Common Types/05 charts/BaseChartTooltip/argumentFormat.md index 580c6f3ad2..acf1e5b198 100644 --- a/api-reference/40 Common Types/05 charts/BaseChartTooltip/argumentFormat.md +++ b/api-reference/40 Common Types/05 charts/BaseChartTooltip/argumentFormat.md @@ -12,6 +12,6 @@ Formats the point argument before it is displayed in the tooltip. To format the #####See Also##### - [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') - provides a comprehensive overview of formatting capabilities. -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') - shows how to apply formatting to various UI component elements. +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') - shows how to apply formatting to various UI component elements. ---> \ No newline at end of file +--> diff --git a/api-reference/40 Common Types/BaseWidgetTooltip/format.md b/api-reference/40 Common Types/BaseWidgetTooltip/format.md index f3f5f92f6a..d58c6bf5a6 100644 --- a/api-reference/40 Common Types/BaseWidgetTooltip/format.md +++ b/api-reference/40 Common Types/BaseWidgetTooltip/format.md @@ -12,5 +12,5 @@ Formats a value before it is displayed it in a tooltip. See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/format/') section for information on accepted values. #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') ---> \ No newline at end of file +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') +--> diff --git a/api-reference/50 Common/Object Structures/GlobalConfig/dateFormat.md b/api-reference/50 Common/Object Structures/GlobalConfig/dateFormat.md index 4dc094aa05..dd42b4a772 100644 --- a/api-reference/50 Common/Object Structures/GlobalConfig/dateFormat.md +++ b/api-reference/50 Common/Object Structures/GlobalConfig/dateFormat.md @@ -8,7 +8,7 @@ default: undefined Specifies the default date format for all DevExtreme components in the application. --- -This property can accept a [predefined format string](/api-reference/40%20Common%20Types/Format.md '/Documentation/ApiReference/Common_Types/#Format'), [custom format string](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String'), or [format function](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Function'). +This property can accept a [predefined format string](/api-reference/40%20Common%20Types/Format.md '/Documentation/ApiReference/Common_Types/#Format'), [custom format string](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md), or [format function](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md). --- @@ -99,3 +99,4 @@ You can configure default formats for specific locales. Assign an object with ke }); --- + diff --git a/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormat.md b/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormat.md index 7bfe67838d..087b26a519 100644 --- a/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormat.md +++ b/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormat.md @@ -8,7 +8,7 @@ default: undefined Specifies the default date and time format for all DevExtreme components in the application. --- -This property can accept a [predefined format string](/api-reference/40%20Common%20Types/Format.md '/Documentation/ApiReference/Common_Types/#Format'), [custom format string](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String'), or [format function](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Function'). +This property can accept a [predefined format string](/api-reference/40%20Common%20Types/Format.md '/Documentation/ApiReference/Common_Types/#Format'), [custom format string](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md), or [format function](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md). --- @@ -99,3 +99,4 @@ You can configure default formats for specific locales. Assign an object with ke }); --- + diff --git a/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormatPresets.md b/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormatPresets.md index e240d325d9..109b1cb110 100644 --- a/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormatPresets.md +++ b/api-reference/50 Common/Object Structures/GlobalConfig/dateTimeFormatPresets.md @@ -8,7 +8,7 @@ default: undefined Configures overrides for predefined date/time formats. --- -Use this object to override [predefined DevExtreme formats](/api-reference/40%20Common%20Types/Format.md '/Documentation/ApiReference/Common_Types/#Format'). You can specify overrides as [custom format strings](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String') or [format functions](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Function'). +Use this object to override [predefined DevExtreme formats](/api-reference/40%20Common%20Types/Format.md '/Documentation/ApiReference/Common_Types/#Format'). You can specify overrides as [custom format strings](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md) or [format functions](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md). 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: @@ -74,4 +74,4 @@ You can configure overrides for specific locales. To do this, specify key-value --- -[note] You cannot use **dateTimeFormatPresets** to override number formats. \ No newline at end of file +[note] You cannot use **dateTimeFormatPresets** to override number formats. diff --git a/api-reference/50 Common/Object Structures/GlobalConfig/decimalSeparator.md b/api-reference/50 Common/Object Structures/GlobalConfig/decimalSeparator.md index 717d02f598..fed8cc56c7 100644 --- a/api-reference/50 Common/Object Structures/GlobalConfig/decimalSeparator.md +++ b/api-reference/50 Common/Object Structures/GlobalConfig/decimalSeparator.md @@ -9,4 +9,4 @@ deprecated: A decimal separator. No longer applies. --- -Since v19.2, the separator is selected based on the specified locale. See [Localize Dates, Numbers, and Currencies](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies') for more information. \ No newline at end of file +Beginning with v19.2, the separator is selected based on the specified locale. See [Localize Dates, Numbers, and Currencies](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) for more information. diff --git a/api-reference/50 Common/Object Structures/GlobalConfig/defaultCurrency.md b/api-reference/50 Common/Object Structures/GlobalConfig/defaultCurrency.md index 11604ee558..cb8f9fa2c7 100644 --- a/api-reference/50 Common/Object Structures/GlobalConfig/defaultCurrency.md +++ b/api-reference/50 Common/Object Structures/GlobalConfig/defaultCurrency.md @@ -50,4 +50,4 @@ The default currency. Accepts a 3-letter NumberFormat's and DateTimeFormat's `options` parameter fields: + You can specify Intl NumberFormat's and DateTimeFormat's `options` parameter fields: format: { year: "2-digit", month: "narrow", day: "2-digit" } === or === format: { style: "currency", currency: "EUR", useGrouping: true } - If you [use Globalize](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/10%20Using%20Globalize.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Globalize'), you can use the fields that the numberFormatter, currencyFormatter, and dateFormatter accept instead of the fields described in this section. For example, you can use skeletons to format dates. Note that this approach can require additional CLDR modules not shipped with the DevExtreme package. + If you [use Globalize](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md), you can use the fields that the numberFormatter, currencyFormatter, and dateFormatter accept instead of the fields described in this section. For example, you can use skeletons to format dates. Note that this approach can require additional CLDR modules not shipped with the DevExtreme package. format: { skeleton: 'GyMMMd' } - [note] Depending on the object structure, the **format** utility chooses the mechanism to use: DevExtreme internal, Intl, or Globalize. If you mix properties from different zones (DevExtreme, Intl, or Globalize) in an object, the result can be unpredictable. + [note] Depending on object structure, the **format** utility chooses the mechanism to use: DevExtreme internal, Intl, or Globalize. If you mix properties from different zones (DevExtreme, Intl, or Globalize) in an object, the result can be unpredictable. #include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/" -} \ No newline at end of file +} diff --git a/api-reference/50 Common/Object Structures/format/type.md b/api-reference/50 Common/Object Structures/format/type.md index 76aabea1c0..3dd8944fd6 100644 --- a/api-reference/50 Common/Object Structures/format/type.md +++ b/api-reference/50 Common/Object Structures/format/type.md @@ -39,7 +39,7 @@ Depending on the values you need to format, you can choose one of the following - The *"fixedPoint"*, *"decimal"*, and *"currency"* format types can be paired with *"largeNumber", "thousands", "millions", "billions"*, and *"trillions"*, for example: *"fixedPoint thousands"*. -- Editor components, such as [NumberBox](https://js.devexpress.com/Demos/WidgetsGallery/Demo/NumberBox/Overview/), do not support large number formats. If you want to apply these formats, you can implement the [formatter](/api-reference/50%20Common/Object%20Structures/format/formatter.md '/Documentation/ApiReference/Common/Object_Structures/format/#formatter') and [parser](/api-reference/50%20Common/Object%20Structures/format/parser.md '/Documentation/ApiReference/Common/Object_Structures/format/#parser') functions or specify a [custom format string](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String'). +- Editor components, such as [NumberBox](https://js.devexpress.com/Demos/WidgetsGallery/Demo/NumberBox/Overview/), do not support large number formats. If you want to apply these formats, you can implement the [formatter](/api-reference/50%20Common/Object%20Structures/format/formatter.md '/Documentation/ApiReference/Common/Object_Structures/format/#formatter') and [parser](/api-reference/50%20Common/Object%20Structures/format/parser.md '/Documentation/ApiReference/Common/Object_Structures/format/#parser') functions or specify a [custom format string](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md). [/note] @@ -76,4 +76,5 @@ If the **type** is the only field you need to specify in the **format** object, } #####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) + diff --git a/api-reference/50 Common/utils/localization/formatDate(value_format).md b/api-reference/50 Common/utils/localization/formatDate(value_format).md index a3697cf692..6a0f11840c 100644 --- a/api-reference/50 Common/utils/localization/formatDate(value_format).md +++ b/api-reference/50 Common/utils/localization/formatDate(value_format).md @@ -11,7 +11,7 @@ Converts a Date object to a string using the specified format. The formatted string. ##### param(value): Date -A Date object to be converted. +The Date object to be converted. ##### param(format): Format The [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') to be used for conversion. @@ -57,4 +57,4 @@ The [format](/api-reference/50%20Common/Object%20Structures/format '/Documentati --- #####See Also##### -- [Format Custom Values](/concepts/Common/Value%20Formatting/40%20Format%20Custom%20Values.md '/Documentation/Guide/Common/Value_Formatting/#Format_Custom_Values') \ No newline at end of file +- [Format Custom Values](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md) diff --git a/api-reference/50 Common/utils/localization/formatMessage(key_value).md b/api-reference/50 Common/utils/localization/formatMessage(key_value).md index 67fe5c0a47..df95b48c51 100644 --- a/api-reference/50 Common/utils/localization/formatMessage(key_value).md +++ b/api-reference/50 Common/utils/localization/formatMessage(key_value).md @@ -17,4 +17,4 @@ The key that identifies the message in a dictionary. One or several values used to fill placeholders in the message. This parameter is optional. --- -Refer to the following help topic for a code example: [Add Strings to a Dictionary](/concepts/Common/Localization/01%20Dictionaries/05%20Add%20Strings%20to%20a%20Dictionary.md '/Documentation/Guide/Common/Localization/#Dictionaries/Add_Strings_to_a_Dictionary'). \ No newline at end of file +Refer to the following help topic for a code example: [Add Strings to a Dictionary](/concepts/Common/Localization%20and%20Globalization/05%20UI%20Text%20Localization/15%20Add%20Strings%20to%20a%20Dictionary.md '/concepts/Common/Localization%20and%20Globalization/05%20UI%20Text%20Localization/15%20Add%20Strings%20to%20a%20Dictionary.md'). diff --git a/api-reference/50 Common/utils/localization/formatNumber(value_format).md b/api-reference/50 Common/utils/localization/formatNumber(value_format).md index 776934b5a6..00e658c6c3 100644 --- a/api-reference/50 Common/utils/localization/formatNumber(value_format).md +++ b/api-reference/50 Common/utils/localization/formatNumber(value_format).md @@ -11,7 +11,7 @@ Converts a numeric value to a string using the specified format. The formatted string. ##### param(value): Number -A numeric value to be converted. +The numeric value to be converted. ##### param(format): Format The [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') to be used for conversion. @@ -57,4 +57,4 @@ The [format](/api-reference/50%20Common/Object%20Structures/format '/Documentati --- #####See Also##### -- [Format Custom Values](/concepts/Common/Value%20Formatting/40%20Format%20Custom%20Values.md '/Documentation/Guide/Common/Value_Formatting/#Format_Custom_Values') \ No newline at end of file +- [Format Custom Values](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md) diff --git a/api-reference/50 Common/utils/localization/loadMessages(messages).md b/api-reference/50 Common/utils/localization/loadMessages(messages).md index 927f33b29d..311cbd9915 100644 --- a/api-reference/50 Common/utils/localization/loadMessages(messages).md +++ b/api-reference/50 Common/utils/localization/loadMessages(messages).md @@ -11,6 +11,6 @@ Loads localized messages. The messages to be loaded. --- -Refer to the following help topic for a code example: [Add Strings to a Dictionary](/concepts/Common/Localization/01%20Dictionaries/05%20Add%20Strings%20to%20a%20Dictionary.md '/Documentation/Guide/Common/Localization/#Dictionaries/Add_Strings_to_a_Dictionary'). +Refer to the following help topic for a code example: [Add Strings to a Dictionary](/concepts/Common/Localization%20and%20Globalization/05%20UI%20Text%20Localization/15%20Add%20Strings%20to%20a%20Dictionary.md). -[note]It is necessary to reload the page each time you load new messages. \ No newline at end of file +[note]It is necessary to reload the page each time you load new messages. diff --git a/api-reference/50 Common/utils/localization/locale().md b/api-reference/50 Common/utils/localization/locale().md index 0a3fd4c501..935932fd5e 100644 --- a/api-reference/50 Common/utils/localization/locale().md +++ b/api-reference/50 Common/utils/localization/locale().md @@ -12,4 +12,4 @@ The identifier. --- #####See Also##### -- [Localization](/concepts/Common/Localization '/Documentation/Guide/Common/Localization/') \ No newline at end of file +- [Localization and Globalization](/concepts/Common/Localization%20and%20Globalization/00%20Overview.md) diff --git a/api-reference/50 Common/utils/localization/locale(locale).md b/api-reference/50 Common/utils/localization/locale(locale).md index f6178c3d72..09afa64750 100644 --- a/api-reference/50 Common/utils/localization/locale(locale).md +++ b/api-reference/50 Common/utils/localization/locale(locale).md @@ -14,4 +14,4 @@ The required locale identifier. [note] This method should be called only once - at the application's launch. It is necessary to reload the page each time you need to set new locale. #####See Also##### -- [Localization](/concepts/Common/Localization '/Documentation/Guide/Common/Localization/') \ No newline at end of file +- [Localization](/concepts/Common/Localization%20and%20Globalization/00%20Overview.md) diff --git a/api-reference/50 Common/utils/localization/localization.md b/api-reference/50 Common/utils/localization/localization.md index 7366ea3bd9..39d8f02286 100644 --- a/api-reference/50 Common/utils/localization/localization.md +++ b/api-reference/50 Common/utils/localization/localization.md @@ -3,9 +3,9 @@ id: localization --- --- ##### shortDescription -An object that serves as a namespace for the methods that are used to localize an application. +An object that serves as a namespace for methods used to localize an application. --- #####See Also##### -- [Localization](/concepts/Common/Localization '/Documentation/Guide/Common/Localization/') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') \ No newline at end of file +- [Localization](/concepts/Common/Localization%20and%20Globalization/00%20Overview.md) +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) diff --git a/api-reference/50 Common/utils/localization/parseDate(text_format).md b/api-reference/50 Common/utils/localization/parseDate(text_format).md index 8b54887716..3762efb51f 100644 --- a/api-reference/50 Common/utils/localization/parseDate(text_format).md +++ b/api-reference/50 Common/utils/localization/parseDate(text_format).md @@ -8,13 +8,13 @@ export: parseDate Parses a string into a Date object. ##### return: Date -A Date object equivalent to the specified string. +The Date object equivalent to the specified string. ##### param(text): String -A string value to be parsed. +The string value to be parsed. ##### param(format): Format The [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/Format/') of the string to be parsed. --- -Refer to the following help topic for a code example: [Format Custom Values](/concepts/Common/Value%20Formatting/40%20Format%20Custom%20Values.md '/Documentation/Guide/Common/Value_Formatting/#Format_Custom_Values'). \ No newline at end of file +Refer to the following help topic for a code example: [Format Custom Values](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md). diff --git a/api-reference/_hidden/dxDataGridColumn/format.md b/api-reference/_hidden/dxDataGridColumn/format.md index ffc365fcb1..05ed8b9a29 100644 --- a/api-reference/_hidden/dxDataGridColumn/format.md +++ b/api-reference/_hidden/dxDataGridColumn/format.md @@ -1,22 +1,22 @@ -When being [exported to Excel](/api-reference/10%20UI%20Widgets/dxDataGrid/1%20Configuration/export '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/'), the specified format is converted to an Excel format as follows: +When [exported to Excel](/api-reference/10%20UI%20Widgets/dxDataGrid/1%20Configuration/export '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/'), the current format is converted to an Excel format as follows: - **Numeric** -Converted to the Number format, except for *"largeNumber"*, which is exported without formatting. +Converted to the Number format, except for the *"largeNumber"* since it is exported without formatting. - **Currency** Converted to the Currency format. - **Date-Time** -Converted to the Date or Time format, depending on the cell value. +Converted to the Date or Time format, depending on cell value. Exceptions: *"quarter"* and *"quarterAndYear"* are exported as Short Date; *"minute"* and *"millisecond"* are exported as Long Time. - **Function** Cannot be converted automatically. Assign this function to the [customizeText](/api-reference/_hidden/GridBaseColumn/customizeText.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#customizeText') property instead of the **format** property. -- [Custom format string](/concepts/Common/Value%20Formatting/10%20Format%20Widget%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String') -Cannot be converted, the cell value is exported without formatting. To export this format, return the formatted string from the [customizeText](/api-reference/_hidden/GridBaseColumn/customizeText.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#customizeText') callback as follows: +- [Custom format string](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20Widget%20Values/20%20Custom%20Format%20String.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md') +Cannot be converted: the cell value is exported without formatting. To export this format, return the formatted string from the [customizeText](/api-reference/_hidden/GridBaseColumn/customizeText.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#customizeText') callback as follows: --- ##### jQuery @@ -155,10 +155,10 @@ Cannot be converted, the cell value is exported without formatting. To export th --- -A column's default format depends on the data type, which is detected automatically. If you find that a format is exported incorrectly, you will need to explicitly set the column's [dataType](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataType). +A column's default format depends on the data type; this type is detected automatically. If you find that a format is exported incorrectly, you will need to explicitly set the column's [dataType](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataType). #####See Also##### - [customizeText](/api-reference/_hidden/GridBaseColumn/customizeText.md '{currentpath}/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') - \ No newline at end of file + diff --git a/api-reference/_hidden/dxFilterBuilderField/format.md b/api-reference/_hidden/dxFilterBuilderField/format.md index 365d8d5eaf..274d73cf24 100644 --- a/api-reference/_hidden/dxFilterBuilderField/format.md +++ b/api-reference/_hidden/dxFilterBuilderField/format.md @@ -10,7 +10,7 @@ Formats a value before it is displayed. --- See the [format](/api-reference/50%20Common/Object%20Structures/format '/Documentation/ApiReference/Common/Object_Structures/format/') section for information on accepted values. -This property also controls the user input in cells that use the [DateBox](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/') UI component for editing. For cells that use other UI components, you can specify the [editorOptions](/api-reference/_hidden/dxFilterBuilderField/editorOptions.md '/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/fields/#editorOptions').**format** property. +This property also controls user input in cells that use the [DateBox](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/') UI component for editing. For cells that use other UI components, you can specify the [editorOptions](/api-reference/_hidden/dxFilterBuilderField/editorOptions.md '/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/fields/#editorOptions') **format** property. --- #####jQuery @@ -121,4 +121,5 @@ This property also controls the user input in cells that use the [DateBox](/api- #####See Also##### - [customizeText](/api-reference/_hidden/dxFilterBuilderField/customizeText.md '{currentpath}/#customizeText') -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md) + diff --git a/concepts/05 UI Components/BarGauge/10 Visual Elements/40 Tooltips.md b/concepts/05 UI Components/BarGauge/10 Visual Elements/40 Tooltips.md index 83e3f3b896..fe17f026d5 100644 --- a/concepts/05 UI Components/BarGauge/10 Visual Elements/40 Tooltips.md +++ b/concepts/05 UI Components/BarGauge/10 Visual Elements/40 Tooltips.md @@ -1,4 +1,4 @@ -A tooltip is a small pop-up rectangle that displays information on a hovered bar in BarGauge. By default, the tooltip shows the value indicated by the hovered element. However, it is possible to display other information in the tooltip. You can customize the text of the tooltip and its appearance in the way you require. +A tooltip is a small pop-up rectangle that displays information on a hovered bar in BarGauge. By default, the tooltip shows the value indicated by the hovered element. However, it is possible to display other information in the tooltip. You can customize the text of the tooltip and its appearance to suit your requirements. DevExtreme HTML5 JavaScript Gauges dxBarGauge BarGauge Tooltip @@ -13,7 +13,7 @@ Tooltips are not enabled by default. To enable them, set the **enabled** propert You can change default tooltip settings by defining the properties within the **tooltip** configuration object. Some of these properties are categorized and listed below. * **Text Customization and Formatting** -By default, a tooltip displays the value of a hovered UI component element without formatting. Set the [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxBarGauge/Configuration/tooltip/#format') property to format this value. When text customization is required, assign a function specifying the text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/dxBarGauge/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxBarGauge/Configuration/tooltip/#customizeTooltip') property. Learn more in the [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') topic. +By default, a tooltip displays the value of a hovered UI component element without formatting. Set the [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxBarGauge/Configuration/tooltip/#format') property to format this value. When text customization is required, assign a function that specifies the text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/dxBarGauge/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxBarGauge/Configuration/tooltip/#customizeTooltip') property. Learn more in the [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') topic. * **Font Settings** -To customize the appearance of the tooltip text, define the font properties within the [font](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/font '/Documentation/ApiReference/UI_Components/dxBarGauge/Configuration/tooltip/font/') configuration object. \ No newline at end of file +To customize tooltip text appearance, define font properties within the [font](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/font '/Documentation/ApiReference/UI_Components/dxBarGauge/Configuration/tooltip/font/') configuration object. diff --git a/concepts/05 UI Components/Chat/40 Customize the Empty View.md b/concepts/05 UI Components/Chat/40 Customize the Empty View.md index a76b4232d8..e8018927d3 100644 --- a/concepts/05 UI Components/Chat/40 Customize the Empty View.md +++ b/concepts/05 UI Components/Chat/40 Customize the Empty View.md @@ -127,9 +127,9 @@ This tutorial also implements the **texts**.**message** variable defined in the
-Chat localizes these texts following your application locale. For more information about DevExtreme localization, refer to the following topic: [Localization](/concepts/Common/Localization '/Documentation/Guide/Common/Localization/'). +Chat localizes these texts following your application locale. For more information about DevExtreme localization, refer to the following topic: [Localization](/concepts/Common/Localization '/concepts/Common/Localization%20and%20Globalization/00%20Overview.md'). -### Customize Chat when Empty View is Displayed +### Customize the Chat when the Empty View is displayed You can implement customizations outside of the empty view container and display them only when the empty view is active. For instance, to implement a custom Chat background color when the empty view is active, implement the [:has()](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) CSS pseudo-class: @@ -137,3 +137,4 @@ You can implement customizations outside of the empty view container and display #chat:has(.dx-chat-messagelist-empty-view) { background-color: #D8E9FF; } + diff --git a/concepts/05 UI Components/CircularGauge/10 Visual Elements/70 Tooltips.md b/concepts/05 UI Components/CircularGauge/10 Visual Elements/70 Tooltips.md index 48522fa1bd..8d14087b18 100644 --- a/concepts/05 UI Components/CircularGauge/10 Visual Elements/70 Tooltips.md +++ b/concepts/05 UI Components/CircularGauge/10 Visual Elements/70 Tooltips.md @@ -13,7 +13,7 @@ Tooltips are not enabled by default. To enable them, set the **enabled** propert You can change default tooltip settings by defining the properties within the **tooltip** configuration object. Some of these properties are categorized and listed below. * **Text Customization and Formatting** -By default, a tooltip displays the value of a hovered UI component element without formatting. Set the [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/tooltip/#format') property to format this value. When text customization is required, assign a function specifying the text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/BaseGauge/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/tooltip/#customizeTooltip') property. Learn more in the [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') topic. +By default, a tooltip displays the value of a hovered UI component element without formatting. Set the [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/tooltip/#format') property to format this value. When text customization is required, assign a function specifying the text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/BaseGauge/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/tooltip/#customizeTooltip') property. Learn more in the [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') topic. * **Font Settings** To customize the appearance of the tooltip text, define the font properties within the [font](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/font '/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/tooltip/font/') configuration object. @@ -21,3 +21,4 @@ To customize the appearance of the tooltip text, define the font properties with #include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/GaugeTooltip/" } + diff --git a/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md b/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md index 04ccee873f..518b06c555 100644 --- a/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md +++ b/concepts/05 UI Components/DateBox/01 Overview/10 Key Features.md @@ -2,13 +2,13 @@ You can configure the DateBox [type](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/type.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#type') to integrate the component as a date, time, or date and time picker. - **Picker Configuration** -DateBox supports multiple [picker types](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/pickerType.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#pickerType'), including calendar, list, and roller pickers. You can also implement native pickers that vary depending on the user's device and platforms. +The DateBox supports multiple [picker types](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/pickerType.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#pickerType'), including calendar, list, and roller pickers. You can also implement native pickers that vary depending on the user's device and platforms. - **Formatting** -The DateBox component automatically formats values based on your application locale. You can also [specify display formats](/concepts/05%20UI%20Components/DateBox/04%20Value%20Formatting%20and%20Masked%20Input.md '/Documentation/Guide/UI_Components/DateBox/Value_Formatting_and_Masked_Input/'), including [predefined, Intl, and custom formats](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values'). +The DateBox component automatically formats values based on your application locale. You can also [specify display formats](/concepts/05%20UI%20Components/DateBox/04%20Value%20Formatting%20and%20Masked%20Input.md '/Documentation/Guide/UI_Components/DateBox/Value_Formatting_and_Masked_Input/'), including [predefined, Intl, and custom formats](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/00%20Format%20UI%20Component%20Values.md'). - **Masked Input** -DateBox supports [masked input](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/useMaskBehavior.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#useMaskBehavior'). When enabled, the component allows users to input only characters supported by the DateBox [display format](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat'). +The DateBox supports [masked input](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/useMaskBehavior.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#useMaskBehavior'). When enabled, the component allows users to input only characters supported by the DateBox [display format](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat'). - **Configurable Date and Time Ranges** You can limit DateBox selection to a specific [date and time range](/concepts/05%20UI%20Components/DateBox/00%20Getting%20Started%20with%20DateBox/13%20Set%20the%20Accepted%20Date%20Range.md '/Documentation/Guide/UI_Components/DateBox/Getting_Started_with_DateBox/#Set_the_Accepted_Date_Range'). For instance, you can specify a new [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object as the [minimum](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/min.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#min') to disable date and time values in the past. @@ -30,3 +30,4 @@ DateBox [conforms](/concepts/05%20UI%20Components/DateBox/02%20Accessibility/00% - **Customization** You can customize DateBox elements such as the text field and [drop-down area](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/dropDownOptions.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#dropDownOptions'). The component supports [label](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/label.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#label') and [placeholder](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/placeholder.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#placeholder') configration, as well as custom text field [buttons](/api-reference/10%20UI%20Components/dxDropDownEditor/1%20Configuration/buttons '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/buttons/'). + diff --git a/concepts/05 UI Components/DateBox/04 Value Formatting and Masked Input.md b/concepts/05 UI Components/DateBox/04 Value Formatting and Masked Input.md index 7912436931..8ca24d0b02 100644 --- a/concepts/05 UI Components/DateBox/04 Value Formatting and Masked Input.md +++ b/concepts/05 UI Components/DateBox/04 Value Formatting and Masked Input.md @@ -1,4 +1,4 @@ -The DateBox's value is formatted according to the application's [locale](/api-reference/50%20Common/utils/localization/locale().md '/Documentation/ApiReference/Common/utils/localization/#locale'). You can use the [displayFormat](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat') property that accepts [predefined](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Predefined_Formats') and [custom formats](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String') to change the format. +The DateBox value is formatted according to the application's [locale](/api-reference/50%20Common/utils/localization/locale().md '/Documentation/ApiReference/Common/utils/localization/#locale'). You can use the [displayFormat](/api-reference/10%20UI%20Components/dxDateBox/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateBox/Configuration/#displayFormat') property that accepts [predefined](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md) and [custom formats](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md) to change the format. #include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Formatting/" @@ -87,4 +87,5 @@ The following changes apply when masked input is enabled: - The mouse wheel or Up/Down Arrow key increases/decreases the selected value portion by 1. - The caret is moved to the next date portion when the previous date portion is entered. - The year is entered right-to-left. For example, if `1` is entered, the year is `2001`; if `18` is entered, the year is `2018`. -- Numbers and first letters can be used to specify the month and day of week when they are displayed as text. For example, enter `A` or `4` to specify "April". +- Numbers and first letters can be used to specify the month and day of the week when they are displayed as text. For example, enter `A` or `4` to specify "April". + diff --git a/concepts/05 UI Components/DateRangeBox/10 Value Formatting and Masked Input.md b/concepts/05 UI Components/DateRangeBox/10 Value Formatting and Masked Input.md index 636f4e4650..60d07f01f8 100644 --- a/concepts/05 UI Components/DateRangeBox/10 Value Formatting and Masked Input.md +++ b/concepts/05 UI Components/DateRangeBox/10 Value Formatting and Masked Input.md @@ -1,4 +1,4 @@ -DateRangeBox displays values according to the application's [locale](/api-reference/50%20Common/utils/localization/locale().md '/Documentation/ApiReference/Common/utils/localization/#locale'). You can specify a custom date format. Use the [displayFormat](/api-reference/10%20UI%20Components/DateBoxBase/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateRangeBox/Configuration/#displayFormat') property that accepts [predefined](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Predefined_Formats') and [custom formats](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String'). +The DateRangeBox displays values according to the application's [locale](/api-reference/50%20Common/utils/localization/locale().md '/Documentation/ApiReference/Common/utils/localization/#locale'). You can specify a custom date format. Use the [displayFormat](/api-reference/10%20UI%20Components/DateBoxBase/1%20Configuration/displayFormat.md '/Documentation/ApiReference/UI_Components/dxDateRangeBox/Configuration/#displayFormat') property that accepts [predefined](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md') and [custom formats](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md'). If [useMaskBehavior](/api-reference/10%20UI%20Components/DateBoxBase/1%20Configuration/useMaskBehavior.md '/Documentation/ApiReference/UI_Components/dxDateRangeBox/Configuration/#useMaskBehavior'') is **true**, the **displayFormat** property also specifies a mask that restricts user input: @@ -103,3 +103,4 @@ The following changes apply when masked input is enabled: - The caret moves to the next date section when the previous date section is entered. - The year is entered right-to-left. For example, enter `2` to specify the year `2002`; enter `19` for `2019`. - The corresponding month/day number or initial letters can be used to specify the month and day of the week when they are displayed as text. For example, in the month section, enter `M` or `3` to specify "March". + diff --git a/concepts/05 UI Components/LinearGauge/10 Visual Elements/70 Tooltips.md b/concepts/05 UI Components/LinearGauge/10 Visual Elements/70 Tooltips.md index f937151301..432528e9c2 100644 --- a/concepts/05 UI Components/LinearGauge/10 Visual Elements/70 Tooltips.md +++ b/concepts/05 UI Components/LinearGauge/10 Visual Elements/70 Tooltips.md @@ -1,4 +1,4 @@ -A tooltip is a small pop-up rectangle that displays information on a hovered value or subvalue indicator. By default, the tooltip shows the value indicated by the hovered element. However, it is possible to display other information in the tooltip. You can customize the text of the tooltip and its appearance in the way you require. +A tooltip is a small pop-up rectangle that displays information on a hovered value or subvalue indicator. By default, the tooltip shows the value indicated by the hovered element. However, it is possible to display other information in the tooltip. You can customize tooltip text and its appearance to suit your requirements. DevExtreme HTML5 JavaScript Gauges LinearGaugeTooltip @@ -10,14 +10,15 @@ Tooltips are not enabled by default. To enable them, set the **enabled** propert } }; -You can change default tooltip settings by defining the properties within the **tooltip** configuration object. Some of these properties are categorized and listed below. +You can change default tooltip settings by defining properties within the **tooltip** configuration object. Several of these properties are categorized and listed below. * **Text Customization and Formatting** -By default, a tooltip displays the value of a hovered UI component element without formatting. Set the [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxLinearGauge/Configuration/tooltip/#format') property to format this value. When text customization is required, assign a function specifying the text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/BaseGauge/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxLinearGauge/Configuration/tooltip/#customizeTooltip') property. Learn more in the [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') topic. +By default, a tooltip displays the value of a hovered UI component element without formatting. Set the [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxLinearGauge/Configuration/tooltip/#format') property to format this value. When text customization is required, assign a function that specifies the text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/BaseGauge/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxLinearGauge/Configuration/tooltip/#customizeTooltip') property. Learn more in the [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') topic. * **Font Settings** -To customize the appearance of the tooltip text, define the font properties within the [font](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/font '/Documentation/ApiReference/UI_Components/dxLinearGauge/Configuration/tooltip/font/') configuration object. +To customize tooltip text appearance, define font properties within the [font](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/font '/Documentation/ApiReference/UI_Components/dxLinearGauge/Configuration/tooltip/font/') configuration object. #include btn-open-demo with { href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/Tooltip/" } + diff --git a/concepts/05 UI Components/List/08 Paging.md b/concepts/05 UI Components/List/08 Paging.md index ede40edc7b..9ef492296b 100644 --- a/concepts/05 UI Components/List/08 Paging.md +++ b/concepts/05 UI Components/List/08 Paging.md @@ -112,7 +112,7 @@ Paging properties are set in the [DataSource](/api-reference/30%20Data%20Layer/D --- -The next page can be rendered when a user scrolls the List down to the bottom, or after a user clicks the **More** button. Set the [pageLoadMode](/api-reference/10%20UI%20Components/dxList/1%20Configuration/pageLoadMode.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#pageLoadMode') property to specify the mode: +The next page can be rendered when a user scrolls the List down to the bottom, or after a user clicks the **More** button. Set the [pageLoadMode](/api-reference/10%20UI%20Components/dxList/1%20Configuration/pageLoadMode.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#pageLoadMode') property to specify your chosen mode: --- ##### jQuery @@ -176,6 +176,7 @@ The next page can be rendered when a user scrolls the List down to the bottom, o #####See Also##### - **Data Binding**: [Web API and MongoDB](/concepts/70%20Data%20Binding/00%20Specify%20a%20Data%20Source/30%20Web%20API%20and%20MongoDB.md '/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Web_API_and_MongoDB/') | [OData Service](/concepts/70%20Data%20Binding/00%20Specify%20a%20Data%20Source/40%20OData.md '/Documentation/Guide/Data_Binding/Specify_a_Data_Source/OData/') | [Custom Sources](/concepts/70%20Data%20Binding/00%20Specify%20a%20Data%20Source/60%20Custom%20Data%20Sources '/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Custom_Data_Sources/') | [JavaScript Array](/concepts/70%20Data%20Binding/00%20Specify%20a%20Data%20Source/10%20Local%20Array.md '/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Local_Array/') -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/concepts/05%20UI%20Components/List/50%20Localization.md') [tags]list, paging, paginate, pageSize, pageLoadMode + diff --git a/concepts/05 UI Components/List/25 Selection/01 User Interaction.md b/concepts/05 UI Components/List/25 Selection/01 User Interaction.md index 86a3aa508f..6d4984e9c9 100644 --- a/concepts/05 UI Components/List/25 Selection/01 User Interaction.md +++ b/concepts/05 UI Components/List/25 Selection/01 User Interaction.md @@ -218,4 +218,4 @@ When data in the List is [paginated](/concepts/05%20UI%20Components/List/08%20Pa #####See Also##### #include common-link-configurewidget -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') \ No newline at end of file +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/concepts/05%20UI%20Components/List/50%20Localization.md') diff --git a/concepts/05 UI Components/List/35 Item Deletion/01 User Interaction.md b/concepts/05 UI Components/List/35 Item Deletion/01 User Interaction.md index 7b77057f9d..d205f80b79 100644 --- a/concepts/05 UI Components/List/35 Item Deletion/01 User Interaction.md +++ b/concepts/05 UI Components/List/35 Item Deletion/01 User Interaction.md @@ -1,4 +1,4 @@ -To allow the user to delete items from the List, set the [allowItemDeleting](/api-reference/10%20UI%20Components/dxList/1%20Configuration/allowItemDeleting.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#allowItemDeleting') property to **true**. The mode in which the user deletes items depends on the value of the **itemDeleteMode** property. There are several modes that are enumerated in the code below. To spot the difference between them and choose the most suitable one, refer to the example that completes the [property's description](/api-reference/10%20UI%20Components/dxList/1%20Configuration/itemDeleteMode.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemDeleteMode') in the API reference. +To allow a user to delete items from the List, set the [allowItemDeleting](/api-reference/10%20UI%20Components/dxList/1%20Configuration/allowItemDeleting.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#allowItemDeleting') property to **true**. The mode in which the user deletes items depends on the value of the **itemDeleteMode** property. There are several modes that are enumerated in the code below. To spot the difference between them and choose the most suitable one, refer to the example that completes the [property's description](/api-reference/10%20UI%20Components/dxList/1%20Configuration/itemDeleteMode.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemDeleteMode') in the API reference. --- ##### jQuery @@ -78,11 +78,12 @@ To allow the user to delete items from the List, set the [allowItemDeleting](/ap href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ListEditingAndAPI/" } -[note]If List items are [supplied with the context menu](/concepts/05%20UI%20Components/List/40%20Item%20Context%20Menu.md '/Documentation/Guide/UI_Components/List/Item_Context_Menu/'), the **itemDeleteMode** property is ignored in favor of the [menuMode](/api-reference/10%20UI%20Components/dxList/1%20Configuration/menuMode.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#menuMode') property. +[note]If List items are [supplied with a context menu](/concepts/05%20UI%20Components/List/40%20Item%20Context%20Menu.md '/Documentation/Guide/UI_Components/List/Item_Context_Menu/'), the **itemDeleteMode** property is ignored in favor of the [menuMode](/api-reference/10%20UI%20Components/dxList/1%20Configuration/menuMode.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#menuMode') property. -[note]If you use a remote data source, the List itself does not delete items from it; it only makes a query to it. It is the data source that is responsible for this query to be correctly processed and for the item to be actually deleted. +[note]If you use a remote data source, the List itself does not delete items from it; it only makes a query to it. It is the data source that is responsible for this query to be correctly processed and for the item to be deleted. #####See Also##### - [List - Data Binding | Deletion in Custom Sources](/concepts/70%20Data%20Binding/00%20Specify%20a%20Data%20Source/60%20Custom%20Data%20Sources '/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Custom_Data_Sources/') -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/concepts/05%20UI%20Components/List/50%20Localization.md') + diff --git a/concepts/05 UI Components/List/45 End-User Interaction/01 Touch-Screen Gestures.md b/concepts/05 UI Components/List/45 End-User Interaction/01 Touch-Screen Gestures.md index 4b1abbdc99..91fcbf2296 100644 --- a/concepts/05 UI Components/List/45 End-User Interaction/01 Touch-Screen Gestures.md +++ b/concepts/05 UI Components/List/45 End-User Interaction/01 Touch-Screen Gestures.md @@ -251,8 +251,8 @@ This gesture refreshes data in the List. To enable it, assign **true** to the [p #####See Also##### - [List - End-User Interaction | Universal Actions](/concepts/05%20UI%20Components/List/45%20End-User%20Interaction/05%20Universal%20Actions.md '/Documentation/Guide/UI_Components/List/End-User_Interaction/Universal_Actions/') -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') +- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/concepts/05%20UI%20Components/List/50%20Localization.md') - [List Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ListEditingAndAPI/) - [List API Reference](/api-reference/10%20UI%20Components/dxList '/Documentation/ApiReference/UI_Components/dxList/') -[tags]list, touch-screen gestures, swipe, slide, onItemSwipe, long tap, long press, tap hold, onItemHold, itemHoldTimeout, pull down to refresh, pull to refresh, pullRefreshEnabled, onPullRefresh \ No newline at end of file +[tags]list, touch-screen gestures, swipe, slide, onItemSwipe, long tap, long press, tap hold, onItemHold, itemHoldTimeout, pull down to refresh, pull to refresh, pullRefreshEnabled, onPullRefresh diff --git a/concepts/05 UI Components/List/50 Localization.md b/concepts/05 UI Components/List/50 Localization.md deleted file mode 100644 index 3073b1fab7..0000000000 --- a/concepts/05 UI Components/List/50 Localization.md +++ /dev/null @@ -1,183 +0,0 @@ -Static messages for any DevExtreme UI component are defined in a locale-specific dictionary as key-value pairs. To localize the List UI component, you need to redefine the following keys' values. To load the dictionaries, use the [loadMessages(messages)](/api-reference/50%20Common/utils/localization/loadMessages(messages).md '/Documentation/ApiReference/Common/utils/localization/#loadMessagesmessages') method defined in the `DevExpress.localization` namespace. - ---- -##### jQuery - - - DevExpress.localization.loadMessages({ - // Replace "en" with the target locale of the dictionary - "en": { - "dxCollectionWidget-noDataText": "No data to display", - "dxList-pullingDownText": "Pull down to refresh...", - "dxList-pulledDownText": "Release to refresh...", - "dxList-refreshingText": "Refreshing...", - "dxList-pageLoadingText": "Loading...", - "dxList-nextButtonText": "More", - "dxList-selectAll": "Select All", - "dxListEditDecorator-delete": "Delete", - "dxListEditDecorator-more": "More" - }, - "de": { - "dxCollectionWidget-noDataText": "Keine Daten verfügbar", - // ... - } - }); - - // Set the locale - DevExpress.localization.locale(navigator.language); - - // ===== or when using modules ===== - import { locale, loadMessages } from "devextreme/localization"; - - loadMessages({ - // Replace "en" with the target locale of the dictionary - "en": { - "dxCollectionWidget-noDataText": "No data to display", - "dxList-pullingDownText": "Pull down to refresh...", - "dxList-pulledDownText": "Release to refresh...", - "dxList-refreshingText": "Refreshing...", - "dxList-pageLoadingText": "Loading...", - "dxList-nextButtonText": "More", - "dxList-selectAll": "Select All", - "dxListEditDecorator-delete": "Delete", - "dxListEditDecorator-more": "More" - }, - "de": { - "dxCollectionWidget-noDataText": "Keine Daten verfügbar", - // ... - } - }); - - // Set the locale - locale(navigator.language); - -##### Angular - - - import { locale, loadMessages } from "devextreme/localization"; - - loadMessages({ - // Replace "en" with the target locale of the dictionary - "en": { - "dxCollectionWidget-noDataText": "No data to display", - "dxList-pullingDownText": "Pull down to refresh...", - "dxList-pulledDownText": "Release to refresh...", - "dxList-refreshingText": "Refreshing...", - "dxList-pageLoadingText": "Loading...", - "dxList-nextButtonText": "More", - "dxList-selectAll": "Select All", - "dxListEditDecorator-delete": "Delete", - "dxListEditDecorator-more": "More" - }, - "de": { - "dxCollectionWidget-noDataText": "Keine Daten verfügbar", - // ... - } - }); - - // Set the locale - locale(navigator.language); - -##### Vue - - - import { locale, loadMessages } from "devextreme/localization"; - - loadMessages({ - // Replace "en" with the target locale of the dictionary - "en": { - "dxCollectionWidget-noDataText": "No data to display", - "dxList-pullingDownText": "Pull down to refresh...", - "dxList-pulledDownText": "Release to refresh...", - "dxList-refreshingText": "Refreshing...", - "dxList-pageLoadingText": "Loading...", - "dxList-nextButtonText": "More", - "dxList-selectAll": "Select All", - "dxListEditDecorator-delete": "Delete", - "dxListEditDecorator-more": "More" - }, - "de": { - "dxCollectionWidget-noDataText": "Keine Daten verfügbar", - // ... - } - }); - - // Set the locale - locale(navigator.language); - -##### React - - - import { locale, loadMessages } from "devextreme/localization"; - - loadMessages({ - // Replace "en" with the target locale of the dictionary - "en": { - "dxCollectionWidget-noDataText": "No data to display", - "dxList-pullingDownText": "Pull down to refresh...", - "dxList-pulledDownText": "Release to refresh...", - "dxList-refreshingText": "Refreshing...", - "dxList-pageLoadingText": "Loading...", - "dxList-nextButtonText": "More", - "dxList-selectAll": "Select All", - "dxListEditDecorator-delete": "Delete", - "dxListEditDecorator-more": "More" - }, - "de": { - "dxCollectionWidget-noDataText": "Keine Daten verfügbar", - // ... - } - }); - - // Set the locale - locale(navigator.language); - ---- - -[note] DevExtreme ships several predefined dictionaries for most locales. See the [Localization](/concepts/Common/Localization '/Documentation/Guide/Common/Localization/') topic for more information. - -Some messages can be defined by List properties as well as keys. The following table illustrates the properties and keys that define the same messages. Note that the properties always take precedence over keys. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyKeyDescription
noDataTextdxCollectionWidget-noDataTextDisplayed when the List is empty.
pullingDownTextdxList-pullingDownTextDisplayed when the user begins pulling the List down.
pulledDownTextdxList-pulledDownTextDisplayed when the user have pulled the List down.
refreshingTextdxList-refreshingTextDisplayed while data in the List is being refreshed.
pageLoadingTextdxList-pageLoadingTextDisplayed while another page is loading.
nextButtonTextdxList-nextButtonTextDisplayed on the button that loads the next page. Appears only if the pageLoadMode property is "nextButton".
- -#####See Also##### -- [List Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ListEditingAndAPI/) -- [List API Reference](/api-reference/10%20UI%20Components/dxList '/Documentation/ApiReference/UI_Components/dxList/') - -[tags]list, localization, translation, localization keys, localize messages, localize texts diff --git a/concepts/05 UI Components/PolarChart/10 Visual Elements/030 Series Point Labels.md b/concepts/05 UI Components/PolarChart/10 Visual Elements/030 Series Point Labels.md index a7286669c8..8a44d85746 100644 --- a/concepts/05 UI Components/PolarChart/10 Visual Elements/030 Series Point Labels.md +++ b/concepts/05 UI Components/PolarChart/10 Visual Elements/030 Series Point Labels.md @@ -2,7 +2,7 @@ Each [series point](/concepts/05%20UI%20Components/PolarChart/10%20Visual%20Elem ![Point Labels](/images/ChartJS/Polar_SeriesLabels.png) -To change the default label appearance, use properties of the [label](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/') object. This object should be defined within the [series](/concepts/05%20UI%20Components/PolarChart/10%20Visual%20Elements/010%20Series.md '/Documentation/Guide/UI_Components/PolarChart/Visual_Elements/#Series') whose labels must be customized. If you need to provide the same properties for point labels in all series in the chart, define the [label](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonSeriesSettings/label/') object within the **commonSeriesSettings** configuration object. +To change default label appearance, use properties of the [label](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/') object. This object should be defined within the [series](/concepts/05%20UI%20Components/PolarChart/10%20Visual%20Elements/010%20Series.md '/Documentation/Guide/UI_Components/PolarChart/Visual_Elements/#Series') whose labels must be customized. If you need to provide the same properties for point labels in all series in the chart, define the [label](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonSeriesSettings/label/') object within the **commonSeriesSettings** configuration object. var polarChartOptions = { // ... @@ -27,10 +27,10 @@ To make point labels visible, set the **label** object's [visible](/api-referenc If required, you can rotate labels using the [rotationAngle](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/rotationAngle.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#rotationAngle') property. For bar- and stacked bar series, place labels inside the bar. For this purpose, set the [position](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/position.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#position') property to the _inside_ value. * **Text Customization and Formatting** -Labels represent point values by default. You can change the way these values are shown. For this purpose, use the [format](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/format.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#format') label property. If required, you can set a custom text to be shown by labels. For this purpose, assign a function returning the text to the [customizeText](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/customizeText.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#customizeText') property of the **label** object. For details on label formatting, refer to the [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') section. +Labels represent point values by default. You can change the way these values are shown. For this purpose, use the [format](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/format.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#format') label property. If required, you can set a custom text to be shown by labels. For this purpose, assign a function returning the text to the [customizeText](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/customizeText.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#customizeText') property of the **label** object. For details on label formatting, refer to the [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') section. * **Font Settings** To specify the required font settings for a label text, use properties of the [font](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/font '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/font/') object, defining it within the **label** object. * **Appearance** -By default, labels are painted in the color of the series whose points they represent. You can set a custom background color for labels. For this purpose, use the [backgroundColor](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/backgroundColor.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#backgroundColor') property of the **label** object. In addition, you can make a label border visible and set up its properties, using the [border](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/border '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/border/') object. To show labels connected to their points, even when the points are not visible, use connectors. The connector joins a label with its point or a place where the point should be. To make connectors visible, define the [connector](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/connector '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/connector/') object within the **label** object and set its **visible** property to _true_. If required, you can change the connector's color and width using the corresponding properties of the **connector** object. \ No newline at end of file +By default, labels are painted in the color of the series whose points they represent. You can set a custom background color for labels. For this purpose, use the [backgroundColor](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/backgroundColor.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/#backgroundColor') property of the **label** object. In addition, you can make a label border visible and set up its properties using the [border](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/border '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/border/') object. To show labels connected to their points, even when the points are not visible, use connectors. The connector joins a label with its point or a place where the point should be. To make connectors visible, define the [connector](/api-reference/10%20UI%20Components/dxPolarChart/5%20Series%20Types/CommonPolarChartSeries/label/connector '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/series/label/connector/') object within the **label** object and set its **visible** property to _true_. If required, you can change the connector's color and width using the corresponding properties of the **connector** object. diff --git a/concepts/05 UI Components/PolarChart/10 Visual Elements/040 Tooltips.md b/concepts/05 UI Components/PolarChart/10 Visual Elements/040 Tooltips.md index d5cc21991e..9ae6269359 100644 --- a/concepts/05 UI Components/PolarChart/10 Visual Elements/040 Tooltips.md +++ b/concepts/05 UI Components/PolarChart/10 Visual Elements/040 Tooltips.md @@ -11,7 +11,7 @@ To set tooltip properties, use the [tooltip](/api-reference/10%20UI%20Components } }; -You can specify the tooltip appearance by changing properties listed below. +You can specify tooltip appearance by changing properties listed below. * **Color** By default, a tooltip has the color of the series that is currently hovered over. You can set a custom color for all tooltips in the chart. For this purpose, use the [color](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/color.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#color') property of the **tooltip** configuration object. @@ -23,7 +23,7 @@ The tooltip's size is determined based on the text size and text padding values Align text within tooltips as required using the [paddingLeftRight](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/paddingLeftRight.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#paddingLeftRight') and [paddingTopBottom](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/paddingTopBottom.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#paddingTopBottom') properties of the **tooltip** configuration object. * **Text Customization and Formatting** -By default, tooltips represent point values. You can change the way these values are shown. For this purpose, use [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#format') tooltip property. If required, you can set custom text to be displayed by tooltips. For this purpose, assign a function specifying the text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#customizeTooltip') property of the **tooltip** object. For details on formatting, refer to the [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') help section. +By default, tooltips represent point values. You can change the way these values are shown. To do so, use the [format](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/format.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#format') tooltip property. If required, you can set custom text to be displayed by tooltips. For this purpose, assign a function that specifies text to be shown to the [customizeTooltip](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/tooltip/customizeTooltip.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#customizeTooltip') property of the **tooltip** object. For details on formatting, refer to the [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') help section. * **Font Settings** Use the **tooltip** object's [font](/api-reference/10%20UI%20Components/BaseWidget/1%20Configuration/tooltip/font '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/font/') property to specify the required font for the tooltip text. @@ -31,4 +31,4 @@ Use the **tooltip** object's [font](/api-reference/10%20UI%20Components/BaseWidg * **Tooltip API** You can show and hide tooltips in code using [showTooltip()](/api-reference/10%20UI%20Components/BaseChart/7%20Chart%20Elements/Point/3%20Methods/showTooltip().md '/Documentation/ApiReference/UI_Components/dxPolarChart/Chart_Elements/Point/Methods/#showTooltip') and [hideTooltip()](/api-reference/10%20UI%20Components/BaseChart/3%20Methods/hideTooltip().md '/Documentation/ApiReference/UI_Components/dxPolarChart/Methods/#hideTooltip') methods. -In [multi-series charts](/concepts/05%20UI%20Components/PolarChart/10%20Visual%20Elements/010%20Series.md '/Documentation/Guide/UI_Components/PolarChart/Visual_Elements/#Series'), you can use a shared tooltip. See the [shared](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/tooltip/shared.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#shared') property description for more information. \ No newline at end of file +In [multi-series charts](/concepts/05%20UI%20Components/PolarChart/10%20Visual%20Elements/010%20Series.md '/Documentation/Guide/UI_Components/PolarChart/Visual_Elements/#Series'), you can use a shared tooltip. See the [shared](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/tooltip/shared.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/tooltip/#shared') property description for more information. diff --git a/concepts/05 UI Components/PolarChart/10 Visual Elements/070 Axis Labels.md b/concepts/05 UI Components/PolarChart/10 Visual Elements/070 Axis Labels.md index 917af71989..a32e3cc3ca 100644 --- a/concepts/05 UI Components/PolarChart/10 Visual Elements/070 Axis Labels.md +++ b/concepts/05 UI Components/PolarChart/10 Visual Elements/070 Axis Labels.md @@ -2,7 +2,7 @@ Axis labels represent textual values for [axis ticks](/concepts/05%20UI%20Compon ![Axis Labels](/images/ChartJS/Polar_AxisLabels.png) -Axis labels are generated automatically. However, you can change their settings if your task requires that. Label settings are set using the [label](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/commonAxisSettings/label '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonAxisSettings/label/') object of the **argumentAxis**, **valueAxis** or **commonAxisSettings** configuration object. +Axis labels are generated automatically. However, if needed, you can change their settings. Label settings are set using the [label](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/commonAxisSettings/label '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonAxisSettings/label/') object of the **argumentAxis**, **valueAxis**, or **commonAxisSettings** configuration object. var polarChartOptions = { commonAxisSettings: { @@ -25,7 +25,7 @@ If labels overlap each other in certain scenarios, specify how to resolve this i To specify the required font settings for label text, specify properties of the **label**.[font](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/commonAxisSettings/label/font '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonAxisSettings/label/font/') object. * **Text Customization and Formatting** -You can change the way the default text is displayed by labels. For this purpose, use the [format](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/argumentAxis/label/format.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/argumentAxis/label/#format') label property. If it is required, you can set a custom text to be shown by labels. For this purpose, implement a function that returns the required text and assign it to the [customizeText](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/argumentAxis/label/customizeText.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/argumentAxis/label/#customizeText') property of the **label** object. For details on data formatting, refer to the [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') topic. +You can change the way default text is displayed by labels. To do so, use the [format](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/argumentAxis/label/format.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/argumentAxis/label/#format') label property. If required, you can set a custom text to be shown by labels: implement a function that returns the required text and assign it to the [customizeText](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/argumentAxis/label/customizeText.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/argumentAxis/label/#customizeText') property of the **label** object. For details on data formatting, refer to the [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') topic. * **Label Position** -You can shift labels closer to or farther from the axis. For this purpose, use the **label** object's [indentFromAxis](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/commonAxisSettings/label/indentFromAxis.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonAxisSettings/label/#indentFromAxis') property. \ No newline at end of file +You can shift labels closer to or farther from the axis. For this purpose, use the **label** object's [indentFromAxis](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/commonAxisSettings/label/indentFromAxis.md '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonAxisSettings/label/#indentFromAxis') property. diff --git a/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/08 Register 3rd-Party Dependencies/02 Globalize Registration.md b/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/08 Register 3rd-Party Dependencies/02 Globalize Registration.md index c714c50d51..2c4b8b2502 100644 --- a/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/08 Register 3rd-Party Dependencies/02 Globalize Registration.md +++ b/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/08 Register 3rd-Party Dependencies/02 Globalize Registration.md @@ -10,7 +10,7 @@ If you want to use { @@ -52,6 +52,7 @@ Then, register the Globalize and CLDR scripts in the TypeScript configuration fi export default value; } -Refer to the [Using Globalize](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/10%20Using%20Globalize.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Globalize') article for usage examples. +Refer to the [Using Globalize](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md') article for usage examples. + +Alternatively, you can [use Intl](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/04%20Using%20Intl.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/04%20Using%20Intl.md') as a more lightweight localization solution. -Alternatively, you can [use Intl](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/05%20Using%20Intl.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Intl') as a more lightweight localization solution. diff --git a/concepts/50 React Components/05 Add DevExtreme to a React Application/65 Additional Configuration for Webpack.md b/concepts/50 React Components/05 Add DevExtreme to a React Application/65 Additional Configuration for Webpack.md index 156590fcc3..9d7c8fa7a2 100644 --- a/concepts/50 React Components/05 Add DevExtreme to a React Application/65 Additional Configuration for Webpack.md +++ b/concepts/50 React Components/05 Add DevExtreme to a React Application/65 Additional Configuration for Webpack.md @@ -1,6 +1,6 @@ [note] If you do not use Webpack in your application, skip this step. -Open the `webpack.config.js` file and configure loaders to process CSS and fonts. You should also specify Globalize and CLDR aliases if you want to [use Globalize for localization](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/10%20Using%20Globalize.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Globalize'): +Open the `webpack.config.js` file and configure loaders to process CSS and fonts. You should also specify Globalize and CLDR aliases if you want to [use Globalize for localization](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md'): const path = require('path'); @@ -29,3 +29,4 @@ Open the `webpack.config.js` file and configure Date.parse() method to extract the timestamp. Due to the differences in browser engines, this method can yield different results in different browsers. For example: +If the format of your Date string is different, DevExtreme uses the Date.parse() method to extract the timestamp. Due to differences in browser engines, this method can yield different results in different browsers. For example: Date.parse("04 11 1991"); // 671338800000 in Chrome and Firefox (Thu Nov 04 1991 00:00:00 GMT+0000); @@ -40,4 +40,4 @@ DevExtreme **does not maintain** the format of the original date string when it The **dateSerializationFormat** property *does not* determine how DevExtreme displays your date. -The [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') guide explains how to change the way DevExtreme displays time and date data. \ No newline at end of file +The [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md') guide explains how to change the way DevExtreme displays time and date data. diff --git a/concepts/Common/Localization and Globalization/00 Overview.md b/concepts/Common/Localization and Globalization/00 Overview.md new file mode 100644 index 0000000000..50d45465ff --- /dev/null +++ b/concepts/Common/Localization and Globalization/00 Overview.md @@ -0,0 +1,34 @@ +--- +title: Localization and Globalization +--- + +This help topic explains three related areas: + +- [UI Text Localization](/concepts/Common/Localization%20and%20Globalization/05%20UI%20Text%20Localization/00%20UI%20Text%20Localization.md): translates component messages, captions, and command text. +- [Value Formatting](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/00%20Value%20Formatting.md): formats dates, numbers, and currencies for a selected locale. +- [Right-to-Left (RTL) Support](/concepts/Common/Localization%20and%20Globalization/20%20Right-to-Left%20(RTL)%20Support.md): controls text direction and mirrored layout behavior. + +These areas work together, but each area solves a different task. + +- Use **UI text localization** to load or customize message dictionaries. +- Use **value formatting** to control how components render and parse values. +- Use **RTL support** to switch layout direction for right-to-left languages. + +### Initial Behavior + +- DevExtreme resolves UI messages through locale fallback and uses the English dictionary (`en`) when no matching localized string exists. +- Value formatting uses the active locale and your selected formatting engine (`Intl` or `Globalize`). +- Layout direction stays left-to-right until you enable `rtlEnabled`. + +### Demos + +The following demo includes text localization and value formatting scenarios: + +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/", + name: "Using Intl" +} +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingGlobalize/", + name: "Using Globalize" +} diff --git a/concepts/Common/Localization and Globalization/05 UI Text Localization/00 UI Text Localization.md b/concepts/Common/Localization and Globalization/05 UI Text Localization/00 UI Text Localization.md new file mode 100644 index 0000000000..9f134e43a7 --- /dev/null +++ b/concepts/Common/Localization and Globalization/05 UI Text Localization/00 UI Text Localization.md @@ -0,0 +1,74 @@ +DevExtreme UI text localization uses dictionaries from `devextreme/localization/messages/.json`. Each dictionary contains over 800 localized strings. + +A dictionary key (for example `de`, `fr`, `zh-tw`) is a [BCP 47](https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag) language tag. If you set a region-qualified locale and no exact dictionary exists, DevExtreme resolves the locale through parent fallback and then to English (`en`). For example, `de-AT` resolves to `de`, and `ca-ES` resolves to `ca`. + +Locale matching is case-insensitive. For example, `zh-TW` and `zh-tw` resolve to the same dictionary. + +Use one of the following dictionary delivery formats: + +- `.json` in module-based projects (Angular, Vue, React, or any bundler workflow). +- `dx.messages..js` in script-tag projects (jQuery, CDN, or non-module setups). + +--- +##### jQuery + +Use the script-tag dictionary file and set the locale after the file is loaded: + + + + + + + + + + + + +##### Angular + + + import { Component } from '@angular/core'; + import deMessages from 'devextreme/localization/messages/de.json'; + import { loadMessages, locale } from 'devextreme/localization'; + + @Component({ + selector: 'app-root', + template: '', + standalone: true + }) + export class AppComponent { + constructor() { + loadMessages(deMessages); + locale('de'); + } + } + +##### Vue + + + + +##### React + + + import deMessages from 'devextreme/localization/messages/de.json'; + import { loadMessages, locale } from 'devextreme/localization'; + + loadMessages(deMessages); + locale('de'); + + export default function App() { + return null; + } + +--- diff --git a/concepts/Common/Localization and Globalization/05 UI Text Localization/05 DevExtreme Dictionaries Reference.md b/concepts/Common/Localization and Globalization/05 UI Text Localization/05 DevExtreme Dictionaries Reference.md new file mode 100644 index 0000000000..fff5442021 --- /dev/null +++ b/concepts/Common/Localization and Globalization/05 UI Text Localization/05 DevExtreme Dictionaries Reference.md @@ -0,0 +1,323 @@ +### Codes and Tags + +- `Code`: the value passed to `locale(code)` and the top-level dictionary key. +- `BCP 47 Tag`: a representative regional locale for the language. +- Dictionary files are language-level files (`de`, `fr`, `zh-tw`). +- Region-qualified locales resolve through fallback (`de-AT -> de -> en`). +- Locale matching is case-insensitive (`zh-TW` and `zh-tw` resolve to the same dictionary). + +### Input and Layout Notes + +- `RTL`: right-to-left script. Enable mirrored layout with `rtlEnabled: true`. +- `IME`: text usually uses an input method editor (CJK languages). Handle composition input in text validation and keystroke logic. + +### Available Dictionaries + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Language FileLanguageCodeBCP 47 TagNote
ar.jsonArabicarar-SARTL
bg.jsonBulgarianbgbg-BG
ca.jsonCatalancaca-ES
cs.jsonCzechcscs-CZ
da.jsonDanishdada-DK
de.jsonGermandede-DE
el.jsonGreekelel-GR
en.jsonEnglishenen-USBase fallback locale
es.jsonSpanisheses-ES
fa.jsonPersian (Farsi)fafa-IRRTL
fi.jsonFinnishfifi-FI
fr.jsonFrenchfrfr-FR
hu.jsonHungarianhuhu-HU
it.jsonItalianitit-IT
ja.jsonJapanesejaja-JPIME
ko.jsonKoreankoko-KRIME
lt.jsonLithuanianltlt-LT
lv.jsonLatvianlvlv-LV
nb.jsonNorwegian Bokmalnbnb-NO
nl.jsonDutchnlnl-NL
pl.jsonPolishplpl-PL
pt.jsonPortugueseptpt-BRBrazilian Portuguese mapping
pt-BR.jsonPortuguese (Brazil)pt-BRpt-BRRegional dictionary
pt-PT.jsonPortuguese (Portugal)pt-PTpt-PTRegional dictionary
ro.jsonRomanianroro-RO
ru.jsonRussianruru-RU
sl.jsonSlovenianslsl-SI
sv.jsonSwedishsvsv-SE
tr.jsonTurkishtrtr-TR
uk.jsonUkrainianukuk-UA
vi.jsonVietnamesevivi-VN
zh.jsonChinese (Simplified)zhzh-CNIME
zh-CN.jsonChinese (Simplified, China)zh-CNzh-CNIME, regional dictionary
zh-Hans.jsonChinese (Simplified, Script)zh-Hanszh-HansIME, script dictionary
zh-tw.jsonChinese (Traditional)zh-twzh-TWIME
+ +[note] DevExtreme includes these translations for convenience. Review and validate all translated strings before you use them in production. DevExpress does not guarantee that these translations are complete or free of linguistic errors, omissions, or inaccuracies. You are responsible for confirming that translations meet your requirements. + +### Dictionary Delivery Formats + +DevExtreme ships each dictionary in two formats. + +#### JSON (`.json`) + +Use this format in module-based projects. + + + import deMessages from 'devextreme/localization/messages/de.json'; + import { loadMessages, locale } from 'devextreme/localization'; + + loadMessages(deMessages); + locale('de'); + +#### Script (`dx.messages..js`) + +Use this format in script-tag and non-module projects. + + + + + + +### File Locations + + + + + + + + + + + + + + + + + + + + + + +
FormPackagePath
<code>.jsondevextremedevextreme/localization/messages/<code>.json
dx.messages.<code>.jsdevextreme-distdevextreme-dist/js/localization/dx.messages.<code>.js
dx.messages.<code>.js (CDN)CDNhttps://cdn3.devexpress.com/jslib/<version>/js/localization/dx.messages.<code>.js
+ diff --git a/concepts/Common/Localization and Globalization/05 UI Text Localization/10 Create a New Dictionary.md b/concepts/Common/Localization and Globalization/05 UI Text Localization/10 Create a New Dictionary.md new file mode 100644 index 0000000000..8da3c31c8a --- /dev/null +++ b/concepts/Common/Localization and Globalization/05 UI Text Localization/10 Create a New Dictionary.md @@ -0,0 +1,15 @@ +DevExtreme ships one message dictionary per language. To create a dictionary for a new language or a regional variant (for example `fr-CA`, `en-GB`, or `de-CH`), follow these steps: + +1. Copy a base dictionary file, for example `fr.json`. +2. Rename the file with a BCP 47 tag, for example `fr-CA.json`. +3. Change the top-level key in the dictionary from `"fr"` to `"fr-CA"`. +4. Translate or adjust messages for the target language/region. +5. Load messages and set the locale to the same tag. + +Use standard BCP 47 casing in file names and keys: + +- Language subtags: lowercase (`fr`, `en`, `zh`). +- Region subtags: uppercase (`CA`, `GB`, `TW`). +- Script subtags: title case (`Hant`). + +[note] You can use modern LLM-based translation tools to generate a custom dictionary from an existing DevExtreme dictionary. This approach gives you a fast starting point for additional languages and dialects and can reduce localization effort. AI-generated translations can contain inaccuracies, inconsistencies, or context-related errors. Review and validate all generated strings before production use. You are responsible for final translation quality. diff --git a/concepts/Common/Localization and Globalization/05 UI Text Localization/15 Add Strings to a Dictionary.md b/concepts/Common/Localization and Globalization/05 UI Text Localization/15 Add Strings to a Dictionary.md new file mode 100644 index 0000000000..81ae4cb085 --- /dev/null +++ b/concepts/Common/Localization and Globalization/05 UI Text Localization/15 Add Strings to a Dictionary.md @@ -0,0 +1,117 @@ +Use [loadMessages(messages)](/api-reference/50%20Common/utils/localization/loadMessages(messages).md '/Documentation/ApiReference/Common/utils/localization/#loadMessagesmessages') to add custom keys to one or more dictionaries. Use [formatMessage(key, value)](/api-reference/50%20Common/utils/localization/formatMessage(key_value).md '/Documentation/ApiReference/Common/utils/localization/#formatMessagekey_value') to retrieve the message for the active locale. + +The following examples add the `greetingMessage` to English and German dictionaries. + +--- +##### jQuery + + + $(function() { + const userName = "John"; + DevExpress.localization.loadMessages({ + "en": { + "greetingMessage": "Good morning, {0}!" + }, + "de": { + "greetingMessage": "Guten Morgen, {0}!" + } + }); + DevExpress.localization.locale(navigator.language); + $("#greeting").text( + DevExpress.localization.formatMessage("greetingMessage", userName) + ); + }); + + +

+ +##### Angular + + + import { Component } from '@angular/core'; + import { formatMessage, loadMessages, locale } from 'devextreme/localization'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + standalone: true + }) + export class AppComponent { + constructor() { + loadMessages({ + 'en': { + 'greetingMessage': 'Good morning, {0}!' + }, + 'de': { + 'greetingMessage': 'Guten Morgen, {0}!' + } + }); + locale('de'); + } + + userName: string = 'John'; + get greeting() { + return formatMessage('greetingMessage', this.userName); + } + } + + +

{{ greeting }}

+ +##### Vue + + + + + + +##### React + + + import { formatMessage, loadMessages, locale } from 'devextreme/localization'; + + loadMessages({ + 'en': { + 'greetingMessage': 'Good morning, {0}!' + }, + 'de': { + 'greetingMessage': 'Guten Morgen, {0}!' + } + }); + locale('de'); + + export default function App() { + const greeting = formatMessage('greetingMessage', 'John'); + return

{greeting}

; + } + +--- + +See this approach in the following demos: + +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/", + name: "Using Intl" +} +#include common-demobutton-named with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingGlobalize/", + name: "Using Globalize" +} \ No newline at end of file diff --git a/concepts/Common/Localization and Globalization/05 UI Text Localization/20 Override Strings in a Dictionary.md b/concepts/Common/Localization and Globalization/05 UI Text Localization/20 Override Strings in a Dictionary.md new file mode 100644 index 0000000000..85206317a6 --- /dev/null +++ b/concepts/Common/Localization and Globalization/05 UI Text Localization/20 Override Strings in a Dictionary.md @@ -0,0 +1,79 @@ +To override a message, find its key in a dictionary and load a new value for that key. + +The following examples override two messages from the English dictionary: + +--- +##### jQuery + + + $(function() { + DevExpress.localization.loadMessages({ + "en": { + "dxDataGrid-editingDeleteRow": "Remove", + "dxDataGrid-editingUndeleteRow": "Recover" + } + }); + DevExpress.localization.locale("en"); + }); + +##### Angular + + + import { Component } from '@angular/core'; + import { loadMessages, locale } from 'devextreme/localization'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + standalone: true + }) + export class AppComponent { + constructor() { + loadMessages({ + "en": { + "dxDataGrid-editingDeleteRow": "Remove", + "dxDataGrid-editingUndeleteRow": "Recover" + } + }); + locale('en'); + } + } + +##### Vue + + + + + + +##### React + + + import { loadMessages, locale } from 'devextreme/localization'; + + loadMessages({ + "en": { + "dxDataGrid-editingDeleteRow": "Remove", + "dxDataGrid-editingUndeleteRow": "Recover" + } + }); + locale('en'); + + export default function App() { + return null; + } + +--- diff --git a/concepts/Common/Localization and Globalization/10 Value Formatting/00 Value Formatting.md b/concepts/Common/Localization and Globalization/10 Value Formatting/00 Value Formatting.md new file mode 100644 index 0000000000..ed87ad6b45 --- /dev/null +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/00 Value Formatting.md @@ -0,0 +1,10 @@ +You can change value formatting in DevExtreme applications in two ways: + +- Set a UI component's `format` property to display formatted values in editors, grids, and other components. +- Use the [localization API](/api-reference/50%20Common/utils/localization '/Documentation/ApiReference/Common/utils/localization/') to format and parse values programmatically in code. + +Format patterns are locale-independent initially. To apply locale-aware formatting rules, use [Intl](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/04%20Using%20Intl.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/04%20Using%20Intl.md') or [Globalize](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md'). + +#include btn-open-demo with { + href: "https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/Localization/UsingIntl/FluentBlueLight/" +} diff --git a/concepts/Common/Localization and Globalization/10 Value Formatting/04 Using Intl.md b/concepts/Common/Localization and Globalization/10 Value Formatting/04 Using Intl.md new file mode 100644 index 0000000000..c08daaa7c0 --- /dev/null +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/04 Using Intl.md @@ -0,0 +1,107 @@ +Intl is the ECMAScript Internationalization API. DevExtreme supports Intl for locale-aware number, date, and currency formatting out of the box. + +Configure locale and message dictionaries in the [UI Text Localization](/concepts/Common/Localization%20and%20Globalization/05%20UI%20Text%20Localization/00%20UI%20Text%20Localization.md) section. This topic focuses on Intl-based value formatting. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/" +} + +Use [defaultCurrency](/api-reference/50%20Common/Object%20Structures/GlobalConfig/defaultCurrency.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/#defaultCurrency') to set a global currency. Use **format**.[currency](/api-reference/50%20Common/Object%20Structures/format/currency.md '/Documentation/ApiReference/Common/Object_Structures/format/#currency') in an individual UI component to override that value. + +--- +##### jQuery + + + $(function() { + DevExpress.config({ defaultCurrency: "EUR" }); + + $("#dataGridContainer").dxDataGrid({ + // ... + columns: [{ + dataField: "SaleAmount", + format: { + type: "currency", + currency: "USD" + } + }] + }); + }); + +##### Angular + + + import { Component } from '@angular/core'; + import { DxDataGridModule } from 'devextreme-angular'; + import config from 'devextreme/core/config'; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + standalone: true, + imports: [DxDataGridModule] + }) + export class AppComponent { + constructor() { + config({ defaultCurrency: 'EUR' }); + } + } + + + + + + + + + +##### Vue + + + + + + +##### React + + + import config from 'devextreme/core/config'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + import DataGrid, { Column, Format } from 'devextreme-react/data-grid'; + + config({ defaultCurrency: 'EUR' }); + + export default function App() { + return ( + + + + + + ); + } + +--- + +You can apply Intl option objects directly to the **format** property. Refer to [Intl Formats](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/15%20Intl%20Formats.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/15%20Intl%20Formats.md') for details and additional examples. + diff --git a/concepts/Common/Localization and Globalization/10 Value Formatting/08 Using Globalize.md b/concepts/Common/Localization and Globalization/10 Value Formatting/08 Using Globalize.md new file mode 100644 index 0000000000..d6c7db4afc --- /dev/null +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/08 Using Globalize.md @@ -0,0 +1,221 @@ +[important] + +The Globalize package is outdated and potentially unsafe. + +Use Globalize at your own risk. We recommend switching to [Intl](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/04%20Using%20Intl.md) for a more secure solution. + +[/important] + +[note]We recommend against using Globalize if you apply [CSP rules](/concepts/Common/Security%20Considerations/40%20Content%20Security%20Policy/00%20Content%20Security%20Policy.md '/Documentation/Guide/Common/Security_Considerations/#Content_Security_Policy'). Use [Intl](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/04%20Using%20Intl.md) instead. + +The following libraries and data are required to activate Globalize in your project: + +- Globalize library +- CLDR library +- CLDR data + +--- +##### jQuery + +Specify the Globalize and CLDR libraries using ` + + + + + + + + + + + + + + + + + + + +##### Angular + +Install `devextreme-cldr-data` and `globalize` packages: + + npm install --save-dev devextreme-cldr-data globalize + +Register Globalize in your project as described in the following help topic: [Globalize Registration](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application/08%20Register%203rd-Party%20Dependencies/02%20Globalize%20Registration.md '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/#Register_3rd-Party_Dependencies/Globalize_Registration'). + + + import "devextreme/localization/globalize/number"; + import "devextreme/localization/globalize/date"; + import "devextreme/localization/globalize/currency"; + import "devextreme/localization/globalize/message"; + + import deMessages from "devextreme/localization/messages/de.json"; + import supplemental from "devextreme-cldr-data/supplemental.json"; + import deCldrData from "devextreme-cldr-data/de.json"; + import Globalize from "globalize"; + + export class AppComponent { + constructor() { + Globalize.load(supplemental, deCldrData); + Globalize.loadMessages(deMessages); + Globalize.locale(navigator.language); + } + } + +##### Vue + +Install `devextreme-cldr-data` and `globalize` packages: + + npm install --save-dev devextreme-cldr-data globalize + +Register Globalize in your project as described in the following help topic: [Globalize Registration](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/63%20Register%203rd-Party%20Dependencies/2%20Globalize%20Registration.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/#Register_3rd-Party_Dependencies/Globalize_Registration'). + + + import "devextreme/localization/globalize/number"; + import "devextreme/localization/globalize/date"; + import "devextreme/localization/globalize/currency"; + import "devextreme/localization/globalize/message"; + + import deMessages from "devextreme/localization/messages/de.json"; + import supplemental from "devextreme-cldr-data/supplemental.json"; + import deCldrData from "devextreme-cldr-data/de.json"; + import Globalize from "globalize"; + + Globalize.load(supplemental, deCldrData); + Globalize.loadMessages(deMessages); + Globalize.locale(navigator.language); + +##### React + +Install `devextreme-cldr-data` and `globalize` packages: + + npm install --save-dev devextreme-cldr-data globalize + +Register Globalize in your project as described in the following help topic: [Additional Configuration for Webpack](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/65%20Additional%20Configuration%20for%20Webpack.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Additional_Configuration_for_Webpack'). + + + import "devextreme/localization/globalize/number"; + import "devextreme/localization/globalize/date"; + import "devextreme/localization/globalize/currency"; + import "devextreme/localization/globalize/message"; + + import deMessages from "devextreme/localization/messages/de.json"; + import supplemental from "devextreme-cldr-data/supplemental.json"; + import deCldrData from "devextreme-cldr-data/de.json"; + import Globalize from "globalize"; + + Globalize.load(supplemental, deCldrData); + Globalize.loadMessages(deMessages); + Globalize.locale(navigator.language); + +--- + +Apply the **format**.[type](/api-reference/50%20Common/Object%20Structures/format/type.md '/Documentation/ApiReference/Common/Object_Structures/Format/#type') property to format and localize strings, numbers, dates, and currencies automatically according to a locale. + +You can also format values using structures accepted by numberFormatter, currencyFormatter, and dateFormatter, for example: + +--- +##### jQuery + + + $(function() { + $("#dataGridContainer").dxDataGrid({ + // ... + columns: [{ + dataField: "OrderDate", + format: { skeleton: "yMMMd" } + }, { + dataField: "SaleAmount", + format: { currency: "EUR", maximumFractionDigits: 2 } + }] + }); + }); + +##### Angular + + + + + + + + + + + import { Component } from '@angular/core'; + import { DxDataGridModule } from 'devextreme-angular'; + // ... + // import dictionaries and localization modules here + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + standalone: true, + imports: [DxDataGridModule] + }) + export class AppComponent { + // ... + } + +##### Vue + + + + + + +##### React + + + import React from 'react'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + // ... + // import dictionaries and localization modules here + + import DataGrid, { Column } from 'devextreme-react/data-grid'; + + export default function App() { + return ( + + + + ); + } + +--- + diff --git a/concepts/Common/Value Formatting/10 Format UI Component Values/Format UI Component Values.md b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/00 Format UI Component Values.md similarity index 100% rename from concepts/Common/Value Formatting/10 Format UI Component Values/Format UI Component Values.md rename to concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/00 Format UI Component Values.md diff --git a/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/10 Predefined Formats.md b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/10 Predefined Formats.md new file mode 100644 index 0000000000..2982284c39 --- /dev/null +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/10 Predefined Formats.md @@ -0,0 +1,125 @@ +Predefined formats are string literals for formatting numbers and dates. See the **format**.[type](/api-reference/50%20Common/Object%20Structures/format/type.md '/Documentation/ApiReference/Common/Object_Structures/Format/#type') description for a full list. + +Set the **format** UI component property to apply a predefined format. In the following examples, this property formats the `SaleAmount` column value in the DataGrid. The `precision` value of `2` displays two digits after the decimal separator. + +--- +##### jQuery + + + $(function() { + $("#dataGridContainer").dxDataGrid({ + dataSource: [{ + ID: 1, + SaleAmount: 1234.567 + }], + keyExpr: "ID", + columns: [{ + dataField: "SaleAmount", + format: { + type: "fixedPoint", + precision: 2 + } + }] + }); + }); + +##### Angular + + + + + + + + + + + import { Component } from '@angular/core'; + import { DxDataGridModule } from 'devextreme-angular'; + + type Order = { + ID: number; + SaleAmount: number; + }; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + standalone: true, + imports: [DxDataGridModule] + }) + export class AppComponent { + orders: Order[] = [{ + ID: 1, + SaleAmount: 1234.567 + }]; + } + +##### Vue + + + + + + +##### React + + + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + import DataGrid, { Column, Format } from 'devextreme-react/data-grid'; + + type Order = { + ID: number; + SaleAmount: number; + }; + + const orders: Order[] = [{ + ID: 1, + SaleAmount: 1234.567 + }]; + + export default function App() { + return ( + + + + + + ); + } + +--- + +The previous example assigns an object to the **format** property that in turn allows you to specify the `precision` value. You can assign a string literal to this **format** property if additional options are not required. + +#include btn-open-demo with { + href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/NumberBox/Formatting/" +} diff --git a/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/15 Intl Formats.md b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/15 Intl Formats.md new file mode 100644 index 0000000000..d545703492 --- /dev/null +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/15 Intl Formats.md @@ -0,0 +1,136 @@ +Intl is the ECMAScript Internationalization API. DevExtreme supports Intl value formatting out of the box. + +The UI component **format** property is compatible with `options` objects accepted by Intl.NumberFormat and Intl.DateTimeFormat. To apply an Intl format, assign these option fields to the **format** property: + +--- +##### jQuery + + + $(function() { + $("#dataGridContainer").dxDataGrid({ + // ... + columns: [{ + dataField: "OrderDate", + format: { year: "2-digit", month: "narrow", day: "2-digit" } + }, { + dataField: "SaleAmount", + format: { style: "currency", currency: "EUR", useGrouping: true, minimumSignificantDigits: 3 } + }] + }); + }); + +##### Angular + + + + + + + + + + + import { Component } from '@angular/core'; + import { DxDataGridModule } from 'devextreme-angular'; + + type Order = { + ID: number; + OrderDate: Date; + SaleAmount: number; + }; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + standalone: true, + imports: [DxDataGridModule] + }) + export class AppComponent { + orders: Order[] = [{ + ID: 1, + OrderDate: new Date(2021, 6, 15), + SaleAmount: 1234.567 + }]; + + orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' }; + saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 }; + } + +##### Vue + + + + + + +##### React + + + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + import DataGrid, { Column } from 'devextreme-react/data-grid'; + + type Order = { + ID: number; + OrderDate: Date; + SaleAmount: number; + }; + + const orders: Order[] = [{ + ID: 1, + OrderDate: new Date(2021, 6, 15), + SaleAmount: 1234.567 + }]; + + const orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' }; + const saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 }; + + export default function App() { + return ( + + + + + ); + } + +--- \ No newline at end of file diff --git a/concepts/Common/Value Formatting/10 Format UI Component Values/20 Custom Format String.md b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/20 Custom Format String.md similarity index 68% rename from concepts/Common/Value Formatting/10 Format UI Component Values/20 Custom Format String.md rename to concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/20 Custom Format String.md index 5af7a63006..e0314010dd 100644 --- a/concepts/Common/Value Formatting/10 Format UI Component Values/20 Custom Format String.md +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/20 Custom Format String.md @@ -1,4 +1,4 @@ -Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard characters and characters displayed as is. The **format** property supports the following wildcard characters: +Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom format string. An LDML pattern consists of wildcard and literal characters. The **format** property supports the following wildcard characters: **Numeric Formats** @@ -14,21 +14,21 @@ Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom form # - Any number of leading digits, a single digit, or nothing. If this character goes first in the format string, it can match multiple leading digits (before the decimal point). Subsequent characters match a single digit. If the formatted number does not have a digit in the corresponding position, it displays nothing.
- For example, if you apply format "#0.#" to "123.45", the result is "123.5". + Any number of leading digits, a single digit, or nothing. If this character goes first in the format string, it can match multiple leading digits (before the decimal point). Subsequent characters match a single digit. If the formatted number does not have a digit in the corresponding position, it displays nothing.
+ For example, if you format "123.45" with "#0.#", the result is "123.5". . - A decimal separator.
+ A decimal separator.
Actual character depends on locale. , - A group separator.
+ A group separator.
Actual character depends on locale. @@ -40,9 +40,9 @@ Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom form ; - Separates positive and negative format patterns.
- For example, the "#0.##;(#0.##)" format displays a positive number according to the pattern before the semicolon (";"), and a negative number according to the pattern after the semicolon (";").
- If you do not use this character and the additional pattern, negative numbers display a minus ("-") prefix. + Separates positive and negative format patterns.
+ For example, the "#0.##;(#0.##)" format displays a positive number according to the pattern before the semicolon (";"), and a negative number according to the pattern after the semicolon (";").
+ If you do not use this character , nor the additional pattern, negative numbers display a minus ("-") prefix. @@ -52,14 +52,15 @@ Use Unicode Locale Data Markup Language (LDML) patterns to specify a custom form For example, '%'. - Other characters + + Other characters You can add any literal characters to the beginning or end of the format string. -The examples below demonstrate the behavior of "#" and "0" in fractional numbers: +The examples below demonstrate how `#` and `0` behave in fractional numbers: const number = 1234.567; @@ -77,7 +78,7 @@ The examples below demonstrate the behavior of "#" and "0" in fractional numbers // Add a group separator format: ",##0.###" // 123,456.789 -The examples below show different ways to apply percentage formatting to decimals. Use caution if your format string starts with a zero ('0'), because the formatted number may lose leading digits. +The examples below demonstrate different options used to apply percentage formatting to decimals. Use caution if your format string starts with `0` because the formatted number may lose leading digits. const smallNumber = 0.01234; @@ -88,7 +89,7 @@ The examples below show different ways to apply percentage formatting to decimal // Add a percent sign and limit to two decimal digits format: "#0.##'%'" // 0.01% - **Date-Time Formats** +**Date-Time Formats** @@ -102,14 +103,14 @@ The examples below show different ways to apply percentage formatting to decimal @@ -120,7 +121,7 @@ The examples below show different ways to apply percentage formatting to decimal @@ -168,7 +169,5 @@ The examples below show different ways to apply percentage formatting to decimal format: "hh:mm a" // 08:45 PM format: "MMMM dd, yyyy HH:mm:ss" // July 15, 2021 20:45:34 -[note] [Reference the Globalize library](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/10%20Using%20Globalize.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Globalize') in your application to use other numeric or datetime format characters. +[note] Use the [Globalize library](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/08%20Using%20Globalize.md') in your application to use additional numeric or date-time format characters. -#####See Also##### -- [NumberBox Formatting Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/NumberBox/Formatting/) diff --git a/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/30 Custom Function.md b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/30 Custom Function.md new file mode 100644 index 0000000000..bb284bee9c --- /dev/null +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/10 Format UI Component Values/30 Custom Function.md @@ -0,0 +1,157 @@ +A custom function is useful when advanced formatting is required. The value to be formatted is passed to the function as an argument. In the following example, a custom function formats a DataGrid column value as an absolute value and a percentage of the maximum sale amount. + +--- +##### jQuery + + + $(function() { + const orders = [{ + ID: 1, + SaleAmount: 6 + }, { + ID: 2, + SaleAmount: 8.5 + }, { + ID: 3, + SaleAmount: 10 + }]; + + const maxSaleAmount = Math.max(...orders.map((item) => item.SaleAmount)); + + $("#dataGridContainer").dxDataGrid({ + dataSource: orders, + keyExpr: "ID", + columns: [{ + dataField: "SaleAmount", + format: function (value) { + return value + " | " + ((value / maxSaleAmount) * 100).toFixed(1) + "%"; + } + }] + }); + }); + +##### Angular + + + + + + + + + import { Component } from '@angular/core'; + import { DxDataGridModule } from 'devextreme-angular'; + + type Order = { + ID: number; + SaleAmount: number; + }; + + @Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'], + standalone: true, + imports: [DxDataGridModule] + }) + export class AppComponent { + orders: Order[] = [{ + ID: 1, + SaleAmount: 6 + }, { + ID: 2, + SaleAmount: 8.5 + }, { + ID: 3, + SaleAmount: 10 + }]; + + maxSaleAmount = Math.max(...this.orders.map((item) => item.SaleAmount)); + + formatSaleAmount = (value: number): string => { + return `${value} | ${((value / this.maxSaleAmount) * 100).toFixed(1)}%`; + }; + } + +##### Vue + + + + + + +##### React + + + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + import DataGrid, { Column } from 'devextreme-react/data-grid'; + import { useCallback } from 'react'; + + type Order = { + ID: number; + SaleAmount: number; + }; + + const orders: Order[] = [{ + ID: 1, + SaleAmount: 6 + }, { + ID: 2, + SaleAmount: 8.5 + }, { + ID: 3, + SaleAmount: 10 + }]; + + const maxSaleAmount = Math.max(...orders.map((item) => item.SaleAmount)); + + export default function App() { + const formatSaleAmount = useCallback((value: number): string => { + return `${value} | ${((value / maxSaleAmount) * 100).toFixed(1)}%`; + }, []); + + return ( + + + + ); + } + +--- diff --git a/concepts/Common/Localization and Globalization/10 Value Formatting/40 Format and Parse Dates and Numbers.md b/concepts/Common/Localization and Globalization/10 Value Formatting/40 Format and Parse Dates and Numbers.md new file mode 100644 index 0000000000..268e78ecc3 --- /dev/null +++ b/concepts/Common/Localization and Globalization/10 Value Formatting/40 Format and Parse Dates and Numbers.md @@ -0,0 +1,140 @@ +DevExtreme includes an [API](/api-reference/50%20Common/utils/localization '/Documentation/ApiReference/Common/utils/localization/') that formats and parses dates and numbers. The following example demonstrates date and number formatting and parsing. + +The [formatDate()](/api-reference/50%20Common/utils/localization/formatDate(value_format).md '/Documentation/ApiReference/Common/utils/localization/#formatDatevalue_format') method applies a [predefined format](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md') to a date. You can also use a [custom function](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md') or [format string](/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/concepts/Common/Localization%20and%20Globalization/10%20Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md'). The output is a string. Use [parseDate()](/api-reference/50%20Common/utils/localization/parseDate(text_format).md '/Documentation/ApiReference/Common/utils/localization/#parseDatetext_format') to convert the string back to a Date. + +Use [formatNumber()](/api-reference/50%20Common/utils/localization/formatNumber(value_format).md '/Documentation/ApiReference/Common/utils/localization/#formatNumbervalue_format') and [parseNumber()](/api-reference/50%20Common/utils/localization/parseNumber(text_format).md '/Documentation/ApiReference/Common/utils/localization/#parseNumbertext_format') to format and parse numbers and currency values. + +--- +##### jQuery + + + $(function() { + let date = new Date(); + let amount = 1234.56; + $("#dateInput").val(DevExpress.localization.formatDate(date, "shortDate")); + $("#numberInput").val(DevExpress.localization.formatNumber(amount, "currency")); + $("#dateInput").change(function(event) { + date = DevExpress.localization.parseDate(event.target.value, "shortDate"); + }); + $("#numberInput").change(function(event) { + amount = DevExpress.localization.parseNumber(event.target.value, "currency"); + }); + }); + + + + + +##### Angular + + + import { formatDate, formatNumber, parseDate, parseNumber } from "devextreme/localization"; + // ... + export class AppComponent { + _date: Date = new Date(); + _amount: number = 1234.56; + get date() { + return formatDate(this._date, "shortDate"); + } + set date(value) { + this._date = parseDate(value, "shortDate"); + } + get amount() { + return formatNumber(this._amount, "currency"); + } + set amount(value) { + this._amount = parseNumber(value, "currency"); + } + } + + + + + +##### Vue + + + + + + +##### React + + + import React, { useState, useCallback } from "react"; + import { formatDate, formatNumber, parseDate, parseNumber } from "devextreme/localization"; + + export default function App() { + const [date, setDate] = useState(new Date()); + const [amount, setAmount] = useState(1234.56); + const getFormattedDate = useCallback(() => { + return formatDate(date, "shortDate") + }, [date]); + const getFormattedAmount = useCallback(() => { + return formatNumber(amount, "currency") + }, [amount]); + const setParsedDate = useCallback((event) => { + setDate(parseDate(event.target.value, "shortDate")); + }, []); + const setParsedAmount = useCallback((event) => { + setAmount(parseNumber(event.target.value, "currency")); + }, []); + + return ( + <> + + + + ); + } + + +--- diff --git a/concepts/Common/Localization/20 Right-to-Left Support.md b/concepts/Common/Localization and Globalization/20 Right-to-Left (RTL) Support.md similarity index 50% rename from concepts/Common/Localization/20 Right-to-Left Support.md rename to concepts/Common/Localization and Globalization/20 Right-to-Left (RTL) Support.md index 380220b9f6..916145b8df 100644 --- a/concepts/Common/Localization/20 Right-to-Left Support.md +++ b/concepts/Common/Localization and Globalization/20 Right-to-Left (RTL) Support.md @@ -1,13 +1,13 @@ -Right-to-left (RTL) support allows the UI component to adapt its content to right-to-left locales. +Right-to-left (RTL) support allows UI components to adapt their layout to right-to-left locales. -RTL layout can be specified for an individual UI component using its **rtlEnabled** property: +Use the **rtlEnabled** property to enable RTL for an individual UI component: --- ##### jQuery $(function() { - $("#sliderContainer").dxSlider({ + $("#dataGridContainer").dxDataGrid({ // ... rtlEnabled: true }); @@ -16,75 +16,49 @@ RTL layout can be specified for an individual UI component using its **rtlEnable ##### Angular - - + - import { Component } from '@angular/core'; + import { Component } from '@angular/core'; + import { DxDataGridModule } from 'devextreme-angular'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], + standalone: true, + imports: [DxDataGridModule] }) export class AppComponent { // ... } - - import { BrowserModule } from '@angular/platform-browser'; - import { NgModule } from '@angular/core'; - import { AppComponent } from './app.component'; - - import { DxSliderModule } from 'devextreme-angular'; - - @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - DxSliderModule - ], - providers: [], - bootstrap: [AppComponent] - }) - export class AppModule { } - ##### Vue - - + ##### React - + import React from 'react'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; - - import Slider from 'devextreme-react/slider'; + import DataGrid from 'devextreme-react/data-grid'; export default function App() { return ( - ); @@ -92,10 +66,10 @@ RTL layout can be specified for an individual UI component using its **rtlEnable --- -To apply RTL to your entire application, set the same property globally using the [config()](/api-reference/50%20Common/utils/config(config).md '/Documentation/ApiReference/Common/utils/#configconfig') function: +Set the **rtlEnabled** property globally using the [config()](/api-reference/50%20Common/utils/config(config).md '/Documentation/ApiReference/Common/utils/#configconfig') function to enable RTL for the entire application: --- -#####jQuery +##### jQuery $(function() { @@ -103,7 +77,7 @@ To apply RTL to your entire application, set the same property globally using th // ... }); -#####Angular +##### Angular import { Component } from '@angular/core'; @@ -112,11 +86,12 @@ To apply RTL to your entire application, set the same property globally using th @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.css'], + standalone: true }) export class AppComponent { constructor() { - config({ rtlEnabled: true }); + config({ rtlEnabled: true }); } } @@ -127,36 +102,24 @@ To apply RTL to your entire application, set the same property globally using th - ##### React - + import React from 'react'; - import config from 'devextreme/core/config'; - class App extends React.Component { - constructor(props) { - super(props); - config({ rtlEnabled: true }); - } + config({ rtlEnabled: true }); - render() { - return ( - // ... - ); - } + export default function App() { + return ( + // ... + ); } - export default App; --- diff --git a/concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md b/concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md deleted file mode 100644 index 85b4f59109..0000000000 --- a/concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md +++ /dev/null @@ -1,8 +0,0 @@ -To make a dictionary for a new locale: - -1. Copy one of the available [dictionaries](/concepts/Common/Localization/01%20Dictionaries '/Documentation/Guide/Common/Localization/#Dictionaries'). -2. Rename it according to the new locale. -3. Translate the strings in it and change the locale key. - -You can submit JSON dictionaries to our repository on GitHub. You should refer to our Contribution Guide before submitting content. - diff --git a/concepts/Common/Localization/01 Dictionaries/05 Add Strings to a Dictionary.md b/concepts/Common/Localization/01 Dictionaries/05 Add Strings to a Dictionary.md deleted file mode 100644 index 2d9c6dc54b..0000000000 --- a/concepts/Common/Localization/01 Dictionaries/05 Add Strings to a Dictionary.md +++ /dev/null @@ -1,139 +0,0 @@ -In the following example, the [loadMessages(messages)](/api-reference/50%20Common/utils/localization/loadMessages(messages).md '/Documentation/ApiReference/Common/utils/localization/#loadMessagesmessages') method adds a string with the `greetingMessage` key to the English and German dictionaries. The [formatMessage(key, value)](/api-reference/50%20Common/utils/localization/formatMessage(key_value).md '/Documentation/ApiReference/Common/utils/localization/#formatMessagekey_value') method then uses this key to retrieve the string from the dictionary that corresponds to the locale set by the [locale(locale)](/api-reference/50%20Common/utils/localization/locale(locale).md '/Documentation/ApiReference/Common/utils/localization/#localelocale') method. - ---- -##### jQuery - - - $(function() { - var userName = "John"; - DevExpress.localization.loadMessages({ - "en": { - "greetingMessage": "Good morning, {0}!" - }, - "de": { - "greetingMessage": "Guten morgen, {0}!" - } - }); - DevExpress.localization.locale(navigator.language); - $("#greeting").text( - DevExpress.localization.formatMessage("greetingMessage", userName) - ) - }) - - -

- -##### Angular - - - import { Component } from '@angular/core'; - import { formatMessage, loadMessages, locale } from 'devextreme/localization'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - export class AppComponent { - constructor() { - loadMessages({ - 'en': { - 'greetingMessage': 'Good morning, {0}!' - }, - 'de': { - 'greetingMessage': 'Guten morgen, {0}!' - } - }); - locale(navigator.language); - } - - userName: string = 'John'; - get greeting() { - return formatMessage('greetingMessage', this.userName); - } - } - - -

{{ greeting }}

- -##### Vue - - - - - - -##### React - - - import React from 'react'; - - import { formatMessage, loadMessages, locale } from 'devextreme/localization'; - - class App extends React.Component { - constructor(props) { - super(props); - this.userName = 'John'; - - loadMessages({ - 'en': { - 'greetingMessage': 'Good morning, {0}!' - }, - 'de': { - 'greetingMessage': 'Guten morgen, {0}!' - } - }); - - this.greeting = formatMessage('greetingMessage', this.userName); - - locale(navigator.language); - } - - render() { - return ( -

{ this.greeting }

- ); - } - } - export default App; - ---- - -You can also see this approach in one of our demos: - -#include common-demobutton-named with { - url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/", - name: "Using Intl" -} -#include common-demobutton-named with { - url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingGlobalize/", - name: "Using Globalize" -} \ No newline at end of file diff --git a/concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md b/concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md deleted file mode 100644 index b37040bece..0000000000 --- a/concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md +++ /dev/null @@ -1,91 +0,0 @@ -To override a string, find its key in any dictionary and use it to specify the new string value. - -In the following code, we override two strings from the English dictionary: - ---- -##### jQuery - - - $(function() { - DevExpress.localization.loadMessages({ - "en": { - "dxDataGrid-editingDeleteRow": "Remove", - "dxDataGrid-editingUndeleteRow": "Recover" - } - }); - }); - -##### Angular - - - import { Component } from '@angular/core'; - import { loadMessages } from 'devextreme/localization'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - export class AppComponent { - constructor() { - loadMessages({ - "en": { - "dxDataGrid-editingDeleteRow": "Remove", - "dxDataGrid-editingUndeleteRow": "Recover" - } - }); - } - } - -##### Vue - - - - - - -##### React - - - import React from 'react'; - - import { loadMessages } from 'devextreme/localization'; - - class App extends React.Component { - constructor(props) { - super(props); - loadMessages({ - "en": { - "dxDataGrid-editingDeleteRow": "Remove", - "dxDataGrid-editingUndeleteRow": "Recover" - } - }); - } - - render() { - return ( - { /* ... */} - ); - } - } - export default App; - ---- - -#####See Also##### -- [List - Localization](/concepts/05%20UI%20Components/List/50%20Localization.md '/Documentation/Guide/UI_Components/List/Localization/') diff --git a/concepts/Common/Localization/01 Dictionaries/Dictionaries.md b/concepts/Common/Localization/01 Dictionaries/Dictionaries.md deleted file mode 100644 index 540b0617e3..0000000000 --- a/concepts/Common/Localization/01 Dictionaries/Dictionaries.md +++ /dev/null @@ -1,115 +0,0 @@ -Dictionaries contain localized strings for different languages. These strings are key/value pairs shipped as JavaScript or JSON files, depending on the package you use. - -DevExtreme dictionaries are community-sourced. For a list of all available dictionaries, refer to the DevExtreme repository on GitHub: [DevExtreme Dictionaries](https://github.com/DevExpress/DevExtreme/tree/26_2/packages/devextreme/js/localization/messages). - -[note] Certain messages may not be translated in community-sourced dictionaries. To translate these messages, refer to [Override Strings in a Dictionary](/concepts/Common/Localization/01%20Dictionaries/07%20Override%20Strings%20in%20a%20Dictionary.md '/Documentation/Guide/Common/Localization/#Dictionaries/Override_Strings_in_a_Dictionary'). To contribute translations to the DevExtreme repository, refer to our [Contribution Guide](https://github.com/DevExpress/DevExtreme/blob/26_2/CONTRIBUTING.md). - -To localize your project, import dictionaries from the following locations: - -- `js/localization` within the `devextreme-dist` package. -- `js/localization` in DevExtreme libraries on the DevExpress CDN. -- `C:\Program Files\DevExpress 26.2\Components\Sources\DevExtreme\Lib\js\localization` on your computer if you used the DevExpress Unified Component Installer. - ---- -##### jQuery - -Use the ` - - - - - - - -##### Angular - -Include the dictionaries using the `import` or `require` statement the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes: - - - // ... - // Dictionaries for German language - import deMessages from "devextreme/localization/messages/de.json"; - import { locale, loadMessages } from "devextreme/localization"; - - export class AppComponent { - constructor() { - loadMessages(deMessages); - locale(navigator.language); - } - } - - - // ... - // Dictionaries for German language - const deMessages = require('devextreme/localization/messages/de.json'); - const localization = require('devextreme/localization'); - - localization.loadMessages(deMessages); - localization.locale(navigator.language); - -##### Vue - -Include the dictionaries using the `import` or `require` statement the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes: - - - // ... - // Dictionaries for German language - import deMessages from "devextreme/localization/messages/de.json"; - import { locale, loadMessages } from "devextreme/localization"; - - export default { - created() { - loadMessages(deMessages); - locale(navigator.language); - } - } - - - // ... - // Dictionaries for German language - const deMessages = require('devextreme/localization/messages/de.json'); - const localization = require('devextreme/localization'); - - localization.loadMessages(deMessages); - localization.locale(navigator.language); - -##### React - -Include the dictionaries using the `import` or `require` statement the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes: - - - // ... - // Dictionaries for German language - import deMessages from "devextreme/localization/messages/de.json"; - import { locale, loadMessages } from "devextreme/localization"; - - class App extends React.Component { - constructor(props) { - super(props); - loadMessages(deMessages); - locale(navigator.language); - } - } - - - // ... - // Dictionaries for German language - const deMessages = require('devextreme/localization/messages/de.json'); - const localization = require('devextreme/localization'); - - localization.loadMessages(deMessages); - localization.locale(navigator.language); - ---- - diff --git a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/05 Using Intl.md b/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/05 Using Intl.md deleted file mode 100644 index 631568d5f5..0000000000 --- a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/05 Using Intl.md +++ /dev/null @@ -1,249 +0,0 @@ -Intl is the short name used to refer to a particular ECMAScript Internationalization API object. DevExtreme supports this API out of the box. All you need to do is set the locale: - ---- -##### jQuery - - - DevExpress.localization.locale(navigator.language); - // ... - // DevExtreme UI components are configured here - // ... - - - - - - - - - - - -##### Angular - - - import { Component } from '@angular/core'; - // Dictionaries for German language - import deMessages from "devextreme/localization/messages/de.json"; - import { locale, loadMessages } from "devextreme/localization"; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - export class AppComponent { - constructor() { - loadMessages(deMessages); - locale(navigator.language); - } - } - -##### Vue - - - - - - -##### React - - - // Dictionaries for German language - import deMessages from "devextreme/localization/messages/de.json"; - - import { locale, loadMessages } from "devextreme/localization"; - - class App extends React.Component { - constructor(props) { - super(props); - loadMessages(deMessages); - locale(navigator.language); - } - - render() { - return ( - {/* ... */} - ); - } - } - export default App; - -##### CommonJS syntax - - - // ... - // Dictionaries for German language - const deMessages = require('devextreme/localization/messages/de.json'); - const localization = require('devextreme/localization'); - - localization.loadMessages(deMessages); - localization.locale(navigator.language); - ---- - -#include btn-open-demo with { - href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingIntl/" -} - -If you want to format and localize strings, numbers, dates, and currencies automatically according to the specified locale, define the **format**.[type](/api-reference/50%20Common/Object%20Structures/format/type.md '/Documentation/ApiReference/Common/Object_Structures/Format/#type') property. You can also specify a currency other than USD globally. For this purpose, use the [defaultCurrency](/api-reference/50%20Common/Object%20Structures/GlobalConfig/defaultCurrency.md '/Documentation/ApiReference/Common/Object_Structures/GlobalConfig/#defaultCurrency') or [currency](/api-reference/50%20Common/Object%20Structures/format/currency.md '/Documentation/ApiReference/Common/Object_Structures/format/#currency') settings: - ---- -#####jQuery - - - $(function() { - // Specifying a currency globally - DevExpress.config({ defaultCurrency: "EUR" }); - - $("#dataGridContainer").dxDataGrid({ - // ... - columns: [{ - dataField: "Price", - // Specifying a currency in a format definition - format: { - type: "currency", - currency: "RUB" - } - }] - }); - }); - -##### Angular - - - import { Component } from '@angular/core'; - import config from 'devextreme/core/config'; - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - export class AppComponent { - constructor() { - // Specifying a currency globally - config({ defaultCurrency: 'EUR' }); - } - } - - - - - - - - - - - - import { BrowserModule } from '@angular/platform-browser'; - import { NgModule } from '@angular/core'; - import { AppComponent } from './app.component'; - - import { DxDataGridModule } from 'devextreme-angular'; - - @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - DxDataGridModule - ], - providers: [ ], - bootstrap: [AppComponent] - }) - export class AppModule { } - -##### Vue - - - - - - -##### React - - - import React from 'react'; - import config from 'devextreme/core/config'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; - - import DataGrid, { - Column, Format - } from 'devextreme-react/data-grid'; - - class App extends React.Component { - constructor(props) { - super(props); - // Specifying a currency globally - config({ defaultCurrency: 'EUR' }); - } - - render() { - return ( - - - // Specifying a currency in a format definition - - - - ); - } - } - export default App; - ---- - -You can use structures compatible with the Intl API for value formatting. Refer to the [Intl Formats](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/15%20Intl%20Formats.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Intl_Formats') section in the [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting/') article for more information. diff --git a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md b/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md deleted file mode 100644 index d31d181d72..0000000000 --- a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md +++ /dev/null @@ -1,306 +0,0 @@ -[important] - -The Globalize package is outdated and potentially unsafe. - -Use Globalize at your own risk. We recommend switching to [Intl](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/05%20Using%20Intl.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Intl') for a more secure solution. - ---- -##### React -Moreover, React projects created with [Create React App](https://facebook.github.io/create-react-app) do not support Globalize. Use Intl in these projects as well. - ---- - -[/important] - -[note]If you apply [CSP rules](/concepts/Common/Security%20Considerations/40%20Content%20Security%20Policy/00%20Content%20Security%20Policy.md '/Documentation/Guide/Common/Security_Considerations/#Content_Security_Policy'), we do not recommend that you use the Globalize technique. Use the [Intl](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/05%20Using%20Intl.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Intl') technique instead. - -The following files are required to activate Globalize in your project: - -- Globalize library -- CLDR library -- CLDR data - -To include these components, you can use CDN or npm. - -* **CDN or local files** - - Specify the Globalize and CLDR libraries using ` - - - - - - - - - - - - - - - - - - - - --- - - #include common-demobutton with { - url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingGlobalize/" - } - -* **npm** - - Install the `devextreme-cldr-data` and `globalize` packages: - - npm install --save-dev devextreme-cldr-data globalize - - --- - ##### Angular - - Register Globalize in your project as described in the following help topic: [Globalize Registration](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application/08%20Register%203rd-Party%20Dependencies/02%20Globalize%20Registration.md '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/#Register_3rd-Party_Dependencies/Globalize_Registration'). - - ##### Vue - - Register Globalize in your project as described in the following help topic: [Globalize Registration](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/63%20Register%203rd-Party%20Dependencies/2%20Globalize%20Registration.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/#Register_3rd-Party_Dependencies/Globalize_Registration'). - - ##### React - - Register Globalize in your project as described in the following help topic: [Additional Configuration for Webpack](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/65%20Additional%20Configuration%20for%20Webpack.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Additional_Configuration_for_Webpack'). - - --- - - Then, include Globalize, CLDR, and language-specific CLDR data using the `import` or `require` statement—the statement depends on the syntax for working with modules. The code below shows ECMAScript 6 and CommonJS syntaxes. These examples include the German dictionary. - - --- - ##### npm: ECMAScript 6 syntax - - - import "devextreme/localization/globalize/number"; - import "devextreme/localization/globalize/date"; - import "devextreme/localization/globalize/currency"; - import "devextreme/localization/globalize/message"; - - // Dictionaries for the German language - import deMessages from "devextreme/localization/messages/de.json"; - - // Common and language-specific CLDR JSONs - import supplemental from "devextreme-cldr-data/supplemental.json"; - import deCldrData from "devextreme-cldr-data/de.json"; - - import Globalize from "globalize"; - - // ===== Angular ====== - export class AppComponent { - constructor() { - Globalize.load( - supplemental, deCldrData - ); - Globalize.loadMessages(deMessages); - Globalize.locale(navigator.language); - } - } - - // ===== Vue ====== - export default { - created() { - Globalize.load( - supplemental, deCldrData - ); - Globalize.loadMessages(deMessages); - Globalize.locale(navigator.language); - } - } - - // ===== React ====== - class App extends React.Component { - constructor(props) { - super(props); - Globalize.load( - supplemental, deCldrData - ); - Globalize.loadMessages(deMessages); - Globalize.locale(navigator.language); - } - } - - ##### npm: CommonJS syntax - - - require('devextreme/localization/globalize/message'); - require('devextreme/localization/globalize/number'); - require('devextreme/localization/globalize/currency'); - require('devextreme/localization/globalize/date'); - - // Dictionaries for the German language - const deMessages = require('devextreme/localization/messages/de.json'); - - const Globalize = require('globalize'); - Globalize.load( - // Common and language-specific CLDR JSONs - require('devextreme-cldr-data/supplemental.json'), - require('devextreme-cldr-data/main/de.json') - ); - - Globalize.loadMessages(deMessages); - - Globalize.locale(navigator.language); - - --- - - #include common-demobutton with { - url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Localization/UsingGlobalize/" - } - -You can format and localize strings, numbers, dates, and currencies automatically according to a locale. For this, apply the **format**.[type](/api-reference/50%20Common/Object%20Structures/format/type.md '/Documentation/ApiReference/Common/Object_Structures/Format/#type') property. You can also use a currency other than USD (see the last example in the [Using Intl](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/05%20Using%20Intl.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Intl') topic). - -In addition, you can now format values using structures accepted by numberFormatter, currencyFormatter, and dateFormatter, for example: - ---- -##### jQuery - - - $(function() { - $("#dataGridContainer").dxDataGrid({ - // ... - columns: [{ - dataField: "OrderDate", - format: { skeleton: "yMMMd" } - }, { - dataField: "SaleAmount", - format: { currency: "EUR", maximumFractionDigits: 2 } - }] - }); - }); - -##### Angular - - - - - - - - - - - import { Component } from '@angular/core'; - // ... - // import dictionaries and localization modules here - - @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] - }) - export class AppComponent { - // ... - } - - - import { BrowserModule } from '@angular/platform-browser'; - import { NgModule } from '@angular/core'; - import { AppComponent } from './app.component'; - - import { DxDataGridModule } from 'devextreme-angular'; - - @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - DxDataGridModule - ], - providers: [ ], - bootstrap: [AppComponent] - }) - export class AppModule { } - -##### Vue - - - - - - -##### React - - - import React from 'react'; - - import 'devextreme/dist/css/dx.fluent.blue.light.css'; - - import DataGrid, { - Column - } from 'devextreme-react/data-grid'; - // ... - // import dictionaries and localization modules here - - class App extends React.Component { - constructor(props) { - super(props); - // ... - } - - render() { - return ( - - - - ); - } - } - export default App; - ---- - - -#####See Also##### -- [Value Formatting](/concepts/Common/Value%20Formatting '/Documentation/Guide/Common/Value_Formatting') diff --git a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/Localize Dates, Numbers, and Currencies.md b/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/Localize Dates, Numbers, and Currencies.md deleted file mode 100644 index 1f54f62122..0000000000 --- a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/Localize Dates, Numbers, and Currencies.md +++ /dev/null @@ -1 +0,0 @@ -DevExtreme enables you to localize date, number and currency values using Intl or Globalize. We recommend using Intl because it is supported out of the box. You can use Globalize instead if the target browser do not support Intl natively or via a polyfill, or if your app is already using Globalize. diff --git a/concepts/Common/Localization/15 Localize Custom Values.md b/concepts/Common/Localization/15 Localize Custom Values.md deleted file mode 100644 index e17dbcdc78..0000000000 --- a/concepts/Common/Localization/15 Localize Custom Values.md +++ /dev/null @@ -1,5 +0,0 @@ -DevExtreme provides an [API](/api-reference/50%20Common/utils/localization '/Documentation/ApiReference/Common/utils/localization/') for localizing messages, dates, and numbers in your app. - -To localize a message, add it to a dictionary as shown in the [Add Strings to a Dictionary](/concepts/Common/Localization/01%20Dictionaries/05%20Add%20Strings%20to%20a%20Dictionary.md '/Documentation/Guide/Common/Localization/#Dictionaries/Add_Strings_to_a_Dictionary') article. - -To localize a custom date or number, apply a format to it as shown in the [Format Custom Values](/concepts/Common/Value%20Formatting/40%20Format%20Custom%20Values.md '/Documentation/Guide/Common/Value_Formatting/#Format_Custom_Values') article. \ No newline at end of file diff --git a/concepts/Common/Localization/Localization.md b/concepts/Common/Localization/Localization.md deleted file mode 100644 index 787d32aa58..0000000000 --- a/concepts/Common/Localization/Localization.md +++ /dev/null @@ -1,8 +0,0 @@ -Localization adapts your application to linguistic and regional differences. DevExtreme allows you to localize: - -- Messages (using [dictionaries](/concepts/Common/Localization/01%20Dictionaries '/Documentation/Guide/Common/Localization/#Dictionaries')) -- Numbers, dates, and currencies (using [Intl](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/05%20Using%20Intl.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Intl') or [Globalize](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/10%20Using%20Globalize.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Globalize')). - -DevExtreme also supports [right-to-left layout](/concepts/Common/Localization/20%20Right-to-Left%20Support.md '/Documentation/Guide/Common/Localization/#Right-to-Left_Support'). - -[note] Refer to the Intl and Using Globalize articles if you are localizing DevExtreme ASP.NET MVC Controls. diff --git a/concepts/Common/Value Formatting/10 Format UI Component Values/10 Predefined Formats.md b/concepts/Common/Value Formatting/10 Format UI Component Values/10 Predefined Formats.md deleted file mode 100644 index e7672bf56b..0000000000 --- a/concepts/Common/Value Formatting/10 Format UI Component Values/10 Predefined Formats.md +++ /dev/null @@ -1,122 +0,0 @@ -Predefined formats are string literals for formatting numbers and dates. See the **format**.[type](/api-reference/50%20Common/Object%20Structures/format/type.md '/Documentation/ApiReference/Common/Object_Structures/Format/#type') description for a full list. - -Set the **format** UI component property to apply a predefined format. In the following code, this property specifies the format and precision of the tooltip's value in the Slider UI component. The value contains two decimal digits when the precision value is 2. - ---- -##### jQuery - - - $(function() { - $("#sliderContainer").dxSlider({ - min: 0, max: 10, - value: 6, step: 0.01, - tooltip: { - enabled: true, - format: { - type: "fixedPoint", - precision: 2 - } - } - }); - }); - -##### Angular - - - - - - - - - - - import { DxSliderModule } from "devextreme-angular"; - // ... - export class AppComponent { - sliderValue: number = 6; - } - @NgModule({ - imports: [ - // ... - DxSliderModule - ], - // ... - }) - -##### Vue - - - - - - -##### React - - - import React from 'react'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; - - import Slider, { - Tooltip, - Format - } from 'devextreme-react/slider'; - - export default function App() { - return ( - - - - - - ); - } - ---- - -The **format** property in the previous example is specified with an object which allows you to specify the precision. However, you can specify the **format** property with a string literal if this is not required. - -#####See Also##### -- [RangeSelector Formatting Demo](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/CustomFormatting/) diff --git a/concepts/Common/Value Formatting/10 Format UI Component Values/15 Intl Formats.md b/concepts/Common/Value Formatting/10 Format UI Component Values/15 Intl Formats.md deleted file mode 100644 index 74d040d50b..0000000000 --- a/concepts/Common/Value Formatting/10 Format UI Component Values/15 Intl Formats.md +++ /dev/null @@ -1,125 +0,0 @@ -Intl is the short name used to refer to a particular ECMAScript Internationalization API object. DevExtreme supports this API and its value formatting capabilities out of the box. - -A UI component's **format** property is compatible with the `options` parameter of the Intl.NumberFormat and Intl.DateTimeFormat. To apply an Intl format, specify the `options` parameter's fields in the **format** property: - ---- -##### jQuery - - - $(function() { - $("#dataGridContainer").dxDataGrid({ - // ... - columns: [{ - dataField: "OrderDate", - format: { year: "2-digit", month: "narrow", day: "2-digit" } - }, { - dataField: "SaleAmount", - format: { style: "currency", currency: "EUR", useGrouping: true, minimumSignificantDigits: 3 } - }] - }); - }); - -##### Angular - - - - - - - - - - - import { BrowserModule } from '@angular/platform-browser'; - import { NgModule } from '@angular/core'; - import { AppComponent } from './app.component'; - - import { DxDataGridModule } from 'devextreme-angular'; - - @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - DxDataGridModule - ], - providers: [], - bootstrap: [AppComponent] - }) - export class AppModule { } - -##### Vue - - - - - - -##### React - - - import React from 'react'; - - import 'devextreme/dist/css/dx.fluent.blue.light.css'; - - import DataGrid, { - Column - } from 'devextreme-react/data-grid'; - - class App extends React.Component { - orderDateFormat = { year: '2-digit', month: 'narrow', day: '2-digit' }; - saleAmountFormat = { style: 'currency', currency: 'EUR', useGrouping: true, minimumSignificantDigits: 3 }; - - render() { - return ( - - - - - ); - } - } - export default App; - ---- \ No newline at end of file diff --git a/concepts/Common/Value Formatting/10 Format UI Component Values/30 Custom Function.md b/concepts/Common/Value Formatting/10 Format UI Component Values/30 Custom Function.md deleted file mode 100644 index 5f4fdbc246..0000000000 --- a/concepts/Common/Value Formatting/10 Format UI Component Values/30 Custom Function.md +++ /dev/null @@ -1,119 +0,0 @@ -A custom function is useful when advanced formatting is required. The value to be formatted is passed to the function as the argument. In the following example, a custom function combines absolute and percentage values for the Slider UI component's tooltip: - ---- -##### jQuery - - - $(function() { - var sliderMaxValue = 10; - - $("#sliderContainer").dxSlider({ - min: 0, max: sliderMaxValue, - value: 6, step: 0.01, - tooltip: { - enabled: true, - format: function (value) { - return value + " | " + ((value / sliderMaxValue) * 100).toFixed(1) + "%"; - } - } - }); - }); - -##### Angular - - - - - - - - - import { DxSliderModule } from "devextreme-angular"; - // ... - export class AppComponent { - sliderValue = 6; - sliderMaxValue = 10; - formatSliderTooltip (value) { - return value + " | " + ((value / this.sliderMaxValue) * 100).toFixed(1) + "%"; - } - } - @NgModule({ - imports: [ - // ... - DxSliderModule - ], - // ... - }) - -##### Vue - - - - - - -##### React - - - import React, { useCallback } from 'react'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; - - import Slider, { - Tooltip - } from 'devextreme-react/slider'; - - export default function App() { - const sliderMaxValue = 10; - const formatSliderTooltip = useCallback((value) => { - return value + " | " + ((value / sliderMaxValue) * 100).toFixed(1) + "%"; - }, []); - - return ( - - - - ); - } - ---- diff --git a/concepts/Common/Value Formatting/40 Format Custom Values.md b/concepts/Common/Value Formatting/40 Format Custom Values.md deleted file mode 100644 index d65ae8e214..0000000000 --- a/concepts/Common/Value Formatting/40 Format Custom Values.md +++ /dev/null @@ -1,94 +0,0 @@ -DevExtreme provides an [API](/api-reference/50%20Common/utils/localization '/Documentation/ApiReference/Common/utils/localization/') for formatting any date or number in your app. The following example shows how to format dates. The [formatDate()](/api-reference/50%20Common/utils/localization/formatDate(value_format).md '/Documentation/ApiReference/Common/utils/localization/#formatDatevalue_format') method applies a [predefined format](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/10%20Predefined%20Formats.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Predefined_Formats') to a date. A [custom function](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/30%20Custom%20Function.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Function') or [format string](/concepts/Common/Value%20Formatting/10%20Format%20UI%20Component%20Values/20%20Custom%20Format%20String.md '/Documentation/Guide/Common/Value_Formatting/#Format_UI_Component_Values/Custom_Format_String') can be applied instead. The result is a string. This string is then converted back to a date using the [parseDate()](/api-reference/50%20Common/utils/localization/parseDate(text_format).md '/Documentation/ApiReference/Common/utils/localization/#parseDatetext_format') method. - ---- -##### jQuery - - - $(function() { - var date = new Date(); - $("#dateInput").val(DevExpress.localization.formatDate(date, "shortDate")); - $("#dateInput").change(function(event) { - date = DevExpress.localization.parseDate(event.target.value, "shortDate"); - }); - }); - - - - -##### Angular - - - import { formatDate, parseDate } from "devextreme/localization"; - // ... - export class AppComponent { - _date: Date = new Date(); - get date() { - return formatDate(this._date, "shortDate"); - } - set date(value) { - this._date = parseDate(value, "shortDate"); - } - } - - - - -##### Vue - - - - - - -##### React - - - import React, { useState, useCallback } from "react"; - import { formatDate, parseDate } from "devextreme/localization"; - - export default function App() { - const [date, setDate] = useState(new Date()); - const getFormattedDate = useCallback(() => { - return formatDate(date, "shortDate") - }, [date]); - const setParsedDate = useCallback((event) => { - setDate(parseDate(event.target.value, "shortDate")); - }, []); - - return ( - - ); - } - - ---- - -Similarly, you can use the [formatNumber()](/api-reference/50%20Common/utils/localization/formatNumber(value_format).md '/Documentation/ApiReference/Common/utils/localization/#formatNumbervalue_format') and [parseNumber()](/api-reference/50%20Common/utils/localization/parseNumber(text_format).md '/Documentation/ApiReference/Common/utils/localization/#parseNumbertext_format') methods to format and parse a number or currency. diff --git a/concepts/Common/Value Formatting/Value Formatting.md b/concepts/Common/Value Formatting/Value Formatting.md deleted file mode 100644 index 4dc1202d18..0000000000 --- a/concepts/Common/Value Formatting/Value Formatting.md +++ /dev/null @@ -1 +0,0 @@ -This article describes the API used to apply a format to date and numeric values. The specified format is the same in any locale unless [Intl](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/05%20Using%20Intl.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Intl') or [Globalize](/concepts/Common/Localization/05%20Localize%20Dates%2C%20Numbers%2C%20and%20Currencies/10%20Using%20Globalize.md '/Documentation/Guide/Common/Localization/#Localize_Dates_Numbers_and_Currencies/Using_Globalize') is used. \ No newline at end of file
Q - A quarter number or name.
+ A quarter number or name.
Available combinations with example: "Q" - "2", "QQ" - "02", "QQQ" - "Q2" and "QQQQ" - "2nd quarter".
M - A month number or name.
+ A month number or name.
Available combinations with example: "M" - "9", "MM" - "09", "MMM" - "Sep", "MMMM" - "September", "MMMMM" - "S".
E - A week day name.
+ A week day name.
Available combinations with example: "E", "EE" or "EEE" - "Tue", "EEEE" - "Tuesday", "EEEEE" - "T".