-
-
-
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function ($scope) {
- // ...
- });
-
-#####Knockout
-
-
-
-
-
-
-
-
-
-
-
- var viewModel = {
- // ...
- };
-
- ko.applyBindings(viewModel);
-
#####React
diff --git a/api-reference/10 UI Components/UI Events/UI Events.md b/api-reference/10 UI Components/UI Events/UI Events.md
index 8c157ca20b..d2b0f8ddc0 100644
--- a/api-reference/10 UI Components/UI Events/UI Events.md
+++ b/api-reference/10 UI Components/UI Events/UI Events.md
@@ -47,39 +47,4 @@ See
-
-
-
-
- Target element
-
-
-
- var viewModel = {
- dxholdHandler: function(viewModel, jQueryEvent) {
- alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
- }
- }
-
-[note]Knockout does not provide an API to unsubscribe from an event.
-
-See Knockout documentation for details.
-
-##### AngularJS
-
-
-
- Target element
-
-
-
- angular.module("DemoApp", ["dx"])
- .controller("DemoController", function DemoController($scope) {
- $scope.dxholdHandler = function(jQueryEvent) {
- alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
- }
- });
-
-[note]AngularJS does not provide an API to unsubscribe from an event.
-
---
\ No newline at end of file
diff --git a/api-reference/50 Common/Object Structures/BarGaugeBarInfo/BarGaugeBarInfo.md b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/BarGaugeBarInfo.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/BarGaugeBarInfo/BarGaugeBarInfo.md
rename to api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/BarGaugeBarInfo.md
diff --git a/api-reference/50 Common/Object Structures/BarGaugeBarInfo/color.md b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/color.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/BarGaugeBarInfo/color.md
rename to api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/color.md
diff --git a/api-reference/50 Common/Object Structures/BarGaugeBarInfo/index.md b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/index.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/BarGaugeBarInfo/index.md
rename to api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/index.md
diff --git a/api-reference/50 Common/Object Structures/BarGaugeBarInfo/value.md b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/value.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/BarGaugeBarInfo/value.md
rename to api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeBarInfo/value.md
diff --git a/api-reference/50 Common/Object Structures/BarGaugeLegendItem/BarGaugeLegendItem.md b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeLegendItem/BarGaugeLegendItem.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/BarGaugeLegendItem/BarGaugeLegendItem.md
rename to api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeLegendItem/BarGaugeLegendItem.md
diff --git a/api-reference/50 Common/Object Structures/BarGaugeLegendItem/item.md b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeLegendItem/item.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/BarGaugeLegendItem/item.md
rename to api-reference/10 UI Components/dxBarGauge/7 Interfaces/BarGaugeLegendItem/item.md
diff --git a/api-reference/10 UI Components/dxBarGauge/7 Interfaces/Interfaces.md b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/Interfaces.md
new file mode 100644
index 0000000000..37c9b1974a
--- /dev/null
+++ b/api-reference/10 UI Components/dxBarGauge/7 Interfaces/Interfaces.md
@@ -0,0 +1,5 @@
+---
+##### shortDescription
+This section describes interfaces that the {WidgetName} component uses.
+
+---
diff --git a/api-reference/10 UI Components/dxButton/1 Configuration/validationGroup.md b/api-reference/10 UI Components/dxButton/1 Configuration/validationGroup.md
index 09f1148d8c..744c3183cd 100644
--- a/api-reference/10 UI Components/dxButton/1 Configuration/validationGroup.md
+++ b/api-reference/10 UI Components/dxButton/1 Configuration/validationGroup.md
@@ -8,7 +8,9 @@ default: undefined
Specifies the name of the [validation group](/api-reference/10%20UI%20Components/dxValidationGroup '/Documentation/ApiReference/UI_Components/dxValidationGroup/') to be accessed in the [click](/api-reference/10%20UI%20Components/dxButton/4%20Events/click.md '/Documentation/ApiReference/UI_Components/dxButton/Events/#click') event handler.
---
-When using a button to validate several editors on a page, the button must "know" in which validation group these editors are located. If the Knockout or AngularJS approach is used, add the button to the **div** element that represents the target validation group. When using the jQuery approach, specify the **validationGroup** configuration property for the button. Assign the validation group name specified for the **validationGroup** property of the [validators](/api-reference/10%20UI%20Components/dxValidator '/Documentation/ApiReference/UI_Components/dxValidator/') that extend the editors to be validated.
+When using a button to validate several editors on a page, the button must "know" in which validation group these editors are located.
+
+Specify the **validationGroup** configuration property for the button. Assign the validation group name specified for the **validationGroup** property of the [validators](/api-reference/10%20UI%20Components/dxValidator '/Documentation/ApiReference/UI_Components/dxValidator/') that extend the editors to be validated.
#####See Also#####
- [Validate Several Editor Values](/concepts/05%20UI%20Components/zz%20Common/05%20UI%20Widgets/20%20Data%20Validation/20%20Validate%20Several%20Editor%20Values '/Documentation/Guide/UI_Components/Common/UI_Widgets/Data_Validation/#Validate_Several_Editor_Values')
\ No newline at end of file
diff --git a/api-reference/10 UI Components/dxDiagram/1 Configuration/onRequestEditOperation.md b/api-reference/10 UI Components/dxDiagram/1 Configuration/onRequestEditOperation.md
index b8d7a53c07..7238498944 100644
--- a/api-reference/10 UI Components/dxDiagram/1 Configuration/onRequestEditOperation.md
+++ b/api-reference/10 UI Components/dxDiagram/1 Configuration/onRequestEditOperation.md
@@ -96,7 +96,7 @@ For more information, refer to the following section: [Prohibit Individual Opera
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/OperationRestrictions/jQuery/Light/"
}
-When a user pastes or clones several items in a diagram, the control adds the items to the model one by one. For each added item, the **RequestEditOperation** event fires. In the event handler, you can access the processed item. However, if you call the [getItemById(id)](/api-reference/10%20UI%20Components/dxDiagram/3%20Methods/getItemById(id).md '/Documentation/ApiReference/UI_Components/dxDiagram/Methods/#getItemByIdid') method to access an attached connector (see the [attachedConnectorIds](/api-reference/50%20Common/Object%20Structures/dxDiagramShape/attachedConnectorIds.md '/Documentation/ApiReference/Common/Object_Structures/dxDiagramShape/#attachedConnectorIds') property) or a container's child item (see the [containerChildItemIds](/api-reference/50%20Common/Object%20Structures/dxDiagramShape/containerChildItemIds.md '/Documentation/ApiReference/Common/Object_Structures/dxDiagramShape/#containerChildItemIds') property), you can get the `undefined`result if the item is not added to the model yet.
+When a user pastes or clones several items in a diagram, the control adds the items to the model one by one. For each added item, the **RequestEditOperation** event fires. In the event handler, you can access the processed item. However, if you call the [getItemById(id)](/api-reference/10%20UI%20Components/dxDiagram/3%20Methods/getItemById(id).md '/Documentation/ApiReference/UI_Components/dxDiagram/Methods/#getItemByIdid') method to access an attached connector (see the [attachedConnectorIds](/api-reference/50%20Common/Object%20Structures/dxDiagramShape/attachedConnectorIds.md '/Documentation/ApiReference/UI_Components/dxDiagram/Interfaces/dxDiagramShape/#attachedConnectorIds') property) or a container's child item (see the [containerChildItemIds](/api-reference/50%20Common/Object%20Structures/dxDiagramShape/containerChildItemIds.md '/Documentation/ApiReference/UI_Components/dxDiagram/Interfaces/dxDiagramShape/#containerChildItemIds') property), you can get the `undefined`result if the item is not added to the model yet.
#####See Also#####
- [Restrict Edit Operations](/concepts/05%20UI%20Components/Diagram/28%20Restrict%20Edit%20Operations '/Documentation/Guide/UI_Components/Diagram/Restrict_Edit_Operations')
\ No newline at end of file
diff --git a/api-reference/10 UI Components/dxDiagram/1 Configuration/onSelectionChanged.md b/api-reference/10 UI Components/dxDiagram/1 Configuration/onSelectionChanged.md
index bf38087cb0..041d67169c 100644
--- a/api-reference/10 UI Components/dxDiagram/1 Configuration/onSelectionChanged.md
+++ b/api-reference/10 UI Components/dxDiagram/1 Configuration/onSelectionChanged.md
@@ -17,7 +17,7 @@ The UI component instance's name.
#include common-ref-elementparam with { element: "UI component" }
##### field(e.items): Array
-
-
-
- .custom-item {
- font-size: 16px;
- }
-
-##### Knockout
-
-
-
-
-
-
-
-
-
-
-
- .custom-item {
- font-size: 16px;
- }
-
##### Vue
diff --git a/api-reference/50 Common/Object Structures/FileSystemError/FileSystemError.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/FileSystemError.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemError/FileSystemError.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/FileSystemError.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemError/errorCode.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/errorCode.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemError/errorCode.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/errorCode.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemError/errorText.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/errorText.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemError/errorText.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/errorText.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemError/fileSystemItem.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/fileSystemItem.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemError/fileSystemItem.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemError/fileSystemItem.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/Fields.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/Fields.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/Fields.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/Fields.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/dataItem.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/dataItem.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/dataItem.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/dataItem.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/dateModified.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/dateModified.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/dateModified.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/dateModified.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/hasSubDirectories.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/hasSubDirectories.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/hasSubDirectories.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/hasSubDirectories.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/isDirectory.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/isDirectory.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/isDirectory.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/isDirectory.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/key.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/key.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/key.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/key.md
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/name.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/name.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/name.md
rename to api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/name.md
diff --git a/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/path.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/path.md
new file mode 100644
index 0000000000..c73d925f89
--- /dev/null
+++ b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/path.md
@@ -0,0 +1,13 @@
+---
+id: FileSystemItem.path
+type: String
+---
+---
+##### shortDescription
+The file system item's path.
+
+---
+The **path** field stores a path to a file/directory as a string of path items separated by a slash. The [pathKeys](/Documentation/ApiReference/UI_Components/dxFileManager/Interfaces/FileSystemItem/Fields/#pathKeys) field stores an array of path item keys. This difference between the fields is more distinct if you specify [keyExpr](/api-reference/10%20UI%20Components/dxFileManager/5%20File%20System%20Providers/FileSystemProviderBase/1%20Configuration/keyExpr.md '/Documentation/ApiReference/UI_Components/dxFileManager/File_System_Providers/Custom/Configuration/#keyExpr') for your File System Provider. For example, the path and pathkeys fields may have the following values if **keyExpr** targets a numeric field:
+
+ path: "Documents/Todo.txt"
+ pathkeys: [10, 20]
\ No newline at end of file
diff --git a/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/pathKeys.md b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/pathKeys.md
new file mode 100644
index 0000000000..92e2662bfd
--- /dev/null
+++ b/api-reference/10 UI Components/dxFileManager/7 Interfaces/FileSystemItem/2 Fields/pathKeys.md
@@ -0,0 +1,13 @@
+---
+id: FileSystemItem.pathKeys
+type: Array
-
-
-
-
-
-
-
Subject
- 'text'. Corresponds to the SchedulerAppointment.text property.
+ 'text'. Corresponds to the SchedulerAppointment.text property.
Start Date
- 'startDate'. Corresponds to the SchedulerAppointment.startDate property.
+ 'startDate'. Corresponds to the SchedulerAppointment.startDate property.
End Date
- 'endDate'. Corresponds to the SchedulerAppointment.endDate property.
+ 'endDate'. Corresponds to the SchedulerAppointment.endDate property.
All Day
@@ -76,7 +76,7 @@ The table below lists 'mainGroup' editor names:
Description
- 'description'. Corresponds to the SchedulerAppointment.description property.
+ 'description'. Corresponds to the SchedulerAppointment.description property.
diff --git a/api-reference/10 UI Components/dxScheduler/1 Configuration/resources/dataSource.md b/api-reference/10 UI Components/dxScheduler/1 Configuration/resources/dataSource.md
index aae76d4e16..82f4aa4d90 100644
--- a/api-reference/10 UI Components/dxScheduler/1 Configuration/resources/dataSource.md
+++ b/api-reference/10 UI Components/dxScheduler/1 Configuration/resources/dataSource.md
@@ -189,6 +189,6 @@ Review the following notes about data binding:
- Data field names cannot be equal to `this` and should not contain the following characters: `.`, `:`, `[`, and `]`.
-- The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or **DataSource** and assign it to the **dataSource** property as shown in the articles about changing properties in [jQuery](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/05%20Get%20and%20Set%20Properties/00%20Get%20and%20Set%20Properties.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties'), [Angular](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding'), [React](/concepts/50%20React%20Components/20%20State%20Management/3%20Controlled%20Mode.md '/Documentation/Guide/React_Components/State_Management/#Controlled_Mode'), and [Vue](/concepts/55%20Vue%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding').
+#include api-dataSource-stores-are-immutable
[/note]
diff --git a/api-reference/10 UI Components/dxScheduler/1 Configuration/timeZone.md b/api-reference/10 UI Components/dxScheduler/1 Configuration/timeZone.md
index d0cbba6857..d14106423f 100644
--- a/api-reference/10 UI Components/dxScheduler/1 Configuration/timeZone.md
+++ b/api-reference/10 UI Components/dxScheduler/1 Configuration/timeZone.md
@@ -10,7 +10,7 @@ Specifies the time zone for the Scheduler's grid. Accepts values from the
@@ -161,7 +161,7 @@ An edit mode for recurring appointments.
// ...
];
-#####React
+##### React
import React, { useCallback } from 'react';
diff --git a/api-reference/10 UI Components/dxScheduler/7 Interfaces/Interfaces.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/Interfaces.md
new file mode 100644
index 0000000000..37c9b1974a
--- /dev/null
+++ b/api-reference/10 UI Components/dxScheduler/7 Interfaces/Interfaces.md
@@ -0,0 +1,5 @@
+---
+##### shortDescription
+This section describes interfaces that the {WidgetName} component uses.
+
+---
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/allDay.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/allDay.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/allDay.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/allDay.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/component.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/component.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/component.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/component.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/description.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/description.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/description.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/description.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/disabled.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/disabled.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/disabled.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/disabled.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/dxSchedulerAppointment.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/dxSchedulerAppointment.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/dxSchedulerAppointment.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/dxSchedulerAppointment.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/endDate.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/endDate.md
similarity index 78%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/endDate.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/endDate.md
index 55795a9629..9ecdf6dd07 100644
--- a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/endDate.md
+++ b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/endDate.md
@@ -14,4 +14,4 @@ We recommend that you specify appointment dates in IANA time zone database.
+Specifies the time zone for an appointment's [endDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/endDate.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#endDate'). Accepts values from the IANA time zone database.
---
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/html.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/html.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/html.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/html.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/recurrenceException.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/recurrenceException.md
similarity index 89%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/recurrenceException.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/recurrenceException.md
index a836c9ea2d..3e1c134735 100644
--- a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/recurrenceException.md
+++ b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/recurrenceException.md
@@ -4,7 +4,7 @@ type: String
---
---
##### shortDescription
-Specifies the start date and time of one or more appointments to exclude from a series. This property requires that you also set [recurrenceRule](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/recurrenceRule.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#recurrenceRule').
+Specifies the start date and time of one or more appointments to exclude from a series. This property requires that you also set [recurrenceRule](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/recurrenceRule.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#recurrenceRule').
---
#include common-demobutton with {
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/recurrenceRule.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/recurrenceRule.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/recurrenceRule.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/recurrenceRule.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/render.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/render.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/render.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/render.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/startDate.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/startDate.md
similarity index 78%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/startDate.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/startDate.md
index 19ddfc674f..5a70c2d664 100644
--- a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/startDate.md
+++ b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/startDate.md
@@ -14,4 +14,4 @@ We recommend that you specify appointment dates in IANA time zone database.
+
+---
+
+
+
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/template.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/template.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/template.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/template.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/text.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/text.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/text.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/text.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/visible.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/visible.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerAppointment/visible.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerAppointment/visible.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerTimeZone/dxSchedulerTimeZone.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/dxSchedulerTimeZone.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerTimeZone/dxSchedulerTimeZone.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/dxSchedulerTimeZone.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerTimeZone/id.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/id.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerTimeZone/id.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/id.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerTimeZone/offset.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/offset.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerTimeZone/offset.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/offset.md
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerTimeZone/title.md b/api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/title.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/dxSchedulerTimeZone/title.md
rename to api-reference/10 UI Components/dxScheduler/7 Interfaces/dxSchedulerTimeZone/title.md
diff --git a/api-reference/10 UI Components/dxScrollable/dxScrollable.md b/api-reference/10 UI Components/dxScrollable/dxScrollable.md
index d103f208e6..cf4314550f 100644
--- a/api-reference/10 UI Components/dxScrollable/dxScrollable.md
+++ b/api-reference/10 UI Components/dxScrollable/dxScrollable.md
@@ -13,10 +13,4 @@ A UI component used to display scrollable content.
dx.web.js, dx.all.js
---
-The **Scrollable** UI component represents a scrollable field that shows the data located inside the HTML element representing the UI component.
-
-This UI component, like any other DevExtreme UI component, can be created using one of three possible approaches: [jQuery](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/01%20Create%20and%20Configure%20a%20Component.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Create_and_Configure_a_Component'), [Knockout](/concepts/Getting%20Started/Widget%20Basics%20-%20AngularJS/01%20Create%20and%20Configure%20a%20Widget.md '/Documentation/Guide/Getting_Started/Widget_Basics_-_AngularJS/Create_and_Configure_a_Widget/') or [AngularJS](/concepts/Getting%20Started/Widget%20Basics%20-%20Knockout/01%20Create%20and%20Configure%20a%20Widget.md '/Documentation/Guide/Getting_Started/Widget_Basics_-_Knockout/Create_and_Configure_a_Widget/'). The following code demonstrates how to create the **Scrollable** UI component using the Knockout approach.
-
-
----
----
-##### shortDescription
-The file system item's path specified in keys.
-
----
-The [pathKeys](/api-reference/50%20Common/Object%20Structures/FileSystemItem/2%20Fields/pathKeys.md '/Documentation/ApiReference/Common/Object_Structures/FileSystemItem/Fields/#pathKeys') field stores a path to a file/directory as a string of path items separated by a slash. The **pathKeys** field stores an array of path item keys. This difference between the fields is more distinct if you specify [keyExpr](/api-reference/10%20UI%20Components/dxFileManager/5%20File%20System%20Providers/FileSystemProviderBase/1%20Configuration/keyExpr.md '/Documentation/ApiReference/UI_Components/dxFileManager/File_System_Providers/Custom/Configuration/#keyExpr') for your File System Provider. For example, the path and pathkeys fields may have the following values if **keyExpr** targets a numeric field:
-
- path: "Documents/Todo.txt"
- pathkeys: [10, 20]
\ No newline at end of file
diff --git a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/startDateTimeZone.md b/api-reference/50 Common/Object Structures/dxSchedulerAppointment/startDateTimeZone.md
deleted file mode 100644
index 6b1b93e3b2..0000000000
--- a/api-reference/50 Common/Object Structures/dxSchedulerAppointment/startDateTimeZone.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-id: dxSchedulerAppointment.startDateTimeZone
-type: String
----
----
-##### shortDescription
-Specifies the time zone for an appointment's [startDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/startDate.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#startDate'). Accepts values from the IANA time zone database.
-
----
-
-
-
diff --git a/api-reference/_hidden/GridBaseColumn/editorOptions.md b/api-reference/_hidden/GridBaseColumn/editorOptions.md
index f935bb06d1..62a1d8f9ab 100644
--- a/api-reference/_hidden/GridBaseColumn/editorOptions.md
+++ b/api-reference/_hidden/GridBaseColumn/editorOptions.md
@@ -39,11 +39,11 @@ The default editor UI component depends on the column configuration. The followi
-Because of this dependency, **editorOptions** cannot be typed and are not implemented as nested configuration components in Angular, Vue, and React. In these frameworks, specify **editorOptions** with an object. We recommend that you declare the object outside the configuration component in Vue and React to prevent possible issues caused by unnecessary re-rendering.
-
---
##### Angular
+Because of this dependency, **editorOptions** cannot be typed and are not implemented as nested configuration components. Specify **editorOptions** with an object.
+
@@ -104,6 +106,8 @@ Because of this dependency, **editorOptions** cannot be typed and are not implem
##### React
+Because of this dependency, **editorOptions** cannot be typed and are not implemented as nested configuration components. Specify **editorOptions** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
import React from 'react';
diff --git a/api-reference/_hidden/dxFileManagerToolbar/fileSelectionItems/options.md b/api-reference/_hidden/dxFileManagerToolbar/fileSelectionItems/options.md
index bf3ed447e8..cc5c15bfe1 100644
--- a/api-reference/_hidden/dxFileManagerToolbar/fileSelectionItems/options.md
+++ b/api-reference/_hidden/dxFileManagerToolbar/fileSelectionItems/options.md
@@ -1,5 +1,108 @@
-#include uiwidgets-nestedtoolbar-widgetoptions-fulldesc with {
- nestedOption: "fileSelectionItems",
- nestedOptionKebabCase: "file-selection-item",
- nestedOptionImport: "FileSelectionItem"
-}
\ No newline at end of file
+---
+##### Angular
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget]({basewidgetpath}/Configuration/toolbar/fileSelectionItems/#widget) property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object.
+
+
+
+
+
+
+
+
+
+
+ import { BrowserModule } from '@angular/platform-browser';
+ import { NgModule } from '@angular/core';
+ import { AppComponent } from './app.component';
+
+ import { Dx{WidgetName}Module } from 'devextreme-angular';
+
+ @NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ Dx{WidgetName}Module
+ ],
+ providers: [ ],
+ bootstrap: [AppComponent]
+ })
+ export class AppModule { }
+
+##### Vue
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget]({basewidgetpath}/Configuration/toolbar/fileSelectionItems/#widget) property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
+
+
+
+
+
+
+
+
+
+
+##### React
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget]({basewidgetpath}/Configuration/toolbar/fileSelectionItems/#widget) property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
+
+ import React from 'react';
+
+ import 'devextreme/dist/css/dx.light.css';
+
+ import {WidgetName}, {
+ Toolbar,
+ FileSelectionItem
+ } from 'devextreme-react/{widget-name}';
+
+ class App extends React.Component {
+ checkBoxOptions = { text: 'Show IDs' };
+
+ render() {
+ return (
+ <{WidgetName} ... >
+
+
+
+ );
+ }
+ }
+ export default App;
+
+---
+
+[note]If you use the Menu UI component as a toolbar item, the [adaptivityEnabled](/api-reference/10%20UI%20Widgets/dxMenu/1%20Configuration/adaptivityEnabled.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#adaptivityEnabled') property does not apply.
\ No newline at end of file
diff --git a/api-reference/_hidden/dxFileManagerToolbar/items/options.md b/api-reference/_hidden/dxFileManagerToolbar/items/options.md
index c82ab87647..a006371974 100644
--- a/api-reference/_hidden/dxFileManagerToolbar/items/options.md
+++ b/api-reference/_hidden/dxFileManagerToolbar/items/options.md
@@ -1,5 +1,117 @@
-#include uiwidgets-nestedtoolbar-widgetoptions-fulldesc with {
- nestedOption: "items",
- nestedOptionKebabCase: "item",
- nestedOptionImport: "Item"
-}
\ No newline at end of file
+---
+##### Angular
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/_hidden/dxFileManagerToolbarItem/widget.md '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/toolbar/items/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object.
+
+
+
+
+
+
+
+ ...
+
+
+
+ import { BrowserModule } from '@angular/platform-browser';
+ import { NgModule } from '@angular/core';
+ import { AppComponent } from './app.component';
+
+ import { DxFileManagerModule } from 'devextreme-angular';
+
+ @NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ DxFileManagerModule
+ ],
+ providers: [ ],
+ bootstrap: [AppComponent]
+ })
+ export class AppModule { }
+
+##### Vue
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/_hidden/dxFileManagerToolbarItem/widget.md '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/toolbar/items/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
+
+
+
+
+
+
+
+
+
+
+##### React
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/_hidden/dxFileManagerToolbarItem/widget.md '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/toolbar/items/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
+
+ import React from 'react';
+
+ import 'devextreme/dist/css/dx.light.css';
+
+ import FileManager, {
+ Toolbar
+ } from 'devextreme-react/file-manager';
+
+ const App = () => {
+ checkBoxOptions = { text: 'Show IDs' };
+
+ return (
+
+
+
+
+ );
+ };
+
+ export default App;
+
+---
+
+Default toolbar items support the following options:
+
+- **accessKey**
+- **elementAttr**
+- **height**
+- **hint**
+- **icon**
+- **stylingMode**
+- **tabIndex**
+- **text**
+- **width**
+
+[note]If you use the Menu UI component as a toolbar item, the [adaptivityEnabled](/api-reference/10%20UI%20Widgets/dxMenu/1%20Configuration/adaptivityEnabled.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#adaptivityEnabled') property does not apply.
\ No newline at end of file
diff --git a/api-reference/_hidden/dxFileManagerToolbarItem/options.md b/api-reference/_hidden/dxFileManagerToolbarItem/options.md
deleted file mode 100644
index f469f00b42..0000000000
--- a/api-reference/_hidden/dxFileManagerToolbarItem/options.md
+++ /dev/null
@@ -1,133 +0,0 @@
-**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/_hidden/dxFileManagerToolbarItem/widget.md '/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/toolbar/items/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components in Angular, Vue, and React. In these frameworks, specify **options** with an object. We recommend that you declare the object outside the configuration component in Vue and React to prevent possible issues caused by unnecessary re-rendering.
-
-Default toolbar items support the following options:
-
-- **accessKey**
-- **elementAttr**
-- **height**
-- **hint**
-- **icon**
-- **stylingMode**
-- **tabIndex**
-- **text**
-- **width**
-
----
-
-##### jQuery
-
-
- $(function () {
- $("#file-manager").dxFileManager({
- toolbar: {
- items: [
- // Specifies a predefined item's name and optional settings
- {
- widget: "dxCheckBox",
- options: {
- text: "Show IDs",
- }
- },
- ]
- }
- });
- });
-
-##### Angular
-
-
-
-
-
-
-
- ...
-
-
-
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
-
- import { DxFileManagerModule } from 'devextreme-angular';
-
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxFileManagerModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
-
-##### Vue
-
-
-
-
-
-
-
-
-
-
-
-##### React
-
-
- import React from 'react';
-
- import 'devextreme/dist/css/dx.light.css';
-
- import FileManager, {
- Toolbar
- } from 'devextreme-react/file-manager';
-
- const App = () => {
- checkBoxOptions = { text: 'Show IDs' };
-
- return (
-
-
-
-
- );
- };
-
- export default App;
-
----
-
-[note]If you use the Menu UI component as a toolbar item, the [adaptivityEnabled](/api-reference/10%20UI%20Widgets/dxMenu/1%20Configuration/adaptivityEnabled.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#adaptivityEnabled') property does not apply.
\ No newline at end of file
diff --git a/api-reference/_hidden/dxFilterBuilderField/editorOptions.md b/api-reference/_hidden/dxFilterBuilderField/editorOptions.md
index 8f09d764cb..006e16f5bb 100644
--- a/api-reference/_hidden/dxFilterBuilderField/editorOptions.md
+++ b/api-reference/_hidden/dxFilterBuilderField/editorOptions.md
@@ -9,11 +9,11 @@ Configures the UI component used to edit the field value.
---
Depending on the [dataType](/api-reference/_hidden/dxFilterBuilderField/editorOptions.md '/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/fields/#editorOptions'), the FilterBuilder offers a user different UI components for editing: [TextBox](/api-reference/10%20UI%20Components/dxTextBox '/Documentation/ApiReference/UI_Components/dxTextBox/'), [DateBox](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/'), [Lookup](/api-reference/10%20UI%20Components/dxLookup '/Documentation/ApiReference/UI_Components/dxLookup/'), etc. In the **editorOptions** object, you can specify properties for the UI component.
-Because **editorOptions** depend on the **dataType**, they cannot be typed and are not implemented as nested configuration components in Angular, Vue, and React. In these frameworks, specify **editorOptions** with an object. We recommend that you declare the object outside the configuration component in Vue and React to prevent possible issues caused by unnecessary re-rendering.
-
---
##### Angular
+Because **editorOptions** depend on the **dataType**, they cannot be typed and are not implemented as nested configuration components. Specify **editorOptions** with an object.
+
@@ -74,6 +76,8 @@ Because **editorOptions** depend on the **dataType**, they cannot be typed and a
##### React
+Because **editorOptions** depend on the **dataType**, they cannot be typed and are not implemented as nested configuration components. Specify **editorOptions** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
import React from 'react';
diff --git a/api-reference/_hidden/dxHtmlEditorMention/dataSource.md b/api-reference/_hidden/dxHtmlEditorMention/dataSource.md
index 125ca06be6..b88fbbbef6 100644
--- a/api-reference/_hidden/dxHtmlEditorMention/dataSource.md
+++ b/api-reference/_hidden/dxHtmlEditorMention/dataSource.md
@@ -162,6 +162,6 @@ Implement a [CustomStore](/api-reference/30%20Data%20Layer/CustomStore '/Documen
[note]
-The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or **DataSource** and assign it to the **dataSource** property as shown in the articles about changing properties in [jQuery](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/05%20Get%20and%20Set%20Properties/00%20Get%20and%20Set%20Properties.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties'), [Angular](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding'), [React](/concepts/50%20React%20Components/20%20State%20Management/3%20Controlled%20Mode.md '/Documentation/Guide/React_Components/State_Management/#Controlled_Mode'), and [Vue](/concepts/55%20Vue%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding').
+#include api-dataSource-stores-are-immutable
[/note]
\ No newline at end of file
diff --git a/api-reference/_hidden/dxHtmlEditorToolbarItem/options.md b/api-reference/_hidden/dxHtmlEditorToolbarItem/options.md
index 858dce2c13..b4e3b42171 100644
--- a/api-reference/_hidden/dxHtmlEditorToolbarItem/options.md
+++ b/api-reference/_hidden/dxHtmlEditorToolbarItem/options.md
@@ -1,8 +1,111 @@
-#include uiwidgets-nestedtoolbar-widgetoptions-fulldesc with {
- nestedOption: "items",
- nestedOptionKebabCase: "item",
- nestedOptionImport: "Item"
-}
+---
+##### Angular
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget]({basewidgetpath}/Configuration/toolbar/items/#widget) property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object.
+
+
+
+
+
+
+
+
+
+
+ import { BrowserModule } from '@angular/platform-browser';
+ import { NgModule } from '@angular/core';
+ import { AppComponent } from './app.component';
+
+ import { Dx{WidgetName}Module } from 'devextreme-angular';
+
+ @NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ Dx{WidgetName}Module
+ ],
+ providers: [ ],
+ bootstrap: [AppComponent]
+ })
+ export class AppModule { }
+
+##### Vue
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget]({basewidgetpath}/Configuration/toolbar/items/#widget) property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
+
+
+
+
+
+
+
+
+
+
+##### React
+
+**options** should contain the properties of the DevExtreme UI component specified in the [widget]({basewidgetpath}/Configuration/toolbar/items/#widget) property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
+
+ import React from 'react';
+
+ import 'devextreme/dist/css/dx.light.css';
+
+ import {WidgetName}, {
+ Toolbar,
+ Item
+ } from 'devextreme-react/{widget-name}';
+
+ class App extends React.Component {
+ checkBoxOptions = { text: 'Show IDs' };
+
+ render() {
+ return (
+ <{WidgetName} ... >
+
+
+
+ );
+ }
+ }
+ export default App;
+
+---
+
+[note]If you use the Menu UI component as a toolbar item, the [adaptivityEnabled](/api-reference/10%20UI%20Widgets/dxMenu/1%20Configuration/adaptivityEnabled.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#adaptivityEnabled') property does not apply.
#include common-demobutton with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/ToolbarCustomization/"
diff --git a/api-reference/_hidden/dxHtmlEditorVariables/dataSource.md b/api-reference/_hidden/dxHtmlEditorVariables/dataSource.md
index 755c2fc32a..5a21115036 100644
--- a/api-reference/_hidden/dxHtmlEditorVariables/dataSource.md
+++ b/api-reference/_hidden/dxHtmlEditorVariables/dataSource.md
@@ -162,6 +162,6 @@ Implement a [CustomStore](/api-reference/30%20Data%20Layer/CustomStore '/Documen
[note]
-The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or **DataSource** and assign it to the **dataSource** property as shown in the articles about changing properties in [jQuery](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/05%20Get%20and%20Set%20Properties/00%20Get%20and%20Set%20Properties.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties'), [Angular](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding'), [React](/concepts/50%20React%20Components/20%20State%20Management/3%20Controlled%20Mode.md '/Documentation/Guide/React_Components/State_Management/#Controlled_Mode'), and [Vue](/concepts/55%20Vue%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding').
+#include api-dataSource-stores-are-immutable
[/note]
\ No newline at end of file
diff --git a/api-reference/_hidden/dxPopupToolbarItem/options.md b/api-reference/_hidden/dxPopupToolbarItem/options.md
index 4cb05ec788..eff00bbdda 100644
--- a/api-reference/_hidden/dxPopupToolbarItem/options.md
+++ b/api-reference/_hidden/dxPopupToolbarItem/options.md
@@ -3,8 +3,6 @@
name: "Popup"
}
-**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/toolbarItems/widget.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/toolbarItems/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components in Angular, Vue, and React. In these frameworks, specify **options** with an object. We recommend that you declare the object outside the configuration component in Vue and React to prevent possible issues caused by unnecessary re-rendering.
-
---
##### jQuery
@@ -24,6 +22,8 @@
##### Angular
+**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/toolbarItems/widget.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/toolbarItems/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object.
+
@@ -86,6 +88,8 @@
##### React
+**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/toolbarItems/widget.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/toolbarItems/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
import React from 'react';
diff --git a/api-reference/_hidden/dxToolbarItem/options.md b/api-reference/_hidden/dxToolbarItem/options.md
index c1e7c086d2..2fa9d6ff03 100644
--- a/api-reference/_hidden/dxToolbarItem/options.md
+++ b/api-reference/_hidden/dxToolbarItem/options.md
@@ -7,7 +7,6 @@ type: any
Configures the DevExtreme UI component used as a toolbar item.
---
-**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/_hidden/dxToolbarItem/widget.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components in Angular, Vue, and React. In these frameworks, specify **options** with an object. We recommend that you declare the object outside the configuration component in Vue and React to prevent possible issues caused by unnecessary re-rendering.
---
@@ -25,6 +24,8 @@ Configures the DevExtreme UI component used as a toolbar item.
##### Angular
+**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/_hidden/dxToolbarItem/widget.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object.
+
@@ -87,6 +90,8 @@ Configures the DevExtreme UI component used as a toolbar item.
##### React
+**options** should contain the properties of the DevExtreme UI component specified in the [widget](/api-reference/_hidden/dxToolbarItem/widget.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/#widget') property. Because of this dependency, **options** cannot be typed and are not implemented as nested configuration components. Specify **options** with an object. We recommend that you declare the object outside the configuration component to prevent possible issues caused by unnecessary re-rendering.
+
import React from 'react';
diff --git a/concepts/05 UI Components/Accordion/05 Customize Item Appearance.md b/concepts/05 UI Components/Accordion/05 Customize Item Appearance.md
index 0628607f5c..5ec64749a9 100644
--- a/concepts/05 UI Components/Accordion/05 Customize Item Appearance.md
+++ b/concepts/05 UI Components/Accordion/05 Customize Item Appearance.md
@@ -1,7 +1,6 @@
For a minor customization of Accordion panels, you can define [specific fields](/api-reference/10%20UI%20Components/dxAccordion/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxAccordion/Configuration/items/') in panel data objects. For example, the following code generates three panels, the first and third are not customized, the second is disabled.
---
-
##### jQuery
@@ -126,9 +125,38 @@ For a minor customization of Accordion panels, you can define [specific fields](
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxAccordion/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxAccordion/Configuration/#itemTemplate') and [itemTitleTemplate](/api-reference/10%20UI%20Components/dxAccordion/1%20Configuration/itemTitleTemplate.md '/Documentation/ApiReference/UI_Components/dxAccordion/Configuration/#itemTitleTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxAccordion/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxAccordion/Configuration/#itemTemplate') and [itemTitleTemplate](/api-reference/10%20UI%20Components/dxAccordion/1%20Configuration/itemTitleTemplate.md '/Documentation/ApiReference/UI_Components/dxAccordion/Configuration/#itemTitleTemplate'):
---
+##### jQuery
+
+
+ var accordionData = [{
+ firstName: "John", lastName: "Smith",
+ birthDate: "1986/03/14",
+ position: "Network Administrator"
+ }, {
+ firstName: "Samantha", lastName: "Jones",
+ birthDate: "1972/11/13",
+ position: "Technical Writer"
+ }];
+
+ $(function () {
+ $("#accordionContainer").dxAccordion({
+ dataSource: accordionData,
+ itemTemplate: function (itemData, itemIndex, itemElement) {
+ itemElement.append("
@@ -340,6 +357,8 @@ You can also customize individual items. In Angular, Vue, and React, declare the
##### Vue
+You can also customize individual items. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component:
+
@@ -370,6 +389,8 @@ You can also customize individual items. In Angular, Vue, and React, declare the
##### React
+You can also customize individual items. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component:
+
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
@@ -392,34 +413,9 @@ You can also customize individual items. In Angular, Vue, and React, declare the
}
export default App;
-
-##### jQuery
-
-
-
-
-
-
- $(function() {
- $("#accordionContainer").dxAccordion({
- items: [{
- title: "John Smith",
- template: function() {
- return $("").text("Network Administrator");
- }
- }, {
- title: "Samantha Jones",
- template: $("#individualTemplate")
- }]
- });
- });
---
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
-
#####See Also#####
- [Accordion API Reference](/api-reference/10%20UI%20Components/dxAccordion '/Documentation/ApiReference/UI_Components/dxAccordion/')
diff --git a/concepts/05 UI Components/Accordion/Demos.md b/concepts/05 UI Components/Accordion/Demos.md
new file mode 100644
index 0000000000..e59d5ff860
--- /dev/null
+++ b/concepts/05 UI Components/Accordion/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Accordion](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Accordion/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/ActionSheet/05 Customize Item Appearance.md b/concepts/05 UI Components/ActionSheet/05 Customize Item Appearance.md
index ef301a859c..cf624f2f1c 100644
--- a/concepts/05 UI Components/ActionSheet/05 Customize Item Appearance.md
+++ b/concepts/05 UI Components/ActionSheet/05 Customize Item Appearance.md
@@ -1,7 +1,7 @@
For a minor customization of ActionSheet buttons, you can define [specific fields](/api-reference/10%20UI%20Components/dxActionSheet/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxActionSheet/Configuration/items/') in button data objects. For example, the following code generates three buttons, the first is not customized, the second is disabled, the [type](/api-reference/_hidden/dxActionSheetItem/type.md '/Documentation/ApiReference/UI_Components/dxActionSheet/Configuration/items/#type') of the third button is *danger*.
---
-##### JQuery
+##### jQuery
$(function() {
@@ -100,9 +100,36 @@ For a minor customization of ActionSheet buttons, you can define [specific field
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxActionSheet/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxActionSheet/Configuration/#itemTemplate').
---
+##### jQuery
+
+
+ $(function() {
+ $("#actionSheetContainer").dxActionSheet({
+ dataSource: [
+ { text: "Reply", icon: 'arrowleft' },
+ { text: "Reply All", icon: 'arrowleft' },
+ { text: "Forward", icon: 'arrowright' },
+ { text: "Delete", icon: 'close' }
+ ],
+ itemTemplate: function (itemData, itemIndex, itemElement) {
+ const linkContainer = $("
- ![]()
-
-
#####See Also#####
- [Custom Templates](/concepts/05%20Widgets/zz%20Common/30%20Templates/10%20Custom%20Templates.md '/Documentation/Guide/UI_Components/Common/Templates/#Custom_Templates')
\ No newline at end of file
diff --git a/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md b/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md
index 43d7391ab4..d94c4fdfe3 100644
--- a/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md
+++ b/api-reference/10 UI Components/dxScheduler/1 Configuration/onAppointmentFormOpening.md
@@ -60,15 +60,15 @@ The table below lists 'mainGroup' editor names:
Title:
-
-
-
- Year:
-
-
-
- Duration:
-
-
-
-
\ No newline at end of file
+The **Scrollable** UI component represents a scrollable field that shows the data located inside the HTML element representing the UI component.
\ No newline at end of file
diff --git a/api-reference/10 UI Components/dxSortable/1 Configuration/moveItemOnDrop.md b/api-reference/10 UI Components/dxSortable/1 Configuration/moveItemOnDrop.md
index afb0367b8a..8f79f0ec20 100644
--- a/api-reference/10 UI Components/dxSortable/1 Configuration/moveItemOnDrop.md
+++ b/api-reference/10 UI Components/dxSortable/1 Configuration/moveItemOnDrop.md
@@ -9,6 +9,21 @@ Moves an element in the HTML markup when it is dropped.
---
-We recommend that you set this property to **false** if you use Angular/Vue/React. In these frameworks, the HTML markup depends on the data model and is updated automatically when you make changes.
+---
+##### jQuery
+
+We recommend that you set **moveItemsOnDrop** to **true** because changes to the data model do not automatically update the HTML markup. If you set this property to **false**, you should move DOM nodes in the [onReorder](/api-reference/10%20UI%20Components/dxSortable/1%20Configuration/onReorder.md '/Documentation/ApiReference/UI_Components/dxSortable/Configuration/#onReorder') function.
+
+##### Angular
+
+We recommend that you set this property to **false**. In Angular, the HTML markup depends on the data model and is updated automatically when you make changes.
+
+##### Vue
+
+We recommend that you set this property to **false**. In Vue, the HTML markup depends on the data model and is updated automatically when you make changes.
+
+##### React
+
+We recommend that you set this property to **false**. In React, the HTML markup depends on the data model and is updated automatically when you make changes.
-If you use jQuery, we recommend that you set **moveItemsOnDrop** to **true** because changes to the data model do not automatically update the HTML markup. If you set this property to **false**, you should move DOM nodes in the [onReorder](/api-reference/10%20UI%20Components/dxSortable/1%20Configuration/onReorder.md '/Documentation/ApiReference/UI_Components/dxSortable/Configuration/#onReorder') function.
+---
\ No newline at end of file
diff --git a/api-reference/10 UI Components/dxTreeMap/1 Configuration/dataSource.md b/api-reference/10 UI Components/dxTreeMap/1 Configuration/dataSource.md
index cb909f6fd6..f69cd323a1 100644
--- a/api-reference/10 UI Components/dxTreeMap/1 Configuration/dataSource.md
+++ b/api-reference/10 UI Components/dxTreeMap/1 Configuration/dataSource.md
@@ -215,6 +215,6 @@ Review the following notes about data binding:
- Data field names cannot be equal to `this` and should not contain the following characters: `.`, `:`, `[`, and `]`.
-- The stores and **DataSource** have methods to process and update data. However, the methods do not allow you to perform particular tasks (for example, replace the entire dataset, reconfigure data access at runtime). For such tasks, create a new array, store, or **DataSource** and assign it to the **dataSource** property as shown in the articles about changing properties in [jQuery](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/05%20Get%20and%20Set%20Properties/00%20Get%20and%20Set%20Properties.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties'), [Angular](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding'), [React](/concepts/50%20React%20Components/20%20State%20Management/3%20Controlled%20Mode.md '/Documentation/Guide/React_Components/State_Management/#Controlled_Mode'), and [Vue](/concepts/55%20Vue%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Vue_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding').
+#include api-dataSource-stores-are-immutable
[/note]
diff --git a/api-reference/10 UI Components/dxValidator/1 Configuration/validationGroup.md b/api-reference/10 UI Components/dxValidator/1 Configuration/validationGroup.md
index b7f043e1d9..90b236baa6 100644
--- a/api-reference/10 UI Components/dxValidator/1 Configuration/validationGroup.md
+++ b/api-reference/10 UI Components/dxValidator/1 Configuration/validationGroup.md
@@ -7,9 +7,9 @@ type: String
Specifies the validation group the editor will be related to.
---
-Generally, the editors that are associated with **dxValidator** objects are validated on each value change. But you can combine several editors into a group so that they are validated together (e.g., on a button click). In the Knockout or AngularJS approach, editors should be added to the **div** element representing the [ValidationGroup](/api-reference/10%20UI%20Components/dxValidationGroup '/Documentation/ApiReference/UI_Components/dxValidationGroup/') component. In this instance, you do not have to specify the **validationGroup** property for the associated **dxValidator** objects.
-
-If you use the JQuery approach, the **validationGroup** property should be specified for the associated **dxValidator** object to indicate the validation group within which the editor will be validated. Assign the same validation group name for those editors that should be validated together.
+Generally, the editors that are associated with **dxValidator** objects are validated on each value change. But you can combine several editors into a group so that they are validated together (e.g., on a button click).
+
+The **validationGroup** property should be specified for the associated **dxValidator** object to indicate the validation group within which the editor will be validated. Assign the same validation group name for those editors that should be validated together.
#####See Also#####
- [Validate Several Editor Values](/concepts/05%20UI%20Components/zz%20Common/05%20UI%20Widgets/20%20Data%20Validation/20%20Validate%20Several%20Editor%20Values '/Documentation/Guide/UI_Components/Common/UI_Widgets/Data_Validation/#Validate_Several_Editor_Values')
\ No newline at end of file
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/2 Fields/Fields.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/2 Fields/Fields.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/2 Fields/Fields.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/2 Fields/Fields.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/2 Fields/layer.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/2 Fields/layer.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/2 Fields/layer.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/2 Fields/layer.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/Methods.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/Methods.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/Methods.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/Methods.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/applySettings(settings).md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/applySettings(settings).md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/applySettings(settings).md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/applySettings(settings).md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/attribute(name).md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/attribute(name).md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/attribute(name).md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/attribute(name).md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/attribute(name_value).md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/attribute(name_value).md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/attribute(name_value).md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/attribute(name_value).md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/coordinates().md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/coordinates().md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/coordinates().md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/coordinates().md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/selected().md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/selected().md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/selected().md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/selected().md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/selected(state).md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/selected(state).md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/3 Methods/selected(state).md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/3 Methods/selected(state).md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/Layer Element.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/Layer Element.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer Element/Layer Element.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer Element/Layer Element.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/Fields.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/Fields.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/Fields.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/Fields.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/elementType.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/elementType.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/elementType.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/elementType.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/index.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/index.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/index.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/index.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/name.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/name.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/name.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/name.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/type.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/type.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/2 Fields/type.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/2 Fields/type.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/Methods.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/Methods.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/Methods.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/Methods.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/clearSelection().md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/clearSelection().md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/clearSelection().md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/clearSelection().md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/getDataSource().md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/getDataSource().md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/getDataSource().md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/getDataSource().md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/getElements().md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/getElements().md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/3 Methods/getElements().md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/3 Methods/getElements().md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/Layer.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/Layer.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Layer/Layer.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Layer/Layer.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Map Elements/Map Elements.md b/api-reference/10 UI Components/dxVectorMap/6 Map Elements/Map Elements.md
similarity index 100%
rename from api-reference/10 UI Components/dxVectorMap/7 Map Elements/Map Elements.md
rename to api-reference/10 UI Components/dxVectorMap/6 Map Elements/Map Elements.md
diff --git a/api-reference/10 UI Components/dxVectorMap/7 Interfaces/Interfaces.md b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/Interfaces.md
new file mode 100644
index 0000000000..37c9b1974a
--- /dev/null
+++ b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/Interfaces.md
@@ -0,0 +1,5 @@
+---
+##### shortDescription
+This section describes interfaces that the {WidgetName} component uses.
+
+---
diff --git a/api-reference/50 Common/Object Structures/VectorMapLegendItem/VectorMapLegendItem.md b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/VectorMapLegendItem.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/VectorMapLegendItem/VectorMapLegendItem.md
rename to api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/VectorMapLegendItem.md
diff --git a/api-reference/50 Common/Object Structures/VectorMapLegendItem/color.md b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/color.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/VectorMapLegendItem/color.md
rename to api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/color.md
diff --git a/api-reference/50 Common/Object Structures/VectorMapLegendItem/end.md b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/end.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/VectorMapLegendItem/end.md
rename to api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/end.md
diff --git a/api-reference/50 Common/Object Structures/VectorMapLegendItem/marker/marker.md b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/marker/marker.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/VectorMapLegendItem/marker/marker.md
rename to api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/marker/marker.md
diff --git a/api-reference/50 Common/Object Structures/VectorMapLegendItem/marker/size.md b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/marker/size.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/VectorMapLegendItem/marker/size.md
rename to api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/marker/size.md
diff --git a/api-reference/50 Common/Object Structures/VectorMapLegendItem/start.md b/api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/start.md
similarity index 100%
rename from api-reference/50 Common/Object Structures/VectorMapLegendItem/start.md
rename to api-reference/10 UI Components/dxVectorMap/7 Interfaces/VectorMapLegendItem/start.md
diff --git a/api-reference/30 Data Layer/ArrayStore/ArrayStore.md b/api-reference/30 Data Layer/ArrayStore/ArrayStore.md
index 67236aa769..d612968717 100644
--- a/api-reference/30 Data Layer/ArrayStore/ArrayStore.md
+++ b/api-reference/30 Data Layer/ArrayStore/ArrayStore.md
@@ -74,66 +74,6 @@ dx.web.js, dx.viz.js, dx.all.js
}
}
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- var states = [
- { id: 1, state: "Alabama", capital: "Montgomery" },
- { id: 2, state: "Alaska", capital: "Juneau" },
- { id: 3, state: "Arizona", capital: "Phoenix" },
- // ...
- ];
- $scope.store = new DevExpress.data.ArrayStore({
- key: "id",
- data: states,
- // Other ArrayStore properties go here
- });
-
- // ===== or inside the DataSource =====
- $scope.dataSource = new DevExpress.data.DataSource({
- store: {
- type: "array",
- key: "id",
- data: states,
- // Other ArrayStore properties go here
- },
- // Other DataSource properties go here
- });
- });
-
-##### Knockout
-
-
- var states = [
- { id: 1, state: "Alabama", capital: "Montgomery" },
- { id: 2, state: "Alaska", capital: "Juneau" },
- { id: 3, state: "Arizona", capital: "Phoenix" },
- // ...
- ];
-
- var viewModel = {
- store: new DevExpress.data.ArrayStore({
- key: "id",
- data: states,
- // Other ArrayStore properties go here
- })
-
- // ===== or inside the DataSource =====
- dataSource: new DevExpress.data.DataSource({
- store: {
- type: "array",
- key: "id",
- data: states,
- // Other ArrayStore properties go here
- },
- // Other DataSource properties go here
- })
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/api-reference/30 Data Layer/DataSource/DataSource.md b/api-reference/30 Data Layer/DataSource/DataSource.md
index e2f4804d33..81353d6b9b 100644
--- a/api-reference/30 Data Layer/DataSource/DataSource.md
+++ b/api-reference/30 Data Layer/DataSource/DataSource.md
@@ -37,31 +37,6 @@ dx.web.js, dx.viz.js, dx.all.js
}
}
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- $scope.dataSource = new DevExpress.data.DataSource({
- // ...
- // DataSource is configured here
- // ...
- });
- });
-
-##### Knockout
-
-
- var viewModel = {
- dataSource: new DevExpress.data.DataSource({
- // ...
- // DataSource is configured here
- // ...
- })
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/api-reference/30 Data Layer/EndpointSelector/EndpointSelector.md b/api-reference/30 Data Layer/EndpointSelector/EndpointSelector.md
index 0149c23727..c700334645 100644
--- a/api-reference/30 Data Layer/EndpointSelector/EndpointSelector.md
+++ b/api-reference/30 Data Layer/EndpointSelector/EndpointSelector.md
@@ -48,43 +48,6 @@ This object selects local or production OData service URL depending on whether t
}
}
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- $scope.endpointSelector = new DevExpress.data.EndpointSelector({
- db1: {
- local: "http://localhost:55555/service1.svc/",
- production: "http://services.example.com/service1.svc/"
- },
- db2: {
- local: "http://localhost:55555/service2.svc/",
- production: "http://services.example.com/service2.svc/"
- },
- // ...
- });
- });
-
-##### Knockout
-
-
- var viewModel = {
- endpointSelector: new DevExpress.data.EndpointSelector({
- db1: {
- local: "http://localhost:55555/service1.svc/",
- production: "http://services.example.com/service1.svc/"
- },
- db2: {
- local: "http://localhost:55555/service2.svc/",
- production: "http://services.example.com/service2.svc/"
- },
- // ...
- })
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/api-reference/30 Data Layer/LocalStore/LocalStore.md b/api-reference/30 Data Layer/LocalStore/LocalStore.md
index 3050bb68cf..783edad102 100644
--- a/api-reference/30 Data Layer/LocalStore/LocalStore.md
+++ b/api-reference/30 Data Layer/LocalStore/LocalStore.md
@@ -80,70 +80,6 @@ When configuring the **LocalStore**, specify the [name](/api-reference/30%20Data
}
}
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- var states = [
- { id: 1, state: "Alabama", capital: "Montgomery" },
- { id: 2, state: "Alaska", capital: "Juneau" },
- { id: 3, state: "Arizona", capital: "Phoenix" },
- // ...
- ];
- $scope.store = new DevExpress.data.LocalStore({
- key: "id",
- data: states,
- name: "myLocalData",
- // Other LocalStore properties go here
- });
-
- // ===== or inside the DataSource =====
- $scope.dataSource = new DevExpress.data.DataSource({
- store: {
- type: "local",
- key: "id",
- data: states,
- name: "myLocalData",
- // Other LocalStore properties go here
- },
- // Other DataSource properties go here
- });
- });
-
-##### Knockout
-
-
- var states = [
- { id: 1, state: "Alabama", capital: "Montgomery" },
- { id: 2, state: "Alaska", capital: "Juneau" },
- { id: 3, state: "Arizona", capital: "Phoenix" },
- // ...
- ];
-
- var viewModel = {
- store: new DevExpress.data.LocalStore({
- key: "id",
- data: states,
- name: "myLocalData",
- // Other LocalStore properties go here
- })
-
- // ===== or inside the DataSource =====
- dataSource: new DevExpress.data.DataSource({
- store: {
- type: "local",
- key: "id",
- data: states,
- name: "myLocalData",
- // Other LocalStore properties go here
- },
- // Other DataSource properties go here
- })
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/api-reference/30 Data Layer/ODataContext/ODataContext.md b/api-reference/30 Data Layer/ODataContext/ODataContext.md
index fd451be424..fc4acf36fe 100644
--- a/api-reference/30 Data Layer/ODataContext/ODataContext.md
+++ b/api-reference/30 Data Layer/ODataContext/ODataContext.md
@@ -75,67 +75,6 @@ This object creates several [ODataStore](/api-reference/30%20Data%20Layer/ODataS
}
}
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- $scope.context = new DevExpress.data.ODataContext({
- url: "http://www.example.com/Northwind.svc",
- entities: {
- Categories: {
- key: "CategoryID",
- keyType: "Int32"
- },
- // An entity collection alias
- Clients: {
- name: "Customers",
- key: "CustomerID",
- keyType: "String"
- },
- Products: {
- // A composite key
- key: ["ProductID", "ProductCode"],
- keyType: {
- ProductID: "Guid",
- ProductCode: "Int32"
- }
- }
- }
- })
- });
-
-##### Knockout
-
-
- var viewModel = {
- context: new DevExpress.data.ODataContext({
- url: "http://www.example.com/Northwind.svc",
- entities: {
- Categories: {
- key: "CategoryID",
- keyType: "Int32"
- },
- // An entity collection alias
- Clients: {
- name: "Customers",
- key: "CustomerID",
- keyType: "String"
- },
- Products: {
- // A composite key
- key: ["ProductID", "ProductCode"],
- keyType: {
- ProductID: "Guid",
- ProductCode: "Int32"
- }
- }
- }
- })
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/api-reference/30 Data Layer/ODataStore/ODataStore.md b/api-reference/30 Data Layer/ODataStore/ODataStore.md
index 12bfecb125..54dcfd1198 100644
--- a/api-reference/30 Data Layer/ODataStore/ODataStore.md
+++ b/api-reference/30 Data Layer/ODataStore/ODataStore.md
@@ -132,57 +132,6 @@ dx.web.js, dx.viz.js, dx.all.js
}
export default App;
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- $scope.store = new DevExpress.data.ODataStore({
- url: "http://www.example.com/Northwind.svc/Products",
- key: "ProductID",
- keyType: "Int32",
- // Other ODataStore properties go here
- });
-
- // ===== or inside the DataSource =====
- $scope.dataSource = new DevExpress.data.DataSource({
- store: {
- type: "odata",
- url: "http://www.example.com/Northwind.svc/Products",
- key: "ProductID",
- keyType: "Int32",
- // Other ODataStore properties go here
- },
- // Other DataSource properties go here
- });
- });
-
-##### Knockout
-
-
- var viewModel = {
- store: new DevExpress.data.ODataStore({
- url: "http://www.example.com/Northwind.svc/Products",
- key: "ProductID",
- keyType: "Int32",
- // Other ODataStore properties go here
- })
-
- // ===== or inside the DataSource =====
- dataSource: new DevExpress.data.DataSource({
- store: {
- type: "odata",
- url: "http://www.example.com/Northwind.svc/Products",
- key: "ProductID",
- keyType: "Int32",
- // Other ODataStore properties go here
- },
- // Other DataSource properties go here
- })
- };
-
- ko.applyBindings(viewModel);
-
##### ASP.NET MVC Controls
@(Html.DevExtreme().WidgetName()
diff --git a/api-reference/30 Data Layer/PivotGridDataSource/PivotGridDataSource.md b/api-reference/30 Data Layer/PivotGridDataSource/PivotGridDataSource.md
index 1afb1cb322..60aa8b2ac1 100644
--- a/api-reference/30 Data Layer/PivotGridDataSource/PivotGridDataSource.md
+++ b/api-reference/30 Data Layer/PivotGridDataSource/PivotGridDataSource.md
@@ -83,67 +83,6 @@ dx.web.js, dx.all.js
[dataSource]="pivotGridDataSource">
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- $scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
- store: {
- // ...
- // Underlying store is configured here
- // ...
- },
- fields: [{
- area: "column",
- dataField: "OrderDate",
- dataType: "date"
- }, {
- area: "row",
- dataField: "ShipCity"
- }, {
- area: "data",
- summaryType: "count"
- }]
- });
- });
-
-
-
-
-##### Knockout
-
-
- var viewModel = {
- pivotGridDataSource: new DevExpress.data.PivotGridDataSource({
- store: {
- // ...
- // Underlying store is configured here
- // ...
- },
- fields: [{
- area: "column",
- dataField: "OrderDate",
- dataType: "date"
- }, {
- area: "row",
- dataField: "ShipCity"
- }, {
- area: "data",
- summaryType: "count"
- }]
- })
- };
-
- ko.applyBindings(viewModel);
-
-
-
-
##### Vue
diff --git a/api-reference/30 Data Layer/Query/Query.md b/api-reference/30 Data Layer/Query/Query.md
index 7fc465980e..ae61594da4 100644
--- a/api-reference/30 Data Layer/Query/Query.md
+++ b/api-reference/30 Data Layer/Query/Query.md
@@ -53,45 +53,6 @@ To create a **Query**, call the [query(array)](/api-reference/30%20Data%20Layer/
}
}
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- var dataObjects = [
- { name: "Amelia", birthYear: 1991, gender: "female" },
- { name: "Benjamin", birthYear: 1983, gender: "male" },
- { name: "Daniela", birthYear: 1987, gender: "female" },
- { name: "Lee", birthYear: 1981, gender: "male" }
- ];
-
- $scope.processedArray = DevExpress.data.query(dataObjects)
- .filter([ "gender", "=", "female" ])
- .sortBy("birthYear")
- .select("name", "birthYear")
- .toArray();
- });
-
-##### Knockout
-
-
- var dataObjects = [
- { name: "Amelia", birthYear: 1991, gender: "female" },
- { name: "Benjamin", birthYear: 1983, gender: "male" },
- { name: "Daniela", birthYear: 1987, gender: "female" },
- { name: "Lee", birthYear: 1981, gender: "male" }
- ];
-
- var viewModel = {
- processedArray: DevExpress.data.query(dataObjects)
- .filter([ "gender", "=", "female" ])
- .sortBy("birthYear")
- .select("name", "birthYear")
- .toArray()
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/api-reference/30 Data Layer/XmlaStore/XmlaStore.md b/api-reference/30 Data Layer/XmlaStore/XmlaStore.md
index ec30fa7db5..6f1b2b6c0e 100644
--- a/api-reference/30 Data Layer/XmlaStore/XmlaStore.md
+++ b/api-reference/30 Data Layer/XmlaStore/XmlaStore.md
@@ -63,53 +63,6 @@ The **XmlaStore** is used in the [PivotGridDataSource](/api-reference/30%20Data%
}
}
-##### AngularJS
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function DemoController($scope) {
- $scope.store = new DevExpress.data.XmlaStore({
- url: "http://my-web-srv01/OLAP/msmdpump.dll",
- catalog: "AdventureWorksDW2012",
- cube: "Adventure Works"
- });
-
- // ===== or inside the PivotGridDataSource =====
- $scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
- store: {
- type: "xmla",
- url: "http://my-web-srv01/OLAP/msmdpump.dll",
- catalog: "AdventureWorksDW2012",
- cube: "Adventure Works"
- },
- // Other PivotGridDataSource properties go here
- });
- });
-
-##### Knockout
-
-
- var viewModel = {
- store: new DevExpress.data.XmlaStore({
- url: "http://my-web-srv01/OLAP/msmdpump.dll",
- catalog: "AdventureWorksDW2012",
- cube: "Adventure Works"
- })
-
- // ===== or inside the PivotGridDataSource =====
- pivotGridDataSource: new DevExpress.data.PivotGridDataSource({
- store: {
- type: "xmla",
- url: "http://my-web-srv01/OLAP/msmdpump.dll",
- catalog: "AdventureWorksDW2012",
- cube: "Adventure Works"
- },
- // Other PivotGridDataSource properties go here
- })
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/api-reference/50 Common/Object Structures/BaseChartLegendItem/BaseChartLegendItem.md b/api-reference/50 Common/Object Structures/BaseChartLegendItem/BaseChartLegendItem.md
deleted file mode 100644
index 84fc8a2f80..0000000000
--- a/api-reference/50 Common/Object Structures/BaseChartLegendItem/BaseChartLegendItem.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-id: BaseChartLegendItem
-type: Object
-inherits: BaseLegendItem
-module: viz/chart_components/base_chart
-export: BaseChartLegendItem
----
----
-##### shortDescription
-An object that provides information about a legend item in the [Chart](/api-reference/10%20UI%20Components/dxChart '/Documentation/ApiReference/UI_Components/dxChart/') and [PolarChart](/api-reference/10%20UI%20Components/dxPolarChart '/Documentation/ApiReference/UI_Components/dxPolarChart/') UI components.
-
----
-#####See Also#####
-- Chart.[legend](/api-reference/10%20UI%20Components/dxChart/1%20Configuration/legend '/Documentation/ApiReference/UI_Components/dxChart/Configuration/legend/')
-- PolarChart.[legend](/api-reference/10%20UI%20Components/dxPolarChart/1%20Configuration/legend '/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/legend/')
\ No newline at end of file
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/path.md b/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/path.md
deleted file mode 100644
index aa817bf106..0000000000
--- a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/path.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-id: FileSystemItem.path
-type: String
----
----
-##### shortDescription
-The file system item's path.
-
----
-The **path** field stores a path to a file/directory as a string of path items separated by a slash. The [pathKeys](/api-reference/50%20Common/Object%20Structures/FileSystemItem/2%20Fields/pathKeys.md '/Documentation/ApiReference/Common/Object_Structures/FileSystemItem/Fields/#pathKeys') field stores an array of path item keys. This difference between the fields is more distinct if you specify [keyExpr](/api-reference/10%20UI%20Components/dxFileManager/5%20File%20System%20Providers/FileSystemProviderBase/1%20Configuration/keyExpr.md '/Documentation/ApiReference/UI_Components/dxFileManager/File_System_Providers/Custom/Configuration/#keyExpr') for your File System Provider. For example, the path and pathkeys fields may have the following values if **keyExpr** targets a numeric field:
-
- path: "Documents/Todo.txt"
- pathkeys: [10, 20]
\ No newline at end of file
diff --git a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/pathKeys.md b/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/pathKeys.md
deleted file mode 100644
index 66ea8c5c59..0000000000
--- a/api-reference/50 Common/Object Structures/FileSystemItem/2 Fields/pathKeys.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-id: FileSystemItem.pathKeys
-type: ArrayThe text that should be displayed by the UI component.
-" + itemData.birthDate + "
"); + itemElement.append("" + itemData.position + "
"); + }, + itemTitleTemplate: function (itemData, itemIndex, itemElement) { + itemElement.append("" + itemData.firstName + " "); + itemElement.append("" + itemData.lastName + ""); + } + }); + }); + + + ##### Angular @@ -268,52 +296,41 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 --- -If you use jQuery, use DOM manipulation methods to combine the HTML markup for accordion item. To apply this markup, use the **itemTemplate** and **itemTitleTemplate** callback functions as shown in the following code: +#include common-demobutton with { + url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Accordion/Overview/" +} --- - ##### jQuery - - var accordionData = [{ - firstName: "John", lastName: "Smith", - birthDate: "1986/03/14", - position: "Network Administrator" - }, { - firstName: "Samantha", lastName: "Jones", - birthDate: "1972/11/13", - position: "Technical Writer" - }]; - - $(function () { - $("#accordionContainer").dxAccordion({ - dataSource: accordionData, - itemTemplate: function (itemData, itemIndex, itemElement) { - itemElement.append("" + itemData.birthDate + "
"); - itemElement.append("" + itemData.position + "
"); - }, - itemTitleTemplate: function (itemData, itemIndex, itemElement) { - itemElement.append("" + itemData.firstName + " "); - itemElement.append("" + itemData.lastName + ""); - } - }); - }); +You can also customize individual items. Declare the items as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxAccordion/Configuration/items/#template') property or assign a customization function straight to this property: + ---- - -#include common-demobutton with { - url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Accordion/Overview/" -} - -You can also customize individual items. In Angular, Vue, and React, declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component. When using jQuery, you can declare the items as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxAccordion/Configuration/items/#template') property or assign a customization function straight to this property. + + $(function() { + $("#accordionContainer").dxAccordion({ + items: [{ + title: "John Smith", + template: function() { + return $("").text("Network Administrator"); + } + }, { + title: "Samantha Jones", + template: $("#individualTemplate") + }] + }); + }); ---- ##### Angular +You can also customize individual items. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component: +");
+ linkContainer.append("" + itemData.text + "");
+ itemElement.append(linkContainer);
+ }
+ });
+ });
+
+
+ .action-sheet-button {
+ margin: 5px;
+ padding: 10px;
+ border: 1px dotted #080;
+ background-color: white;
+ }
+
##### Angular
@@ -243,32 +270,8 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxActionSheet/Configuration/#itemTemplate') callback function as shown in the following code.
-
-
- $(function() {
- $("#actionSheetContainer").dxActionSheet({
- dataSource: [
- { text: "Reply", icon: 'arrowleft' },
- { text: "Reply All", icon: 'arrowleft' },
- { text: "Forward", icon: 'arrowright' },
- { text: "Delete", icon: 'close' }
- ],
- itemTemplate: function (itemData, itemIndex, itemElement) {
- const linkContainer = $("
");
- linkContainer.append("" + itemData.text + "");
- itemElement.append(linkContainer);
- }
- });
- });
-
-
- .action-sheet-button {
- margin: 5px;
- padding: 10px;
- border: 1px dotted #080;
- background-color: white;
- }
+---
+##### jQuery
You can also customize an individual ActionSheet button. For this purpose, declare a template for this button as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxActionSheet/Configuration/items/#template') field.
@@ -283,7 +286,7 @@ You can also customize an individual ActionSheet button. For this purpose, decla
// ...
];
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+---
#####See Also#####
- [ActionSheet Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ActionSheet/Basics)
diff --git a/concepts/05 UI Components/ActionSheet/Demos.md b/concepts/05 UI Components/ActionSheet/Demos.md
new file mode 100644
index 0000000000..a75e14d6d4
--- /dev/null
+++ b/concepts/05 UI Components/ActionSheet/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Basics](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ActionSheet/Basics/)
+- [Popover Mode](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ActionSheet/PopoverMode/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Autocomplete/01 Choose a Drop-Down Editor.md b/concepts/05 UI Components/Autocomplete/01 Choose a Drop-Down Editor.md
new file mode 100644
index 0000000000..de31b0da01
--- /dev/null
+++ b/concepts/05 UI Components/Autocomplete/01 Choose a Drop-Down Editor.md
@@ -0,0 +1 @@
+#include editors-how-to-choose
\ No newline at end of file
diff --git a/concepts/05 UI Components/Autocomplete/05 Customize Item Appearance.md b/concepts/05 UI Components/Autocomplete/05 Customize Item Appearance.md
index b6918392a0..10d26f6e89 100644
--- a/concepts/05 UI Components/Autocomplete/05 Customize Item Appearance.md
+++ b/concepts/05 UI Components/Autocomplete/05 Customize Item Appearance.md
@@ -103,9 +103,30 @@ For a minor customization of Autocomplete items, you can define [specific fields
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/DataExpressionMixin/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxAutocomplete/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/DataExpressionMixin/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxAutocomplete/Configuration/#itemTemplate').
---
+##### jQuery
+
+
+ const autocompleteData = [
+ { country: "Afghanistan", capital: "Kabul" },
+ { country: "Albania", capital: "Tirana" },
+ // ...
+ ];
+
+ $(function() {
+ $("#autocompleteContainer").dxAutocomplete({
+ dataSource: autocompleteData,
+ valueExpr: 'country',
+ placeholder: 'Type country name...',
+ itemTemplate: function (itemData, itemIndex, itemElement) {
+ itemElement.append("
Country: " + itemData.country + "
"); + itemElement.append("Capital: " + itemData.capital + "
"); + } + }); + }); + ##### Angular @@ -215,26 +236,8 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 --- -If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/DataExpressionMixin/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxAutocomplete/Configuration/#itemTemplate') callback function as shown in the following code. - - - const autocompleteData = [ - { country: "Afghanistan", capital: "Kabul" }, - { country: "Albania", capital: "Tirana" }, - // ... - ]; - - $(function() { - $("#autocompleteContainer").dxAutocomplete({ - dataSource: autocompleteData, - valueExpr: 'country', - placeholder: 'Type country name...', - itemTemplate: function (itemData, itemIndex, itemElement) { - itemElement.append("Country: " + itemData.country + "
"); - itemElement.append("Capital: " + itemData.capital + "
"); - } - }); - }); +--- +##### jQuery You can also customize an individual Autocomplete item. For this purpose, declare a template for this item as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxAutocomplete/Configuration/items/#template') field. @@ -250,7 +253,7 @@ You can also customize an individual Autocomplete item. For this purpose, declar // ... ]; -In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article. +--- #####See Also##### - [Autocomplete - Configure Search Parameters](/concepts/05%20UI%20Components/Autocomplete/10%20Configure%20Search%20Parameters.md '/Documentation/Guide/UI_Components/Autocomplete/Configure_Search_Parameters') diff --git a/concepts/05 UI Components/Autocomplete/Demos.md b/concepts/05 UI Components/Autocomplete/Demos.md new file mode 100644 index 0000000000..9260c02e7d --- /dev/null +++ b/concepts/05 UI Components/Autocomplete/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Autocomplete](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Autocomplete/Overview/) \ No newline at end of file diff --git a/concepts/05 UI Components/BarGauge/Demos.md b/concepts/05 UI Components/BarGauge/Demos.md new file mode 100644 index 0000000000..469ce9e2a5 --- /dev/null +++ b/concepts/05 UI Components/BarGauge/Demos.md @@ -0,0 +1,7 @@ +#include demos-intro + +- [Update Bar Gauge Data at Runtime](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/UpdateBarGaugeDataAtRuntime/) +- [Labels Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/LabelsCustomization/) +- [Palette](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/Palette/) +- [Tooltip and Legend](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/Tooltip/) +- [Variable Number of Bars](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/VariableNumberOfBars/) diff --git a/concepts/05 UI Components/Box/Demos.md b/concepts/05 UI Components/Box/Demos.md new file mode 100644 index 0000000000..dd6cc51f53 --- /dev/null +++ b/concepts/05 UI Components/Box/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Box](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Box/Overview/) diff --git a/concepts/05 UI Components/Bullet/Demos.md b/concepts/05 UI Components/Bullet/Demos.md new file mode 100644 index 0000000000..7081546a6a --- /dev/null +++ b/concepts/05 UI Components/Bullet/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Bullet Charts](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/SimpleBullets/) diff --git a/concepts/05 UI Components/Button/Demos.md b/concepts/05 UI Components/Button/Demos.md new file mode 100644 index 0000000000..db3717c9d4 --- /dev/null +++ b/concepts/05 UI Components/Button/Demos.md @@ -0,0 +1,4 @@ +#include demos-intro + +- [Predefined Types](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Button/PredefinedTypes/) +- [Icons](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Button/Icons/) diff --git a/concepts/05 UI Components/ButtonGroup/Demos.md b/concepts/05 UI Components/ButtonGroup/Demos.md new file mode 100644 index 0000000000..0aeb168c42 --- /dev/null +++ b/concepts/05 UI Components/ButtonGroup/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Button Group](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ButtonGroup/Overview/) diff --git a/concepts/05 UI Components/Calendar/15 Customize Cell Appearance.md b/concepts/05 UI Components/Calendar/15 Customize Cell Appearance.md index 04601cbd29..3c5612af42 100644 --- a/concepts/05 UI Components/Calendar/15 Customize Cell Appearance.md +++ b/concepts/05 UI Components/Calendar/15 Customize Cell Appearance.md @@ -105,7 +105,7 @@ If you use jQuery alone, use "); + iconElement.addClass("dx-icon-" + itemData.icon); + itemElement.append(iconElement); + itemElement.append("" + itemData.text + "" + " [" + itemIndex + "]"); + }, + target: '#someElement' + }); + }); ##### Angular @@ -221,33 +243,13 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 --- -If you use jQuery, use DOM manipulation methods to combine the HTML markup for context menu items. To apply this markup, use the **itemTemplate** callback function as shown in the following code: - - - var contextMenuItems = [ - { text: "Zoom In", icon: "plus" }, - { text: "Share", icon: "message" }, - { text: "Download", icon: "download" } - ]; - - $(function() { - $("#contextMenuContainer").dxContextMenu({ - items: contextMenuItems, - visible: true, - itemTemplate: function(itemData, itemIndex, itemElement) { - var iconElement = $(""); - iconElement.addClass("dx-icon-" + itemData.icon); - itemElement.append(iconElement); - itemElement.append("" + itemData.text + "" + " [" + itemIndex + "]"); - }, - target: '#someElement' - }); - }); - #include common-demobutton with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Context_Menu/Templates/" } +--- +##### jQuery + You can also customize an individual context menu item. For this purpose, declare a template for this item as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration/items/#template') field of the item's data object. @@ -266,7 +268,7 @@ You can also customize an individual context menu item. For this purpose, declar // ... ]; -In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article. +--- #####See Also##### - [ContextMenu API Reference](/api-reference/10%20UI%20Components/dxContextMenu '/Documentation/ApiReference/UI_Components/dxContextMenu/') diff --git a/concepts/05 UI Components/ContextMenu/10 Open and Close the Context Menu/10 API.md b/concepts/05 UI Components/ContextMenu/10 Open and Close the Context Menu/10 API.md index 9f4457517d..0f5b342a4f 100644 --- a/concepts/05 UI Components/ContextMenu/10 Open and Close the Context Menu/10 API.md +++ b/concepts/05 UI Components/ContextMenu/10 Open and Close the Context Menu/10 API.md @@ -1,6 +1,9 @@ The ContextMenu UI component is not supposed to be opened programmatically, but rare scenarios demand this. This article shows how to do this using the Button UI component. This choice is made for purely demonstrational purposes, and you can do the same with another UI component following the same guidelines. -To open or close the ContextMenu from code, call the [show()](/api-reference/10%20UI%20Components/dxContextMenu/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxContextMenu/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxContextMenu/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxContextMenu/Methods/#hide') method. You can do the same thing using the [toggle(showing)](/api-reference/10%20UI%20Components/dxContextMenu/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxContextMenu/Methods/#toggleshowing') method. Pass **true** or **false** to this method to open or close the context menu, respectively. +--- +##### jQuery + +To open or close the ContextMenu from code, call the [show()](/api-reference/10%20UI%20Components/dxContextMenu/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxContextMenu/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxContextMenu/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxContextMenu/Methods/#hide') method. You can do the same thing using the [toggle(showing)](/api-reference/10%20UI%20Components/dxContextMenu/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxContextMenu/Methods/#toggleshowing') method. Pass **true** or **false** to this method to open or close the context menu, respectively: var contextMenuItems = [ @@ -25,12 +28,10 @@ To open or close the ContextMenu from code, call the [show()](/api-reference/10% }); }); -When using Angular, Vue or React, use a different approach. Bind the [visible](/api-reference/10%20UI%20Components/dxContextMenu/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration/#visible') property of the ContextMenu UI component to a component property. After that, change this property or variable, and the context menu will be opened or closed. - ---- - ##### Angular +To open or close the ContextMenu from code, bind the [visible](/api-reference/10%20UI%20Components/dxContextMenu/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration/#visible') property of the ContextMenu to a component property. After that, change this component property, and the context menu will be opened or closed: +
@@ -109,6 +112,8 @@ When using Angular, Vue or React, use a different approach. Bind the [visible](/
##### React
+To open or close the ContextMenu from code, bind the [visible](/api-reference/10%20UI%20Components/dxContextMenu/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration/#visible') property of the ContextMenu to a state property. After that, change this state property, and the context menu will be opened or closed:
+
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
diff --git a/concepts/05 UI Components/ContextMenu/Demos.md b/concepts/05 UI Components/ContextMenu/Demos.md
new file mode 100644
index 0000000000..034ee55925
--- /dev/null
+++ b/concepts/05 UI Components/ContextMenu/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Basics](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ContextMenu/Basics/)
+- [Templates](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ContextMenu/Templates/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/DataGrid/15 Columns/35 Hide a Column Using the API.md b/concepts/05 UI Components/DataGrid/15 Columns/35 Hide a Column Using the API.md
index c8099dddb5..d205cd9b74 100644
--- a/concepts/05 UI Components/DataGrid/15 Columns/35 Hide a Column Using the API.md
+++ b/concepts/05 UI Components/DataGrid/15 Columns/35 Hide a Column Using the API.md
@@ -1,12 +1,14 @@
-A column is considered hidden when its [visible](/api-reference/_hidden/GridBaseColumn/visible.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visible') property is **false**. In Angular, Vue, and React, you can bind this property to a component or state property and change that property. In jQuery, you can change this property using the [columnOption(id, optionName, optionValue)](/api-reference/10%20UI%20Components/GridBase/3%20Methods/columnOption(id_optionName_optionValue).md '/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#columnOptionid_optionName_optionValue') method. For example, the following code hides an *"Email"* column:
-
---
##### jQuery
+A column is considered hidden when its [visible](/api-reference/_hidden/GridBaseColumn/visible.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visible') property is **false**. You can change this property using the [columnOption(id, optionName, optionValue)](/api-reference/10%20UI%20Components/GridBase/3%20Methods/columnOption(id_optionName_optionValue).md '/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#columnOptionid_optionName_optionValue') method. For example, the following code hides an *"Email"* column:
+
$("#dataGridContainer").dxDataGrid("columnOption", "Email", "visible", false);
##### Angular
+A column is considered hidden when its [visible](/api-reference/_hidden/GridBaseColumn/visible.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visible') property is **false**. You can bind this property to a component property and change the latter property. For example, the following code hides an *"Email"* column:
+
@@ -89,6 +93,8 @@ A column is considered hidden when its [visible](/api-reference/_hidden/GridBase
##### React
+A column is considered hidden when its [visible](/api-reference/_hidden/GridBaseColumn/visible.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visible') property is **false**. You can bind this property to a state property and change the latter property. For example, the following code hides an *"Email"* column:
+
import React from 'react';
diff --git a/concepts/05 UI Components/DataGrid/Demos.md b/concepts/05 UI Components/DataGrid/Demos.md
new file mode 100644
index 0000000000..d485bbcbcf
--- /dev/null
+++ b/concepts/05 UI Components/DataGrid/Demos.md
@@ -0,0 +1,121 @@
+#include demos-intro
+
+**Data Binding**
+
+- [Simple Array](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SimpleArray/)
+- [JSON Data](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AjaxRequest/)
+- [OData Service](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/OdataService/)
+- [Custom Data Source](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomDataSource/)
+- [Web API Service](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/WebAPIService/)
+- [SignalR Service](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/SignalRService/)
+- [Real-Time Updates](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RealTimeUpdates/)
+
+**Paging and Scrolling**
+
+- [Record Paging](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecordPaging/)
+- [Local Virtual Scrolling](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/VirtualScrolling/)
+- [Remote Virtual Scrolling](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RemoteVirtualScrolling/)
+- [Horizontal Virtual Scrolling](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/HorizontalVirtualScrolling/)
+- [Infinite Scrolling](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/InfiniteScrolling/)
+
+**Editing**
+
+- [Row Editing and Editing Events](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RowEditingAndEditingEvents/)
+- [Cell Editing and Editing API](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CellEditingAndEditingAPI/)
+- [Batch Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/BatchEditing/)
+- [Form Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FormEditing/)
+- [Popup Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PopupEditing/)
+- [Custom Editors](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomEditors/)
+- [Data Validation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/DataValidation/)
+- [Cascading Lookups](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CascadingLookups/)
+- [Collaborative Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CollaborativeEditing/)
+- [CRUD Operations](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CRUDOperations/)
+- [Customize Keyboard Navigation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomizeKeyboardNavigation/)
+- [Batch Update Request](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/BatchUpdateRequest/)
+- [Edit State Management](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/EditStateManagement/)
+- [Custom New Record Position](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomNewRecordPosition/)
+
+**Grouping**
+
+- [Record Grouping](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecordGrouping/)
+- [Remote Grouping](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RemoteGrouping/)
+
+**Filtering and Sorting**
+
+- [Multiple Sorting](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MultipleSorting/)
+- [Filtering](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Filtering/)
+- [Filtering API](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilteringAPI/)
+- [Filter Panel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/)
+
+**Row Drag & Drop**
+
+- [Local Reordering](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/LocalReordering/)
+- [Remote Reordering](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RemoteReordering/)
+- [Drag & Drop Between Two Grids](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/DnDBetweenGrids/)
+
+**Selection**
+
+- [Row Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RowSelection/)
+- [Multiple Record Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MultipleRecordSelectionModes/)
+- [Multiple Record Selection API](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MultipleRecordSelectionAPI/)
+- [Deferred Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/DeferredSelection/)
+
+**Columns**
+
+- [Column Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnCustomization/)
+- [Columns Based on a Data Source](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnsBasedOnADataSource/)
+- [Multi-Level Headers (Bands)](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MultiRowHeadersBands/)
+- [Column Resizing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnResizing/)
+- [Command Column Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/)
+
+**Appearance**
+
+- [Appearance](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Appearance/)
+- [Right-To-Left Support](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RightToLeftSupport/)
+
+**Templates**
+
+- [Column Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnTemplate/)
+- [Row Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RowTemplate/)
+- [Cell Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CellCustomization/)
+- [Toolbar Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ToolbarCustomization/)
+
+**Data Summaries**
+
+- [Total Summaries](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/GridSummaries/)
+- [Group Summaries](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/GroupSummaries/)
+- [Custom Summaries](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CustomSummaries/)
+- [Recalculate While Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/RecalculateWhileEditing/)
+
+**Master-Detail**
+
+- [Master-Detail View](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/)
+- [Master-Detail API](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailAPI/)
+- [Advanced Master-Detail View](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/AdvancedMasterDetailView/)
+
+**Export to PDF**
+
+- [Export to PDF Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PDFOverview/)
+- [Cell Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PDFCellCustomization/)
+- [Header and Footer](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PDFHeaderAndFooter/)
+- [Export Multiple Grids](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PDFExportMultipleGrids/)
+- [Export Images](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/PDFExportImages/)
+
+**Export to Excel**
+
+- [Export to Excel Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ExcelJSOverview/)
+- [Cell Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ExcelJSCellCustomization/)
+- [Header and Footer](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ExcelJSHeaderAndFooter/)
+- [Export Multiple Grids](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ExcelJSExportMultipleGrids/)
+- [Export Images](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ExcelJSExportImages/)
+
+**Adaptability**
+
+- [Grid Adaptability Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/GridAdaptabilityOverview/)
+- [Grid Columns Hiding Priority](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/GridColumnsHidingPriority/)
+
+**More Features**
+
+- [Focused Row](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FocusedRow/)
+- [State Persistence](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/StatePersistence/)
+- [Keyboard Navigation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/KeyboardNavigation/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/DateBox/Demos.md b/concepts/05 UI Components/DateBox/Demos.md
new file mode 100644
index 0000000000..4620a3c5f9
--- /dev/null
+++ b/concepts/05 UI Components/DateBox/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Overview/)
+- [Formatting](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DateBox/Formatting/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/15 Add the Diagram Component to an Angular CLI Application.md b/concepts/05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application.md
similarity index 100%
rename from concepts/05 UI Components/Diagram/00 Getting Started with Diagram/15 Add the Diagram Component to an Angular CLI Application.md
rename to concepts/05 UI Components/Diagram/05 Add the Diagram Component to an Angular CLI Application.md
diff --git a/concepts/05 UI Components/Diagram/28 Restrict Edit Operations/20 Prohibit Individual Operations.md b/concepts/05 UI Components/Diagram/28 Restrict Edit Operations/20 Prohibit Individual Operations.md
index 6a48810513..1a38d9a1a2 100644
--- a/concepts/05 UI Components/Diagram/28 Restrict Edit Operations/20 Prohibit Individual Operations.md
+++ b/concepts/05 UI Components/Diagram/28 Restrict Edit Operations/20 Prohibit Individual Operations.md
@@ -83,51 +83,51 @@ Every time a user attempts an edit operation, the UI component raises the [reque
addShape
- DiagramAddShapeArgs
+ DiagramAddShapeArgs
addShapeFromToolbox
- DiagramAddShapeFromToolboxArgs
+ DiagramAddShapeFromToolboxArgs
beforeChangeConnectorText
- DiagramBeforeChangeConnectorTextArgs
+ DiagramBeforeChangeConnectorTextArgs
beforeChangeShapeText
- DiagramBeforeChangeShapeTextArgs
+ DiagramBeforeChangeShapeTextArgs
changeConnection
- DiagramChangeConnectionArgs
+ DiagramChangeConnectionArgs
changeConnectorPoints
- DiagramChangeConnectorPointsArgs
+ DiagramChangeConnectorPointsArgs
changeConnectorText
- DiagramChangeConnectorTextArgs
+ DiagramChangeConnectorTextArgs
changeShapeText
- DiagramChangeShapeTextArgs
+ DiagramChangeShapeTextArgs
deleteConnector
- DiagramDeleteConnectorArgs
+ DiagramDeleteConnectorArgs
deleteShape
- DiagramDeleteShapeArgs
+ DiagramDeleteShapeArgs
moveShape
- DiagramMoveShapeArgs
+ DiagramMoveShapeArgs
resizeShape
- DiagramResizeShapeArgs
+ DiagramResizeShapeArgs
diff --git a/concepts/05 UI Components/Diagram/Demos.md b/concepts/05 UI Components/Diagram/Demos.md
new file mode 100644
index 0000000000..2fcb5add37
--- /dev/null
+++ b/concepts/05 UI Components/Diagram/Demos.md
@@ -0,0 +1,36 @@
+#include demos-intro
+
+**Data Binding**
+
+- [Node and Edge Arrays](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/NodesAndEdgesArrays/)
+- [Node List: Linear Array](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/NodesArrayPlainStructure/)
+- [Node List: Hierarchical Array](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/NodesArrayHierarchicalStructure/)
+- [Advanced Data Binding](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/AdvancedDataBinding/)
+- [Web API Service](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/WebAPIService/)
+
+**Featured Shapes**
+
+- [Containers](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/Containers/)
+- [OrgChart Shapes](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/ImagesInShapes/)
+
+**Custom Shapes**
+
+- [Background Images](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/CustomShapesWithIcons/)
+- [Shapes with Base Type](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/CustomShapesWithTexts/)
+- [Templates](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/CustomShapesWithTemplates/)
+- [Templates with Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/CustomShapesWithTemplatesWithEditing/)
+
+**Document Capabilities**
+
+- [Read-Only Mode](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/ReadOnly/)
+- [Simple View](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/SimpleView/)
+
+**User Interaction**
+
+- [Item Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/ItemSelection/)
+- [Editing Restrictions](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/OperationRestrictions/)
+
+**More Features**
+
+- [UI Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/UICustomization/)
+- [Adaptability](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Diagram/Adaptability/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/00 Create the Drawer.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/00 Create the Drawer.md
similarity index 100%
rename from concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/00 Create the Drawer.md
rename to concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/00 Create the Drawer.md
diff --git a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/10 Open and Close the Drawer.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/10 Open and Close the Drawer.md
similarity index 100%
rename from concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/10 Open and Close the Drawer.md
rename to concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/10 Open and Close the Drawer.md
diff --git a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/15 Implement Navigation.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/15 Implement Navigation.md
similarity index 100%
rename from concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/15 Implement Navigation.md
rename to concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/15 Implement Navigation.md
diff --git a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/20 Configure the Reveal Behavior.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/20 Configure the Reveal Behavior.md
similarity index 100%
rename from concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/20 Configure the Reveal Behavior.md
rename to concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/20 Configure the Reveal Behavior.md
diff --git a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/30 Configure Interaction with the View.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/30 Configure Interaction with the View.md
similarity index 100%
rename from concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/30 Configure Interaction with the View.md
rename to concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/30 Configure Interaction with the View.md
diff --git a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/40 Change the Position.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/40 Change the Position.md
similarity index 100%
rename from concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/40 Change the Position.md
rename to concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/40 Change the Position.md
diff --git a/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md
new file mode 100644
index 0000000000..39f9e040e6
--- /dev/null
+++ b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md
@@ -0,0 +1,34 @@
+#include tutorials-intro-installationnote
+
+The Drawer is a dismissible or permanently visible panel used for navigation in responsive web application layouts.
+
+---
+##### jQuery
+
+This tutorial shows how to create a Drawer that allows a user to switch between pages. The Drawer is opened and closed via a button on a toolbar.
+
+##### Angular
+
+DevExtreme supplies an [application template](/concepts/40%20Angular%20Components/30%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Angular_Components/Application_Template/') that implements a responsive layout using the Drawer. You can use the template instead of following this tutorial.
+
+If the template is unsuitable, follow the instructions below to create a Drawer that allows a user to switch between pages. The Drawer is opened and closed via a button on a toolbar.
+
+##### Vue
+
+DevExtreme supplies an [application template](/concepts/55%20Vue%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Vue_Components/Application_Template/') that implements a responsive layout using the Drawer. You can use the template instead of following this tutorial.
+
+If the template is unsuitable, follow the instructions below to create a Drawer that allows a user to switch between pages. The Drawer is opened and closed via a button on a toolbar.
+
+##### React
+
+DevExtreme supplies an [application template](/concepts/50%20React%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/React_Components/Application_Template/') that implements a responsive layout using the Drawer. You can use the template instead of following this tutorial.
+
+If the template is unsuitable, follow the instructions below to create a Drawer that allows a user to switch between pages. The Drawer is opened and closed via a button on a toolbar.
+
+---
+
+
+
+Refer to the sections below for details on each configuration step. You can also find the full code in the following GitHub repository: getting-started-with-drawer.
+
+[tags]dxdrawer
diff --git a/concepts/05 UI Components/Drawer/Demos.md b/concepts/05 UI Components/Drawer/Demos.md
new file mode 100644
index 0000000000..3b3dad4a7b
--- /dev/null
+++ b/concepts/05 UI Components/Drawer/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Left or Right Position](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Drawer/LeftOrRightPosition/)
+- [Top or Bottom Position](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Drawer/TopOrBottomPosition/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md b/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md
deleted file mode 100644
index a82d5c41d0..0000000000
--- a/concepts/05 UI Components/Drawer/Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md
+++ /dev/null
@@ -1,17 +0,0 @@
-#include tutorials-intro-installationnote
-
-The Drawer is a dismissible or permanently visible panel that you can use for navigation in responsive web application layouts.
-
-DevExtreme supplies application templates for Angular, Vue, and React. They implement a responsive layout that uses the Drawer. You can use these templates instead of following the tutorial. Refer to the articles below for more information:
-
-- [DevExtreme Angular Template](/concepts/40%20Angular%20Components/30%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Angular_Components/Application_Template/')
-- [DevExtreme Vue Template](/concepts/55%20Vue%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/Vue_Components/Application_Template/')
-- [DevExtreme React Template](/concepts/50%20React%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/React_Components/Application_Template/')
-
-If the templates are unsuitable or you use jQuery, follow the instructions in this tutorial. The tutorial creates a Drawer that allows a user to switch between pages. Users can click a button on a toolbar to open and close the Drawer.
-
-
-
-Refer to the sections below for details on each configuration step. You can also find the full code in the following GitHub repository: getting-started-with-drawer.
-
-[tags]dxdrawer
diff --git a/concepts/05 UI Components/DropDownBox/01 Choose a Drop-Down Editor.md b/concepts/05 UI Components/DropDownBox/01 Choose a Drop-Down Editor.md
new file mode 100644
index 0000000000..de31b0da01
--- /dev/null
+++ b/concepts/05 UI Components/DropDownBox/01 Choose a Drop-Down Editor.md
@@ -0,0 +1 @@
+#include editors-how-to-choose
\ No newline at end of file
diff --git a/concepts/05 UI Components/DropDownBox/Demos.md b/concepts/05 UI Components/DropDownBox/Demos.md
new file mode 100644
index 0000000000..968274acdd
--- /dev/null
+++ b/concepts/05 UI Components/DropDownBox/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Single Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownBox/SingleSelection/)
+- [Multiple Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownBox/MultipleSelection/)
diff --git a/concepts/05 UI Components/DropDownButton/Demos.md b/concepts/05 UI Components/DropDownButton/Demos.md
new file mode 100644
index 0000000000..7a0ccc0713
--- /dev/null
+++ b/concepts/05 UI Components/DropDownButton/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Drop-Down Button](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DropDownButton/Overview/)
diff --git a/concepts/05 UI Components/FileManager/Demos.md b/concepts/05 UI Components/FileManager/Demos.md
new file mode 100644
index 0000000000..d00d1b0c62
--- /dev/null
+++ b/concepts/05 UI Components/FileManager/Demos.md
@@ -0,0 +1,16 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/Overview/)
+
+**File System Types**
+
+- [Physical File System](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/BindingToFileSystem/)
+- [Entity Framework ORM](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/BindingToEF/)
+- [Azure Server-Side Binding](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureServerBinding/)
+- [Azure Client-Side Binding](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/AzureClientBinding/)
+- [Hierarchical JS Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/BindingToHierarchicalStructure/)
+
+**Customization**
+
+- [Custom Thumbnails](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/CustomThumbnails/)
+- [Toolbar and Context Menu](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileManager/UICustomization/)
diff --git a/concepts/05 UI Components/FileUploader/Demos.md b/concepts/05 UI Components/FileUploader/Demos.md
new file mode 100644
index 0000000000..0f4698c9a5
--- /dev/null
+++ b/concepts/05 UI Components/FileUploader/Demos.md
@@ -0,0 +1,8 @@
+#include demos-intro
+
+- [Form Upload](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileSelection/)
+- [Async Upload](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/FileUploading/)
+- [Validation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/Validation/)
+- [Chunk Uploading](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/ChunkUploading/)
+- [Direct Upload to Azure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/AzureDirectUploading/)
+- [Custom Drop Zone](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FileUploader/CustomDropzone/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/FilterBuilder/Demos.md b/concepts/05 UI Components/FilterBuilder/Demos.md
new file mode 100644
index 0000000000..c0bdbf5bf2
--- /dev/null
+++ b/concepts/05 UI Components/FilterBuilder/Demos.md
@@ -0,0 +1,5 @@
+#include demos-intro
+
+- [FilterBuilder with DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FilterBuilder/WithDataGrid/)
+- [FilterBuilder with List](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FilterBuilder/WithList/)
+- [Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FilterBuilder/Customization/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/00 Getting Started with Floating Action Button.md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/00 Getting Started with Floating Action Button.md
index 562f512188..88bb2f95fc 100644
--- a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/00 Getting Started with Floating Action Button.md
+++ b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/00 Getting Started with Floating Action Button.md
@@ -10,15 +10,35 @@ From this tutorial, you will learn how to create a single- or multi-action FAB a
[note]
-Code examples in this tutorial use icons from the [Ionicons](https://ionicons.com) library. If you are going to replicate the examples in your Angular, Vue, or React application, install the `ionicons` npm package:
+---
+##### jQuery
- npm install ionicons@4 --save
-
-With jQuery, reference the Ionicons stylesheet in the `` of your page:
+Code examples in this tutorial use icons from the Ionicons library. If you are going to replicate the examples in your application, reference the Ionicons stylesheet within in the `` section of your page:
+
+##### Angular
+
+Code examples in this tutorial use icons from the Ionicons library. If you are going to replicate the examples in your application, install the `ionicons` npm package:
+
+ npm install ionicons@4 --save
+
+##### Vue
+
+Code examples in this tutorial use icons from the Ionicons library. If you are going to replicate the examples in your application, install the `ionicons` npm package:
+
+ npm install ionicons@4 --save
+
+##### React
+
+Code examples in this tutorial use icons from the Ionicons library. If you are going to replicate the examples in your application, install the `ionicons` npm package:
+
+ npm install ionicons@4 --save
+
+---
+
[/note]
[tags]dxspeeddialaction
\ No newline at end of file
diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md
index 71e7a51b39..52ee66c906 100644
--- a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md
+++ b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md
@@ -2,9 +2,30 @@ Different screens use different FABs because a FAB should perform or contain onl
-To implement this behavior in Angular, Vue, and React, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case.
+---
+##### jQuery
+
+To implement this behavior, change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**.
+
+##### Angular
+
+To implement this behavior, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case.
+
+The approach is different if the components have the same URL, or actions are in the same component. Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**.
+
+##### Vue
+
+To implement this behavior, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case.
+
+The approach is different if the components have the same URL, or actions are in the same component. Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**.
+
+##### React
+
+To implement this behavior, you can place the actions in separate components if the components have different URLs. No further configuration is required in this case.
-The approach is different if the components have the same URL, or actions are in the same component, or when you configure this behavior in jQuery. Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**.
+The approach is different if the components have the same URL, or actions are in the same component. Change the [visible](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#visible') property of each SpeedDialAction when the screen is switched. Set this property to **true** if an action can be performed on the current screen. Otherwise, set it to **false**.
+
+---
The following code shows the TabPanel configuration and an empty `switchSDA` function. This function controls the actions' visibility when it is implemented later.
diff --git a/concepts/05 UI Components/Floating Action Button/Demos.md b/concepts/05 UI Components/Floating Action Button/Demos.md
new file mode 100644
index 0000000000..fa07c3e607
--- /dev/null
+++ b/concepts/05 UI Components/Floating Action Button/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Floating Action Button](https://js.devexpress.com/Demos/WidgetsGallery/Demo/FloatingActionButton/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Form/20 Change Properties at Runtime/05 Form Properties.md b/concepts/05 UI Components/Form/20 Change Properties at Runtime/05 Form Properties.md
index 1ca4d7950c..fff012e0a0 100644
--- a/concepts/05 UI Components/Form/20 Change Properties at Runtime/05 Form Properties.md
+++ b/concepts/05 UI Components/Form/20 Change Properties at Runtime/05 Form Properties.md
@@ -1,4 +1,8 @@
-To change the [Form configuration](/api-reference/10%20UI%20Components/dxForm/1%20Configuration '/Documentation/ApiReference/UI_Components/dxForm/Configuration/') at runtime, call the [option(optionName, optionValue)](/api-reference/10%20UI%20Components/Component/3%20Methods/option(optionName_optionValue).md '/Documentation/ApiReference/UI_Components/dxForm/Methods/#optionoptionName_optionValue') method. This approach is more typical of jQuery.
+
+---
+##### jQuery
+
+To change the [Form configuration](/api-reference/10%20UI%20Components/dxForm/1%20Configuration '/Documentation/ApiReference/UI_Components/dxForm/Configuration/') at runtime, call the [option(optionName, optionValue)](/api-reference/10%20UI%20Components/Component/3%20Methods/option(optionName_optionValue).md '/Documentation/ApiReference/UI_Components/dxForm/Methods/#optionoptionName_optionValue') method.
$(function() {
@@ -20,12 +24,10 @@ To change the [Form configuration](/api-reference/10%20UI%20Components/dxForm/1%
});
});
-With Angular, Vue, or React, bind the property that should be changed to a component property.
-
----
-
##### Angular
+To change the [Form configuration](/api-reference/10%20UI%20Components/dxForm/1%20Configuration '/Documentation/ApiReference/UI_Components/dxForm/Configuration/') at runtime, bind the property that should be changed to a component property:
+
@@ -97,6 +101,8 @@ With Angular, Vue, or React, bind the property that should be changed to a compo
##### React
+To change the [Form configuration](/api-reference/10%20UI%20Components/dxForm/1%20Configuration '/Documentation/ApiReference/UI_Components/dxForm/Configuration/') at runtime, bind the property that should be changed to a state property:
+
import React from 'react';
@@ -147,8 +153,6 @@ With Angular, Vue, or React, bind the property that should be changed to a compo
---
#####See Also#####
-- [Get and Set Properties - jQuery](/concepts/58%20jQuery%20Components/20%20Component%20Configuration%20Syntax/05%20Get%20and%20Set%20Properties/00%20Get%20and%20Set%20Properties.md '/Documentation/Guide/jQuery_Components/Component_Configuration_Syntax/#Get_and_Set_Properties')
-- **Change Options**: [Angular](/concepts/40%20Angular%20Components/20%20Component%20Configuration%20Syntax/33%20Two-Way%20Property%20Binding.md '/Documentation/Guide/Angular_Components/Component_Configuration_Syntax/#Two-Way_Property_Binding') | [AngularJS](/concepts/Getting%20Started/Widget%20Basics%20-%20AngularJS/05%20Change%20Options.md '/Documentation/Guide/Getting_Started/Widget_Basics_-_AngularJS/Change_Options/') | [Knockout](/concepts/Getting%20Started/Widget%20Basics%20-%20Knockout/05%20Change%20Options.md '/Documentation/Guide/Getting_Started/Widget_Basics_-_Knockout/Change_Options/')
- [Form Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/GroupedFields)
- [Form API Reference](/api-reference/10%20UI%20Components/dxForm '/Documentation/ApiReference/UI_Components/dxForm/')
diff --git a/concepts/05 UI Components/Form/20 Change Properties at Runtime/10 Item Properties.md b/concepts/05 UI Components/Form/20 Change Properties at Runtime/10 Item Properties.md
index 0ed9f08af3..5ef497849c 100644
--- a/concepts/05 UI Components/Form/20 Change Properties at Runtime/10 Item Properties.md
+++ b/concepts/05 UI Components/Form/20 Change Properties at Runtime/10 Item Properties.md
@@ -1,3 +1,7 @@
+
+---
+##### jQuery
+
To change a single item property at runtime, call the [itemOption(id, option, value)](/api-reference/10%20UI%20Components/dxForm/3%20Methods/itemOption(id_option_value).md '/Documentation/ApiReference/UI_Components/dxForm/Methods/#itemOptionid_option_value') method. This approach is more typical of jQuery. If the needed item is [in a group](/concepts/05%20UI%20Components/Form/10%20Organize%20Simple%20Items/05%20In%20Groups '/Documentation/Guide/UI_Components/Form/Organize_Simple_Items/In_Groups/') or [in a tab](/concepts/05%20UI%20Components/Form/10%20Organize%20Simple%20Items/10%20In%20Tabs '/Documentation/Guide/UI_Components/Form/Organize_Simple_Items/In_Tabs/'), the *field* parameter should be given the group caption or tab title followed by the item's name. An example is shown below.
@@ -42,12 +46,10 @@ When you call it with the *id* parameter only, this method returns the current c
});
});
-In Angular, Vue, or React, bind the property that should be changed to a component property.
-
----
-
##### Angular
+To change an item property at runtime, bind the property that should be changed to a component property:
+
@@ -85,6 +87,8 @@ In Angular, Vue, or React, bind the property that should be changed to a compone
##### Vue
+To change an item property at runtime, bind the property that should be changed to a component property:
+
@@ -129,6 +133,8 @@ In Angular, Vue, or React, bind the property that should be changed to a compone
##### React
+To change an item property at runtime, bind the property that should be changed to a state property:
+
import React from 'react';
diff --git a/concepts/05 UI Components/Form/20 Change Properties at Runtime/15 Editor Properties.md b/concepts/05 UI Components/Form/20 Change Properties at Runtime/15 Editor Properties.md
index 38aa9126cb..9a45041383 100644
--- a/concepts/05 UI Components/Form/20 Change Properties at Runtime/15 Editor Properties.md
+++ b/concepts/05 UI Components/Form/20 Change Properties at Runtime/15 Editor Properties.md
@@ -1,3 +1,7 @@
+
+---
+##### jQuery
+
To change the properties of an editor, get its instance first using the [getEditor(dataField)](/api-reference/10%20UI%20Components/dxForm/3%20Methods/getEditor(dataField).md '/Documentation/ApiReference/UI_Components/dxForm/Methods/#getEditordataField') method. After that, call the **option(optionName, optionValue)** or **option(optionName, options)** method of this instance. This approach is more typical of jQuery.
@@ -23,12 +27,10 @@ To change the properties of an editor, get its instance first using the [getEdit
[note]The **getEditor(dataField)** method is available for visible form items only.
-With Angular, Vue, or React, bind the property that should be changed in the [editorOptions](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/editorOptions.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#editorOptions') object to a component property.
-
----
-
##### Angular
+To change the properties of an editor, bind the property that should be changed in the [editorOptions](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/editorOptions.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#editorOptions') object to a component property.
+
@@ -64,6 +66,8 @@ With Angular, Vue, or React, bind the property that should be changed in the [ed
##### Vue
+To change the properties of an editor, bind the property that should be changed in the [editorOptions](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/editorOptions.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#editorOptions') object to a component property.
+
@@ -114,6 +118,8 @@ With Angular, Vue, or React, bind the property that should be changed in the [ed
##### React
+To change the properties of an editor, bind the property that should be changed in the [editorOptions](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/editorOptions.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#editorOptions') object to a state property.
+
import React from 'react';
diff --git a/concepts/05 UI Components/Form/30 Update Form Data Using the API.md b/concepts/05 UI Components/Form/30 Update Form Data Using the API.md
index f6e14d6d62..280f58d602 100644
--- a/concepts/05 UI Components/Form/30 Update Form Data Using the API.md
+++ b/concepts/05 UI Components/Form/30 Update Form Data Using the API.md
@@ -1,3 +1,7 @@
+
+---
+##### jQuery
+
If you need to update form data at runtime, redefine the [formData](/api-reference/10%20UI%20Components/dxForm/1%20Configuration/formData.md '/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData') object. In this case, form item values are updated automatically and the UI component is rerendered from scratch. In the following example, the [SelectBox](/api-reference/10%20UI%20Components/dxSelectBox '/Documentation/ApiReference/UI_Components/dxSelectBox/') UI component changes the **formData** object.
@@ -60,11 +64,10 @@ The Form UI component provides methods that update specific **formData** fields
});
});
-With Angular, Vue or React, two-way binding to a component property is sufficient to update [formData](/api-reference/10%20UI%20Components/dxForm/1%20Configuration/formData.md '/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData') at runtime. Swapping the whole **formData** object rerenders the UI component from scratch; updating specific **formData** fields rerenders only the corresponding editors.
-
----
##### Angular
+If you need to update form data at runtime, use two-way binding to bind the [formData](/api-reference/10%20UI%20Components/dxForm/1%20Configuration/formData.md '/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData') property to a component property. Swapping the whole **formData** object rerenders the UI component from scratch; updating specific **formData** fields rerenders only the corresponding editors.
+
@@ -133,6 +138,8 @@ With Angular, Vue or React, two-way binding to a component property is sufficien
##### React
+If you need to update form data at runtime, bind the [formData](/api-reference/10%20UI%20Components/dxForm/1%20Configuration/formData.md '/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData') property to a state property. Swapping the whole **formData** object rerenders the UI component from scratch; updating specific **formData** fields rerenders only the corresponding editors.
+
import React from 'react';
diff --git a/concepts/05 UI Components/Form/Demos.md b/concepts/05 UI Components/Form/Demos.md
new file mode 100644
index 0000000000..b244082107
--- /dev/null
+++ b/concepts/05 UI Components/Form/Demos.md
@@ -0,0 +1,8 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/Overview/)
+- [Customize Item](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/CustomizeItem/)
+- [Grouped Fields](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/GroupedFields/)
+- [Columns Adaptability](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/ColumnsAdaptability/)
+- [Validation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/Validation/)
+- [Customize Fields at Runtime](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/UpdateItemsDynamically/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Funnel/Demos.md b/concepts/05 UI Components/Funnel/Demos.md
new file mode 100644
index 0000000000..6006109ec7
--- /dev/null
+++ b/concepts/05 UI Components/Funnel/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Funnel Chart](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/FunnelChart/)
+- [Pyramid Chart](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/PyramidChart/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md b/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md
index 6d4208892f..1289ea89df 100644
--- a/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md
+++ b/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md
@@ -107,9 +107,23 @@ Gallery items are not sctrictly images. They can contain text or other elements
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#itemTemplate').
---
+##### jQuery
+
+
+ $(function () {
+ $("#galleryContainer").dxGallery({
+ dataSource: galleryData,
+ height: 300,
+ itemTemplate: function(e){
+ e.itemElement.empty();
+ e.itemElement.append("![\""](\"")
");
+ }
+ });
+ });
##### Angular
@@ -217,20 +231,8 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for menu items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#itemTemplate') callback function as shown in the following code.
-
-
- $(function () {
- $("#galleryContainer").dxGallery({
- dataSource: galleryData,
- height: 300,
- itemTemplate: function(e){
- e.itemElement.empty();
- e.itemElement.append("");
- }
- });
- });
+---
+##### jQuery
You can also customize an individual Gallery item. For this purpose, declare a template for this item as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxGallery/Configuration/items/#template') field of the item's data object.
@@ -247,7 +249,7 @@ You can also customize an individual Gallery item. For this purpose, declare a t
// ...
];
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+---
#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gallery/ItemTemplate/",
diff --git a/concepts/05 UI Components/Gallery/Demos.md b/concepts/05 UI Components/Gallery/Demos.md
new file mode 100644
index 0000000000..6ef3b08443
--- /dev/null
+++ b/concepts/05 UI Components/Gallery/Demos.md
@@ -0,0 +1,5 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gallery/Overview/)
+- [Item Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gallery/ItemTemplate/)
+- [Item 3rd-Party Engine Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gallery/Item3RdPartyEngineTemplate/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Gantt/Demos.md b/concepts/05 UI Components/Gantt/Demos.md
new file mode 100644
index 0000000000..852a83f5d4
--- /dev/null
+++ b/concepts/05 UI Components/Gantt/Demos.md
@@ -0,0 +1,26 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/Overview/)
+
+**Data**
+
+- [Data Binding and Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/DataBinding/)
+- [Validation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/Validation/)
+
+**UI Customization**
+
+- [Chart Appearance](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/ChartAppearance/)
+- [Task Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/TaskTemplate/)
+- [Toolbar](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/Toolbar/)
+- [Context Menu](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/ContextMenu/)
+
+**Filtering**
+
+- [Filter Row](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/FilterRow/)
+- [Header Filter](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/HeaderFilter/)
+
+**More Features**
+
+- [Strip Lines](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/StripLines/)
+- [Export to PDF](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/ExportToPDF/)
+- [Sorting](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/Sorting/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/HtmlEditor/Demos.md b/concepts/05 UI Components/HtmlEditor/Demos.md
new file mode 100644
index 0000000000..ef8ee4d62d
--- /dev/null
+++ b/concepts/05 UI Components/HtmlEditor/Demos.md
@@ -0,0 +1,7 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/Overview/)
+- [Output Formats](https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/OutputFormats/)
+- [Toolbar Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/ToolbarCustomization/)
+- [Mentions](https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/Mentions/)
+- [Tables](https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/Tables/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/LinearGauge/Demos.md b/concepts/05 UI Components/LinearGauge/Demos.md
new file mode 100644
index 0000000000..9aaa665858
--- /dev/null
+++ b/concepts/05 UI Components/LinearGauge/Demos.md
@@ -0,0 +1,10 @@
+#include demos-intro
+
+- [Update Linear Gauge Data at Runtime](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/UpdateLinearGaugeDataAtRuntime/)
+- [Scale Custom Tick Interval](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/ScaleCustomTickInterval/)
+- [Scale Custom Tick Values](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/ScaleCustomTickValues/)
+- [Different Value Indicator Types](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/DifferentValueIndicatorTypesLinearGauge/)
+- [Different Subvalue Indicator Types](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/DifferentSubvalueIndicatorTypesLinearGauge/)
+- [Base Value for Range Bar](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/BaseValueForRangeBar/)
+- [Custom Layout](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/CustomLayoutLinearGauge/)
+- [Variable Number of Subvalue Indicators](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gauges/VariableNumberOfSubvalueIndicators/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/List/05 Customize Item Appearance.md b/concepts/05 UI Components/List/05 Customize Item Appearance.md
index c5ff350bcc..d91ccdbce2 100644
--- a/concepts/05 UI Components/List/05 Customize Item Appearance.md
+++ b/concepts/05 UI Components/List/05 Customize Item Appearance.md
@@ -96,9 +96,31 @@ For a minor customization of List items, you can define [specific fields](/api-r
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemTemplate').
---
+##### jQuery
+
+
+ const fruits = [
+ { name: "Apples", count: 10 },
+ { name: "Oranges", count: 12 },
+ { name: "Lemons", count: 15 },
+ { name: "Pears", count: 20 },
+ { name: "Pineapples", count: 3 }
+ ];
+
+ $(function() {
+ $("#listContainer").dxList({
+ dataSource: fruits,
+ itemTemplate: function(data, _, element) {
+ element.append(
+ $("").text(data.fruit), $("
"), + $("![]()
").attr("src", itemData.imgSrc),
+ $("").text(itemData.name)
+ .css("display", "inline-block")
+ .css("font-style", (itemIndex % 2 == 0) ? "italic" : "normal")
+ );
+ }
+ });
+ });
+
##### Angular
@@ -240,36 +271,8 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/dxLookup/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#itemTemplate') callback function as shown in the following code.
-
-
- const lookupData = [{
- id: 1,
- name: "HD Video Player",
- imgSrc: "images/products/1-small.png"
- }, {
- id: 2,
- name: "UltraHD Player",
- imgSrc: "images/products/2-small.png"
- },
- // ...
- ];
-
- $(function() {
- $("#lookupContainer").dxLookup({
- dataSource: lookupData,
- valueExpr: 'id',
- displayExpr: 'name',
- itemTemplate: function (itemData, itemIndex, itemElement) {
- return $("").append(
- $("![]()
").attr("src", itemData.imgSrc),
- $("").text(itemData.name)
- .css("display", "inline-block")
- .css("font-style", (itemIndex % 2 == 0) ? "italic" : "normal")
- );
- }
- });
- });
+---
+##### jQuery
You can also customize an individual Lookup item. For this purpose, declare a template for this item as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/items/#template') field.
@@ -285,6 +288,8 @@ You can also customize an individual Lookup item. For this purpose, declare a te
// ...
];
+---
+
Using similar techniques, you can customize the input field of the Lookup. The template for it should be assigned to the [fieldTemplate](/api-reference/10%20UI%20Components/dxLookup/1%20Configuration/fieldTemplate.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#fieldTemplate') property.
---
@@ -428,8 +433,6 @@ Using similar techniques, you can customize the input field of the Lookup. The t
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/"
}
-In addition, you can use a 3rd-party template engine to perform the needed customizations. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
-
#####See Also#####
- [Lookup - Customize the Drop-Down Menu](/concepts/05%20UI%20Components/Lookup/20%20Customize%20the%20Appearance/08%20Customize%20the%20Drop-Down%20Menu.md '/Documentation/Guide/UI_Components/Lookup/Customize_the_Appearance/Customize_the_Drop-Down_Menu/')
diff --git a/concepts/05 UI Components/Lookup/35 Lookup vs SelectBox.md b/concepts/05 UI Components/Lookup/35 Lookup vs SelectBox.md
index 86a83e0ccf..fc8194ee48 100644
--- a/concepts/05 UI Components/Lookup/35 Lookup vs SelectBox.md
+++ b/concepts/05 UI Components/Lookup/35 Lookup vs SelectBox.md
@@ -29,4 +29,4 @@ The SelectBox looks the same on any platform, while Lookup changes its appearanc
}
#####See Also#####
-- [How to Choose a Drop-Down Editor](/concepts/Common/Editors%20Concepts/How%20to%20Choose%20a%20Drop-Down%20Editor.md '/Documentation/Guide/Common/Editors_Concepts/How_to_Choose_a_Drop-Down_Editor/')
\ No newline at end of file
+- [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/)
diff --git a/concepts/05 UI Components/Lookup/Demos.md b/concepts/05 UI Components/Lookup/Demos.md
new file mode 100644
index 0000000000..b6b40b9991
--- /dev/null
+++ b/concepts/05 UI Components/Lookup/Demos.md
@@ -0,0 +1,5 @@
+#include demos-intro
+
+- [Basics](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Basics/)
+- [Templates](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/Templates/)
+- [Handle Value Change](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Lookup/EventHandling/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Map/20 Configure Markers/05 Add and Remove.md b/concepts/05 UI Components/Map/20 Configure Markers/05 Add and Remove.md
index 111b1f6443..0f3e7caa4a 100644
--- a/concepts/05 UI Components/Map/20 Configure Markers/05 Add and Remove.md
+++ b/concepts/05 UI Components/Map/20 Configure Markers/05 Add and Remove.md
@@ -103,6 +103,10 @@ To add markers at design-time, pass an array of objects to the [markers](/api-re
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Map/Markers/"
}
+
+---
+##### jQuery
+
To add or remove a marker at runtime, call the [addMarker(markerOptions)](/api-reference/10%20UI%20Components/dxMap/3%20Methods/addMarker(markerOptions).md '/Documentation/ApiReference/UI_Components/dxMap/Methods/#addMarkermarkerOptions') or [removeMarker(marker)](/api-reference/10%20UI%20Components/dxMap/3%20Methods/removeMarker(marker).md '/Documentation/ApiReference/UI_Components/dxMap/Methods/#removeMarkermarker') method.
@@ -157,11 +161,10 @@ In the following code, a marker is added each time a user clicks someplace on th
});
});
-With Angular, Vue, or React, use a different technique. Bind the **markers** property of the Map UI component to a component property.
-
----
##### Angular
+To add or remove a marker at runtime, bind the **markers** property of the Map to a component property:
+
@@ -149,11 +152,10 @@ To add or remove a route at runtime, call the [addRoute(routeOptions)](/api-refe
// Removes the routes with indexes 0 and 2 in the "routes" array
map.removeRoute([0, 2]);
-With Angular, Vue, or React, use a different technique. Bind the **routes** property of the Map UI component to a component property.
-
----
##### Angular
+To add or remove a route at runtime, bind the **routes** property of the Map to a component property.
+
+ var menuItems = [{
+ text: 'Upload',
+ items: [
+ { text: 'From your computer' },
+ { text: 'From a cloud service' }
+ ]
+ }, {
+ text: 'Share',
+ items: [
+ { text: 'Log in with Facebook' },
+ { text: 'Log in with Twitter' }
+ ]
+ }];
+
+ $(function() {
+ $("#menuContainer").dxMenu({
+ items: menuItems,
+ itemTemplate: function(itemData, itemIndex, itemElement) {
+ itemElement.append("" + itemData.text + "");
+ }
+ });
+ });
+
+
+
##### Angular
@@ -259,47 +287,11 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery, use DOM manipulation methods to combine the HTML markup for menu items. To apply this markup, use the **itemTemplate** callback function as shown in the following code:
-
---
-
##### jQuery
-
- var menuItems = [{
- text: 'Upload',
- items: [
- { text: 'From your computer' },
- { text: 'From a cloud service' }
- ]
- }, {
- text: 'Share',
- items: [
- { text: 'Log in with Facebook' },
- { text: 'Log in with Twitter' }
- ]
- }];
-
- $(function() {
- $("#menuContainer").dxMenu({
- items: menuItems,
- itemTemplate: function(itemData, itemIndex, itemElement) {
- itemElement.append("" + itemData.text + "");
- }
- });
- });
-
-
-
-
----
-
You can also customize an individual menu item. For this purpose, declare a template for this item as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxMenu/Configuration/items/#template') field of the item's data object.
----
-
-##### jQuery
-
----
-
-With Angular, Vue, or React, use a different technique. Bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxPopover/Configuration/#visible') property of the Popover UI component to a component property. After that, change them, and the Popover will appear or disappear.
-
----
##### Angular
+To show or hide the Popover programmatically, bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxPopover/Configuration/#visible') property of Popover to a component property. After that, change the latter property, and the Popover will appear or disappear.
+
@@ -194,6 +198,8 @@ With Angular, Vue, or React, use a different technique. Bind the [visible](/api-
##### React
+To show or hide the Popover programmatically, bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxPopover/Configuration/#visible') property of Popover to a state property. After that, change the latter property, and the Popover will appear or disappear.
+
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
diff --git a/concepts/05 UI Components/Popover/10 Show and Hide the Popover/10 Events.md b/concepts/05 UI Components/Popover/10 Show and Hide the Popover/10 Events.md
index 4d73bc795f..3b8ba6437e 100644
--- a/concepts/05 UI Components/Popover/10 Show and Hide the Popover/10 Events.md
+++ b/concepts/05 UI Components/Popover/10 Show and Hide the Popover/10 Events.md
@@ -159,7 +159,9 @@ To execute certain commands before or after the Popover was shown/hidden, handle
---
-If you are going to change event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to the events using the [on(eventName, eventHandler)](/api-reference/10%20UI%20Components/Component/3%20Methods/on(eventName_eventHandler).md '/Documentation/ApiReference/UI_Components/dxPopover/Methods/#oneventName_eventHandler') method. This approach is more typical of jQuery.
+---
+##### jQuery
+If you are going to change event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to the events using the [on(eventName, eventHandler)](/api-reference/10%20UI%20Components/Component/3%20Methods/on(eventName_eventHandler).md '/Documentation/ApiReference/UI_Components/dxPopover/Methods/#oneventName_eventHandler') method.
const hiddenEventHandler1 = function (e) {
@@ -174,6 +176,8 @@ If you are going to change event handlers at runtime, or if you need to attach s
.on("hidden", hiddenEventHandler1)
.on("hidden", hiddenEventHandler2);
+---
+
#####See Also#####
#include common-link-handleevents
- [Popover - Customize the Content](/concepts/05%20UI%20Components/Popover/05%20Customize%20the%20Appearance/05%20Customize%20the%20Content '/Documentation/Guide/UI_Components/Popover/Customize_the_Appearance/Customize_the_Content/')
diff --git a/concepts/05 UI Components/Popover/Demos.md b/concepts/05 UI Components/Popover/Demos.md
new file mode 100644
index 0000000000..b7b9c64a16
--- /dev/null
+++ b/concepts/05 UI Components/Popover/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Popover](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Popover/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Popup/10 Show and Hide the Popup/01 API.md b/concepts/05 UI Components/Popup/10 Show and Hide the Popup/01 API.md
index b00dfa5efd..8188ac1801 100644
--- a/concepts/05 UI Components/Popup/10 Show and Hide the Popup/01 API.md
+++ b/concepts/05 UI Components/Popup/10 Show and Hide the Popup/01 API.md
@@ -1,10 +1,10 @@
[note] In this article, the [Button](/api-reference/10%20UI%20Components/dxButton '/Documentation/ApiReference/UI_Components/dxButton/') UI component is used to demonstrate how to show and hide the Popup. This choice is made for purely demonstrational purposes, and you can do the same operations using another UI component following the same guidelines.
-To show or hide the Popup programmatically, call the [show()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#hide') method. The same thing can be done using the [toggle(showing)](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#toggleshowing') method. Pass **true** or **false** to this method to show or hide the Popup, respectively.
-
---
##### jQuery
+To show or hide the Popup programmatically, call the [show()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#hide') method. The same thing can be done using the [toggle(showing)](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#toggleshowing') method. Pass **true** or **false** to this method to show or hide the Popup, respectively.
+
$(function() {
$("#popupContainer").dxPopup({
title: "Popup Title",
@@ -32,6 +32,8 @@ To show or hide the Popup programmatically, call the [show()](/api-reference/10%
##### ASP.NET MVC Controls
+To show or hide the Popup programmatically, call the [show()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#hide') method. The same thing can be done using the [toggle(showing)](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxPopup/Methods/#toggleshowing') method. Pass **true** or **false** to this method to show or hide the Popup, respectively.
+
@(Html.DevExtreme().Popup()
.ID("popup")
@@ -97,13 +99,10 @@ To show or hide the Popup programmatically, call the [show()](/api-reference/10%
}
----
-
-With Angular, Vue or React, use a different technique. Bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#visible') property of the Popup UI component to a component property. After that, change this component property, and the Popup will appear or disappear.
-
----
##### Angular
+To show or hide the Popup programmatically, bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#visible') property of Popup to a component property. After that, change the latter property, and the Popup will appear or disappear.
+
+ $(function() {
+ $("#radioGroupContainer").dxRadioGroup({
+ dataSource: [
+ { text: "Low", color: "grey" },
+ { text: "Normal", color: "green" },
+ { text: "Urgent", color: "yellow" },
+ { text: "High", color: "red" }
+ ],
+ itemTemplate: function(itemData, itemIndex, itemElement){
+ itemElement.append(
+ $("").attr("style", "color:" + itemData.color )
+ .text(itemData.text)
+ );
+ }
+ });
+ });
+
##### Angular
@@ -182,25 +202,8 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/DataExpressionMixin/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxRadioGroup/Configuration/#itemTemplate') callback function as shown in the following code.
-
-
- $(function() {
- $("#radioGroupContainer").dxRadioGroup({
- dataSource: [
- { text: "Low", color: "grey" },
- { text: "Normal", color: "green" },
- { text: "Urgent", color: "yellow" },
- { text: "High", color: "red" }
- ],
- itemTemplate: function(itemData, itemIndex, itemElement){
- itemElement.append(
- $("").attr("style", "color:" + itemData.color )
- .text(itemData.text)
- );
- }
- });
- });
+---
+##### jQuery
You can also customize an individual item. For this purpose, declare a template for it as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxRadioGroup/Configuration/items/#template').
@@ -217,7 +220,7 @@ You can also customize an individual item. For this purpose, declare a template
// ...
];
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+---
#####See Also#####
- [RadioGroup - Handle the Value Change Event](/concepts/05%20UI%20Components/RadioGroup/05%20Handle%20the%20Value%20Change%20Event.md '/Documentation/Guide/UI_Components/RadioGroup/Handle_the_Value_Change_Event')
diff --git a/concepts/05 UI Components/RadioGroup/Demos.md b/concepts/05 UI Components/RadioGroup/Demos.md
new file mode 100644
index 0000000000..76373969cc
--- /dev/null
+++ b/concepts/05 UI Components/RadioGroup/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Radio Group](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RadioGroup/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/RangeSelector/Demos.md b/concepts/05 UI Components/RangeSelector/Demos.md
new file mode 100644
index 0000000000..bae753564d
--- /dev/null
+++ b/concepts/05 UI Components/RangeSelector/Demos.md
@@ -0,0 +1,15 @@
+#include demos-intro
+
+- [Numeric Scale (Lightweight)](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/NumericScaleLightweight/)
+- [Numeric Scale](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/NumericScale/)
+- [Date-Time Scale (Lightweight_](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/DateTimeScaleLightweight/)
+- [Date-Time Scale](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/DateTimeScale/)
+- [Logarithmic Scale](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/LogarithmicScale/)
+- [Discrete Scale](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/DiscreteScale/)
+- [Custom Formatting](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/CustomFormatting/)
+- [Use Range Selection for Calculation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/UseRangeSelectionForCalculation/)
+- [Use Range Selection for Filtering](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/UseRangeSelectionForFiltering/)
+- [Image on Background](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/ImageOnBackground/)
+- [Chart on Background](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/ChartOnBackground/)
+- [Customized Chart on Background](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/CustomizedChartOnBackground/)
+- [Chart on Background with Series Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSelector/ChartOnBackgroundWithSeriesTemplate/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/RangeSlider/Demos.md b/concepts/05 UI Components/RangeSlider/Demos.md
new file mode 100644
index 0000000000..6f6ea962b0
--- /dev/null
+++ b/concepts/05 UI Components/RangeSlider/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Range Slider](https://js.devexpress.com/Demos/WidgetsGallery/Demo/RangeSlider/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Resizable/Demos.md b/concepts/05 UI Components/Resizable/Demos.md
new file mode 100644
index 0000000000..d21197a637
--- /dev/null
+++ b/concepts/05 UI Components/Resizable/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Resizable/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/ResponsiveBox/Demos.md b/concepts/05 UI Components/ResponsiveBox/Demos.md
new file mode 100644
index 0000000000..5511e71c2d
--- /dev/null
+++ b/concepts/05 UI Components/ResponsiveBox/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Responsive Box](https://js.devexpress.com/Demos/WidgetsGallery/Demo/ResponsiveBox/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Sankey/Demos.md b/concepts/05 UI Components/Sankey/Demos.md
new file mode 100644
index 0000000000..c09bfffbf8
--- /dev/null
+++ b/concepts/05 UI Components/Sankey/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Sankey Chart](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/SankeyChart/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/05 Bind the Scheduler to Data.md b/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/05 Bind the Scheduler to Data.md
index e9c81d8c7c..5304672069 100644
--- a/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/05 Bind the Scheduler to Data.md
+++ b/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/05 Bind the Scheduler to Data.md
@@ -12,7 +12,7 @@ The Scheduler can load and update data from these data source types:
Use the [dataSource](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/dataSource.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#dataSource') property to specify a data source. In this tutorial, we use a local array.
-Once you assign the data source, you need to map field values to appointment attributes. If data objects include fields that match the [predefined structure](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/'), the Scheduler recognizes them automatically and displays appointments without further configuration. To map other fields, use **...Expr** properties. In this tutorial, the [startDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/startDate.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#startDate') and [endDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/endDate.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#endDate') fields are recognized automatically, whereas other field names are specified in the [textExpr](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/textExpr.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#textExpr'), [allDayExpr](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/allDayExpr.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#allDayExpr'), and [recurrenceRuleExpr](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/recurrenceRuleExpr.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#recurrenceRuleExpr') properties.
+Once you assign the data source, you need to map field values to appointment attributes. If data objects include fields that match the [predefined structure](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/'), the Scheduler recognizes them automatically and displays appointments without further configuration. To map other fields, use **...Expr** properties. In this tutorial, the [startDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/startDate.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#startDate') and [endDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/endDate.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#endDate') fields are recognized automatically, whereas other field names are specified in the [textExpr](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/textExpr.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#textExpr'), [allDayExpr](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/allDayExpr.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#allDayExpr'), and [recurrenceRuleExpr](/api-reference/10%20UI%20Components/dxScheduler/1%20Configuration/recurrenceRuleExpr.md '/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#recurrenceRuleExpr') properties.
---
##### jQuery
diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/020 All-Day Appointments.md b/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/020 All-Day Appointments.md
index f10ac0a7ab..3ad766bb9f 100644
--- a/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/020 All-Day Appointments.md
+++ b/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/020 All-Day Appointments.md
@@ -2,7 +2,7 @@ An all-day appointment occupies the entire day.
-To create an all-day appointment, set its [allDay](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/allDay.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#allDay') field to **true**. An all-day appointment must have a [startDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/startDate.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#startDate') field. You can also set an [endDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/endDate.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#endDate') field if the appointment occupies more than one day. Time values in these fields are ignored.
+To create an all-day appointment, set its [allDay](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/allDay.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#allDay') field to **true**. An all-day appointment must have a [startDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/startDate.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#startDate') field. You can also set an [endDate](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/endDate.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#endDate') field if the appointment occupies more than one day. Time values in these fields are ignored.
var allDayAppointment = [{
diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/030 Recurring Appointments.md b/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/030 Recurring Appointments.md
index ef61ff01c7..afc5a9b4f4 100644
--- a/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/030 Recurring Appointments.md
+++ b/concepts/05 UI Components/Scheduler/030 Appointments/015 Appointment Types/030 Recurring Appointments.md
@@ -2,7 +2,7 @@ A recurring appointment repeats at a specified interval.
-To make an appointment recurring, specify the [recurrenceRule](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/recurrenceRule.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#recurrenceRule') field with a value according to the iCalendar RFC 2445 specification. This creates an appointment series. You can exclude specific appointments from it if you set their [recurrenceException](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/recurrenceException.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#recurrenceException') field. For example, the appointment below occurs daily since February 20, 2021, except February 22 and 23:
+To make an appointment recurring, specify the [recurrenceRule](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/recurrenceRule.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#recurrenceRule') field with a value according to the iCalendar RFC 2445 specification. This creates an appointment series. You can exclude specific appointments from it if you set their [recurrenceException](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/recurrenceException.md '/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#recurrenceException') field. For example, the appointment below occurs daily since February 20, 2021, except February 22 and 23:
diff --git a/concepts/05 UI Components/Scheduler/030 Appointments/050 Customize Appointment.md b/concepts/05 UI Components/Scheduler/030 Appointments/050 Customize Appointment.md
index 8819efa1d9..59630ada2b 100644
--- a/concepts/05 UI Components/Scheduler/030 Appointments/050 Customize Appointment.md
+++ b/concepts/05 UI Components/Scheduler/030 Appointments/050 Customize Appointment.md
@@ -185,7 +185,7 @@ If you need a more flexible solution, combine HTML markup for appointments manua
});
});
-You can also customize an individual appointment. For this purpose, declare a template for this appointment as a script and pass its `id` to the [template](/api-reference/50%20Common/Object%20Structures/dxSchedulerAppointment/template.md '/Documentation/ApiReference/Common/Object_Structures/dxSchedulerAppointment/#template') field of the appointment's data object.
+You can also customize an individual appointment. For this purpose, declare a template for this appointment as a script and pass its `id` to the [template](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#template) field of the appointment's data object.
##### Angular
+You can also customize individual items. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
@@ -368,6 +385,8 @@ You can also customize individual items. In Angular, Vue, and React, declare the
##### Vue
+You can also customize individual items. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
@@ -398,6 +417,8 @@ You can also customize individual items. In Angular, Vue, and React, declare the
##### React
+You can also customize individual items. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
@@ -420,33 +441,10 @@ You can also customize individual items. In Angular, Vue, and React, declare the
}
export default App;
-
-##### jQuery
-
-
- $(function() {
- $("#tabPanelContainer").dxTabPanel({
- items: [{
- title: "Info",
- template: function() {
- return $("
@@ -268,6 +265,8 @@ You can also customize individual tabs. In Angular, Vue, and React, declare them
##### Vue
+You can also customize individual tabs. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
@@ -298,6 +297,8 @@ You can also customize individual tabs. In Angular, Vue, and React, declare them
##### React
+You can also customize individual tabs. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
@@ -323,7 +324,7 @@ You can also customize individual tabs. In Angular, Vue, and React, declare them
---
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+
#####See Also#####
- [Tabs Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Tabs/Overview)
diff --git a/concepts/05 UI Components/Tabs/Demos.md b/concepts/05 UI Components/Tabs/Demos.md
new file mode 100644
index 0000000000..cca7147334
--- /dev/null
+++ b/concepts/05 UI Components/Tabs/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Tabs](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Tabs/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/TagBox/01 Choose a Drop-Down Editor.md b/concepts/05 UI Components/TagBox/01 Choose a Drop-Down Editor.md
new file mode 100644
index 0000000000..de31b0da01
--- /dev/null
+++ b/concepts/05 UI Components/TagBox/01 Choose a Drop-Down Editor.md
@@ -0,0 +1 @@
+#include editors-how-to-choose
\ No newline at end of file
diff --git a/concepts/05 UI Components/TagBox/05 Customize Item Appearance.md b/concepts/05 UI Components/TagBox/05 Customize Item Appearance.md
index 095aa6951a..fb87f64395 100644
--- a/concepts/05 UI Components/TagBox/05 Customize Item Appearance.md
+++ b/concepts/05 UI Components/TagBox/05 Customize Item Appearance.md
@@ -107,9 +107,39 @@ For a minor customization of TagBox items, you can define [specific fields](/api
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#itemTemplate').
---
+##### jQuery
+
+
+ const tagBoxData = [{
+ id: 1,
+ name: "HD Video Player",
+ imgSrc: "images/products/1-small.png"
+ }, {
+ id: 2,
+ name: "UltraHD Player",
+ imgSrc: "images/products/2-small.png"
+ },
+ // ...
+ ];
+
+ $(function() {
+ $("#tagBoxContainer").dxTagBox({
+ dataSource: tagBoxData,
+ valueExpr: 'id',
+ displayExpr: 'name',
+ itemTemplate: function (itemData, itemIndex, itemElement) {
+ return $("").append(
+ $("![]()
").attr("src", itemData.imgSrc),
+ $("").text(itemData.name)
+ .css("display", "inline-block")
+ );
+ }
+ });
+ });
+
##### Angular
@@ -235,35 +265,8 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/dxSelectBox/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#itemTemplate') callback function as shown in the following code.
-
-
- const tagBoxData = [{
- id: 1,
- name: "HD Video Player",
- imgSrc: "images/products/1-small.png"
- }, {
- id: 2,
- name: "UltraHD Player",
- imgSrc: "images/products/2-small.png"
- },
- // ...
- ];
-
- $(function() {
- $("#tagBoxContainer").dxTagBox({
- dataSource: tagBoxData,
- valueExpr: 'id',
- displayExpr: 'name',
- itemTemplate: function (itemData, itemIndex, itemElement) {
- return $("").append(
- $("![]()
").attr("src", itemData.imgSrc),
- $("").text(itemData.name)
- .css("display", "inline-block")
- );
- }
- });
- });
+---
+##### jQuery
You can also customize an individual item in the drop-down list. For this purpose, declare a template for this item as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/items/#template') field.
@@ -279,6 +282,8 @@ You can also customize an individual item in the drop-down list. For this purpos
// ...
];
+---
+
Using similar techniques, you can also customize tags of the selected items. The template for them should be assigned to the [tagTemplate](/api-reference/10%20UI%20Components/dxTagBox/1%20Configuration/tagTemplate.md '/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#tagTemplate') property.
---
@@ -397,7 +402,7 @@ Using similar techniques, you can also customize tags of the selected items. The
---
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+
#####See Also#####
- [TagBox API Reference](/api-reference/10%20UI%20Components/dxTagBox '/Documentation/ApiReference/UI_Components/dxTagBox/')
diff --git a/concepts/05 UI Components/TagBox/07 Grouping/05 Customize Group Headers.md b/concepts/05 UI Components/TagBox/07 Grouping/05 Customize Group Headers.md
index 9900b3906d..ccf113e8e6 100644
--- a/concepts/05 UI Components/TagBox/07 Grouping/05 Customize Group Headers.md
+++ b/concepts/05 UI Components/TagBox/07 Grouping/05 Customize Group Headers.md
@@ -1,6 +1,35 @@
-To customize group headers, specify a [groupTemplate](/api-reference/10%20UI%20Components/dxDropDownList/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#groupTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component. If the template is unspecified, group headers display the **key** data field in bold font.
+To customize group headers, specify a [groupTemplate](/api-reference/10%20UI%20Components/dxDropDownList/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#groupTemplate'). If the template is unspecified, group headers display the **key** data field in bold font.
---
+##### jQuery
+
+ const fruitsVegetables = [{
+ // ...
+ }];
+
+ $(function() {
+ $("#tagBoxContainer").dxTagBox({
+ dataSource: new DevExpress.data.DataSource({
+ store: fruitsVegetables,
+ map: function(groupedItem) {
+ let overallCount = 0;
+ groupedItem.items.forEach(function(item) {
+ overallCount += item.count;
+ });
+ return $.extend(groupedItem, { overallCount: overallCount })
+ }
+ }),
+ grouped: true,
+ groupTemplate: function(groupData, _, groupElement) {
+ groupElement.append(
+ $("
@@ -314,6 +311,8 @@ You can also customize individual tiles. In Angular, Vue, and React, declare the
##### Vue
+You can also customize individual tiles. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
@@ -344,6 +343,8 @@ You can also customize individual tiles. In Angular, Vue, and React, declare the
##### React
+You can also customize individual tiles. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
@@ -368,7 +369,7 @@ You can also customize individual tiles. In Angular, Vue, and React, declare the
---
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+
#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/TileView/ItemTemplate/",
diff --git a/concepts/05 UI Components/TileView/Demos.md b/concepts/05 UI Components/TileView/Demos.md
new file mode 100644
index 0000000000..5a37513db4
--- /dev/null
+++ b/concepts/05 UI Components/TileView/Demos.md
@@ -0,0 +1,6 @@
+#include demos-intro
+
+- [Basics](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TileView/Basics/)
+- [Directions](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TileView/Directions/)
+- [Item Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TileView/ItemTemplate/)
+- [Item 3rd-Party Engine Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TileView/Item3RdPartyEngineTemplate/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Toast/05 Show and Hide the Toast/01 API.md b/concepts/05 UI Components/Toast/05 Show and Hide the Toast/01 API.md
index c23b3f082d..5a3d86ee9d 100644
--- a/concepts/05 UI Components/Toast/05 Show and Hide the Toast/01 API.md
+++ b/concepts/05 UI Components/Toast/05 Show and Hide the Toast/01 API.md
@@ -1,5 +1,8 @@
[note] In this article, the [Button](/api-reference/10%20UI%20Components/dxButton '/Documentation/ApiReference/UI_Components/dxButton/') UI component is used to demonstrate how to show and hide the Toast. This choice is made for purely demonstrational purposes, and you can do the same operations using another UI component following the same guidelines.
+---
+##### jQuery
+
To show or hide the Toast programmatically, call the [show()](/api-reference/10%20UI%20Components/dxToast/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxToast/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxToast/Methods/#hide') method. The same thing can be done using the [toggle(showing)](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxToast/Methods/#toggleshowing') method. Pass **true** or **false** to this method to show or hide the Toast, respectively.
$(function() {
@@ -12,17 +15,16 @@ To show or hide the Toast programmatically, call the [show()](/api-reference/10%
text: "Show the Toast",
onClick: function () {
$("#toastContainer").dxToast("show");
- // ---------- or ----------
+ // or
$("#toastContainer").dxToast("toggle", true);
}
});
});
-With Angular, Vue, or React, use a different technique. Bind the [visible](/api-reference/10%20UI%20Components/dxOverlay/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxToast/Configuration/#visible') property of the Toast UI component to a component property. After that, change this property, and the Toast will appear or disappear.
-
----
##### Angular
+To show or hide the Toast programmatically, bind the [visible](/api-reference/10%20UI%20Components/dxOverlay/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxToast/Configuration/#visible') property of the Toast to a component property. After that, change the latter property, and the Toast will appear or disappear.
+
const hiddenEventHandler1 = function (e) {
@@ -152,6 +154,8 @@ If you are going to change event handlers at runtime, or if you need to attach s
.on("hidden", hiddenEventHandler1)
.on("hidden", hiddenEventHandler2);
+---
+
#####See Also#####
#include common-link-handleevents
- [Toast - Customize the Content](/concepts/05%20UI%20Components/Toast/10%20Customize%20the%20Content.md '/Documentation/Guide/UI_Components/Toast/Customize_the_Content/')
diff --git a/concepts/05 UI Components/Toast/Demos.md b/concepts/05 UI Components/Toast/Demos.md
new file mode 100644
index 0000000000..4e0c2759c1
--- /dev/null
+++ b/concepts/05 UI Components/Toast/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Toast/Overview/)
+- [Stack](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Toast/Stack/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Toolbar/15 Customize Item Appearance.md b/concepts/05 UI Components/Toolbar/15 Customize Item Appearance.md
index 2a40d9bca7..77406f5a1d 100644
--- a/concepts/05 UI Components/Toolbar/15 Customize Item Appearance.md
+++ b/concepts/05 UI Components/Toolbar/15 Customize Item Appearance.md
@@ -167,9 +167,27 @@ For a minor customization of Toolbar items, you can define [specific fields](/ap
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/#itemTemplate') and [menuItemTemplate](/api-reference/10%20UI%20Components/dxToolbar/1%20Configuration/menuItemTemplate.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/#menuItemTemplate') to customize toolbar items and commands in the overflow menu, respectively. In Angular and Vue, you can declare the templates in the markup. In React, you can use rendering functions (shown in the code below) or components.
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/#itemTemplate') and [menuItemTemplate](/api-reference/10%20UI%20Components/dxToolbar/1%20Configuration/menuItemTemplate.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/#menuItemTemplate') to customize toolbar items and commands in the overflow menu, respectively.
---
+##### jQuery
+
+
+ $(function() {
+ $("#toolbarContainer").dxToolbar({
+ items: toolbarItems,
+ itemTemplate: function(itemData, itemIndex, itemElement) {
+ itemElement.append("" + itemData.text + "");
+ },
+ menuItemTemplate: function(itemData, itemIndex, itemElement) {
+ itemElement.append("" + itemData.text + "");
+ }
+ });
+ });
+
+
+
+
##### Angular
@@ -306,36 +324,11 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery, use DOM manipulation methods to combine the HTML markup. To apply this markup to toolbar items and commands in the overflow menu, use the [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/#itemTemplate') and [menuItemTemplate](/api-reference/10%20UI%20Components/dxToolbar/1%20Configuration/menuItemTemplate.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/#menuItemTemplate') callback functions, respectively.
-
---
-
##### jQuery
-
- $(function() {
- $("#toolbarContainer").dxToolbar({
- items: toolbarItems,
- itemTemplate: function(itemData, itemIndex, itemElement) {
- itemElement.append("" + itemData.text + "");
- },
- menuItemTemplate: function(itemData, itemIndex, itemElement) {
- itemElement.append("" + itemData.text + "");
- }
- });
- });
-
-
-
-
----
-
You can also customize an individual toolbar item or menu command. For this purpose, declare a template for this item or command as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/#template') or [menuItemTemplate](/api-reference/_hidden/dxToolbarItem/menuItemTemplate.md '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/#menuItemTemplate') property, respectively.
----
-
-##### jQuery
-
var toolbarItems = [{
text: "Back",
@@ -360,7 +353,7 @@ You can also customize an individual toolbar item or menu command. For this purp
---
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+
#####See Also#####
- [Toolbar - Specify Item Type](/concepts/05%20UI%20Components/Toolbar/05%20Specify%20Item%20Type.md '/Documentation/Guide/UI_Components/Toolbar/Specify_Item_Type')
diff --git a/concepts/05 UI Components/Toolbar/Demos.md b/concepts/05 UI Components/Toolbar/Demos.md
new file mode 100644
index 0000000000..6b90b3bcf0
--- /dev/null
+++ b/concepts/05 UI Components/Toolbar/Demos.md
@@ -0,0 +1,4 @@
+#include demos-intro
+
+- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Toolbar/Overview/)
+- [Adaptability](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Toolbar/Adaptability/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/Tooltip/05 Show and Hide the Tooltip/05 API.md b/concepts/05 UI Components/Tooltip/05 Show and Hide the Tooltip/05 API.md
index 6e008896b0..be0ac1692d 100644
--- a/concepts/05 UI Components/Tooltip/05 Show and Hide the Tooltip/05 API.md
+++ b/concepts/05 UI Components/Tooltip/05 Show and Hide the Tooltip/05 API.md
@@ -1,10 +1,10 @@
[note] In this article, the [Button](/api-reference/10%20UI%20Components/dxButton '/Documentation/ApiReference/UI_Components/dxButton/') UI component is used to demonstrate how to show and hide the Tooltip. This choice is made for purely demonstrational purposes, and you can do the same operations using another UI component following the same guidelines.
-To show or hide the Tooltip programmatically, call the [show()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#hide') method. The same thing can be done using the [toggle(showing)](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#toggleshowing') method. Pass **true** or **false** to this method to show or hide the Tooltip, respectively.
-
---
##### jQuery
+To show or hide the Tooltip programmatically, call the [show()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#hide') method. The same thing can be done using the [toggle(showing)](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#toggleshowing') method. Pass **true** or **false** to this method to show or hide the Tooltip, respectively.
+
$(function() {
$("#tooltipContainer").dxTooltip({
target: "#image",
@@ -41,6 +41,8 @@ To show or hide the Tooltip programmatically, call the [show()](/api-reference/1
##### ASP.NET MVC Controls
+To show or hide the Tooltip programmatically, call the [show()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/show().md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#show') or [hide()](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/hide().md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#hide') method. The same thing can be done using the [toggle(showing)](/api-reference/10%20UI%20Components/dxOverlay/3%20Methods/toggle(showing).md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#toggleshowing') method. Pass **true** or **false** to this method to show or hide the Tooltip, respectively.
+
@(Html.DevExtreme().Tooltip()
.ID("tooltip")
@@ -79,11 +81,11 @@ To show or hide the Tooltip programmatically, call the [show()](/api-reference/1
---
-The **show()** method called without arguments shows the Tooltip for the [target specified beforehand](/api-reference/10%20UI%20Components/dxPopover/1%20Configuration/target.md '/Documentation/ApiReference/UI_Components/dxTooltip/Configuration/#target'). If you need to change the target once, call the [show(target)](/api-reference/10%20UI%20Components/dxPopover/3%20Methods/show(target).md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#showtarget') method.
-
---
##### jQuery
+The **show()** method called without arguments shows the Tooltip for the [target specified beforehand](/api-reference/10%20UI%20Components/dxPopover/1%20Configuration/target.md '/Documentation/ApiReference/UI_Components/dxTooltip/Configuration/#target'). If you need to change the target once, call the [show(target)](/api-reference/10%20UI%20Components/dxPopover/3%20Methods/show(target).md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#showtarget') method.
+
$(function() {
// ...
$("#showButton").dxButton({
@@ -96,6 +98,8 @@ The **show()** method called without arguments shows the Tooltip for the [target
##### ASP.NET MVC Controls
+The **show()** method called without arguments shows the Tooltip for the [target specified beforehand](/api-reference/10%20UI%20Components/dxPopover/1%20Configuration/target.md '/Documentation/ApiReference/UI_Components/dxTooltip/Configuration/#target'). If you need to change the target once, call the [show(target)](/api-reference/10%20UI%20Components/dxPopover/3%20Methods/show(target).md '/Documentation/ApiReference/UI_Components/dxTooltip/Methods/#showtarget') method.
+
// ...
@@ -108,11 +112,11 @@ The **show()** method called without arguments shows the Tooltip for the [target
---
-With Angular, Vue, or React, use a different technique. Bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxTooltip/Configuration/#visible') property of the Tooltip UI component to a component property. After that, change this component property, and the Tooltip will appear or disappear.
-
---
##### Angular
+To show or hide the Tooltip programmatically, bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxTooltip/Configuration/#visible') property of the Tooltip to a component property. After that, change this component property, and the Tooltip will appear or disappear.
+
@@ -197,6 +203,8 @@ With Angular, Vue, or React, use a different technique. Bind the [visible](/api-
##### React
+To show or hide the Tooltip programmatically, bind the [visible](/api-reference/10%20UI%20Components/dxPopup/1%20Configuration/visible.md '/Documentation/ApiReference/UI_Components/dxTooltip/Configuration/#visible') property of the Tooltip to a state property. After that, change this state property, and the Tooltip will appear or disappear.
+
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
diff --git a/concepts/05 UI Components/Tooltip/Demos.md b/concepts/05 UI Components/Tooltip/Demos.md
new file mode 100644
index 0000000000..cc3f6d4adb
--- /dev/null
+++ b/concepts/05 UI Components/Tooltip/Demos.md
@@ -0,0 +1,3 @@
+#include demos-intro
+
+- [Tooltip](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Tooltip/Overview/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/TreeList/10 Columns/20 Column Sizing.md b/concepts/05 UI Components/TreeList/10 Columns/20 Column Sizing.md
index 37b13e840e..6d0098936b 100644
--- a/concepts/05 UI Components/TreeList/10 Columns/20 Column Sizing.md
+++ b/concepts/05 UI Components/TreeList/10 Columns/20 Column Sizing.md
@@ -260,7 +260,7 @@ The UI component allows a user to resize columns in two different modes: by chan
---
#include common-demobutton with {
- url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Tree_List/Resizing/AngularJS/Light/"
+ url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Tree_List/Resizing/"
}
#####See Also#####
diff --git a/concepts/05 UI Components/TreeList/10 Columns/40 Customize Cells/2 Customize the Appearance.md b/concepts/05 UI Components/TreeList/10 Columns/40 Customize Cells/2 Customize the Appearance.md
index ca22351b32..c1acc80828 100644
--- a/concepts/05 UI Components/TreeList/10 Columns/40 Customize Cells/2 Customize the Appearance.md
+++ b/concepts/05 UI Components/TreeList/10 Columns/40 Customize Cells/2 Customize the Appearance.md
@@ -1,7 +1,22 @@
-To customize cell appearance, use a column's [cellTemplate](/api-reference/_hidden/dxTreeListColumn/cellTemplate.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#cellTemplate'). In Angular and Vue, you can declare the template in the markup. In React, you can use a rendering function (shown in the code below) or component:
+To customize cell appearance, use a column's [cellTemplate](/api-reference/_hidden/dxTreeListColumn/cellTemplate.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#cellTemplate').
---
+##### jQuery
+
+ $(function() {
+ $("#treeListContainer").dxTreeList({
+ // ...
+ columns: [{
+ dataField: "Title",
+ cellTemplate: function(element, info) {
+ element.append("DOM manipulation methods to combine the HTML markup for nodes. To apply this markup, use the **itemTemplate** callback function as shown in the following code:
+---
+##### jQuery
- $(function() {
- $("#treeViewContainer").dxTreeView({
- dataSource: treeViewData,
- itemTemplate: function (itemData, itemIndex, itemElement) {
- itemElement.append("" + itemData.text + "");
- }
- });
- });
+You can also customize individual nodes. Declare them as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/items/#template') property or assign a customization function straight to this property.
-You can also customize individual nodes. In Angular, Vue, and React, declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component. When using jQuery, you can declare the nodes as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/items/#template') property or assign a customization function straight to this property.
+
+
+
+
+
+ var treeViewData = [{
+ id: '1',
+ text: 'Fruits',
+ items: [{
+ template: function() {
+ return "Apples";
+ }
+ }, {
+ template: $("#individualItemTemplate")
+ }
+ ]
+ },
+ // ...
+ ];
----
##### Angular
+You can also customize individual nodes. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
@@ -319,6 +345,8 @@ You can also customize individual nodes. In Angular, Vue, and React, declare the
##### Vue
+You can also customize individual nodes. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
@@ -349,6 +377,8 @@ You can also customize individual nodes. In Angular, Vue, and React, declare the
##### React
+You can also customize individual nodes. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component.
+
import React from 'react';
@@ -373,33 +403,9 @@ You can also customize individual nodes. In Angular, Vue, and React, declare the
export default App;
-##### jQuery
-
-
-
-
-
-
- var treeViewData = [{
- id: '1',
- text: 'Fruits',
- items: [{
- template: function() {
- return "Apples";
- }
- }, {
- template: $("#individualItemTemplate")
- }
- ]
- },
- // ...
- ];
-
---
-In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article.
+
#####See Also#####
- [Built-In Icon Library](/concepts/60%20Themes%20and%20Styles/30%20Icons/10%20Built-In%20Icon%20Library.md '/Documentation/Guide/Themes_and_Styles/Icons/#Built-In_Icon_Library')
diff --git a/concepts/05 UI Components/TreeView/Demos.md b/concepts/05 UI Components/TreeView/Demos.md
new file mode 100644
index 0000000000..a6e202677e
--- /dev/null
+++ b/concepts/05 UI Components/TreeView/Demos.md
@@ -0,0 +1,11 @@
+#include demos-intro
+
+- [Hierarchical Data Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/HierarchicalDataStructure/)
+- [Plain Data Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/FlatDataStructure/)
+- [Node Selection and Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/ItemSelectionAndCustomization/)
+- [Virtual Mode](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/VirtualMode/)
+- [Load Data on Demand](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/LoadDataOnDemand/)
+- [TreeView with Search Bar](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/TreeViewWithSearchBar/)
+- [Context Menu Integration](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/ContextMenuIntegration/)
+- [Drag & Drop for Plain Data Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/DragAndDropPlainDataStructure/)
+- [Drag & Drop for Hierarchical Data Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeView/DragAndDropHierarchicalDataStructure/)
diff --git a/concepts/05 UI Components/VectorMap/Demos.md b/concepts/05 UI Components/VectorMap/Demos.md
new file mode 100644
index 0000000000..8ebc3c4a9a
--- /dev/null
+++ b/concepts/05 UI Components/VectorMap/Demos.md
@@ -0,0 +1,16 @@
+#include demos-intro
+
+- [Colors Customization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/ColorsCustomization/)
+- [Zooming and Centering](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/ZoomingAndCentering/)
+- [Palette](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/Palette/)
+- [Image Markers](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/ImageMarkers/)
+- [Bubble Markers](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/BubbleMarkers/)
+- [Pie Markers](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/PieMarkers/)
+- [Dynamic Viewport](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/DynamicViewport/)
+- [Area with Labels and Two Legends](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/AreaWithLabelsAndTwoLegends/)
+- [Tooltips: HTML Markup Support](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/TooltipHTMLSupport/)
+- [Custom Projection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/CustomProjection/)
+- [Floor Plan](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/FloorPlan/)
+- [Multiple Layers](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/MultipleLayers/)
+- [Custom Map Data](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/CustomMapData/)
+- [Custom Annotations](https://js.devexpress.com/Demos/WidgetsGallery/Demo/VectorMap/CustomAnnotations/)
diff --git a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/10 Validate an Editor Value.md b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/10 Validate an Editor Value.md
index 9127c589cc..5cc9416d05 100644
--- a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/10 Validate an Editor Value.md
+++ b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/10 Validate an Editor Value.md
@@ -69,41 +69,6 @@ Associate a DevExtreme editor with the [Validator](/api-reference/10%20UI%20Comp
})
export class AppModule { }
-##### AngularJS
-
- function Controller ($scope) {
- $scope.login = '';
- $scope.loginRules = [{
- type: 'required'
- }, {
- type: 'pattern',
- pattern: '^[a-zA-Z]+$',
- message: 'Do not use digits.'
- }];
- }
-
-
@@ -388,6 +334,8 @@ Alternatively, you can use the [DevExpress.validationEngine.validateGroup](/api-
##### Vue
+Alternatively, you can get a group's instance and call its [validate](/api-reference/10%20UI%20Components/dxValidationGroup/3%20Methods/validate().md '/Documentation/ApiReference/UI_Components/dxValidationGroup/Methods/#validate') method to validate this group:
+
Name: " + e.itemData.name + "
"); + e.itemElement.append("Name: " + e.itemData.name + "
"); - e.itemElement.append(""), + $("
").text(data.count).css("margin", 0)
+ )
+ }
+ });
+ });
##### Angular
@@ -211,28 +233,8 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemTemplate') callback function as shown in the following code.
-
-
- const fruits = [
- { name: "Apples", count: 10 },
- { name: "Oranges", count: 12 },
- { name: "Lemons", count: 15 },
- { name: "Pears", count: 20 },
- { name: "Pineapples", count: 3 }
- ];
-
- $(function() {
- $("#listContainer").dxList({
- dataSource: fruits,
- itemTemplate: function(data, _, element) {
- element.append(
- $("").text(data.fruit), $("
"),
- $("
").text(data.count).css("margin", 0) - ) - } - }); - }); +--- +##### jQuery You can also customize an individual List item. For this purpose, declare a template for this item as a script and pass its `id` to the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/items/#template') field. @@ -248,7 +250,7 @@ You can also customize an individual List item. For this purpose, declare a temp // ... ]; -In addition, you can use a 3rd-party template engine to perform the needed customizations. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article. +--- #include common-demobutton-named with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ItemTemplate/", diff --git a/concepts/05 UI Components/List/14 Grouping/05 Customize Group Headers.md b/concepts/05 UI Components/List/14 Grouping/05 Customize Group Headers.md index fa3f39c476..2ffbe5c1eb 100644 --- a/concepts/05 UI Components/List/14 Grouping/05 Customize Group Headers.md +++ b/concepts/05 UI Components/List/14 Grouping/05 Customize Group Headers.md @@ -1,6 +1,49 @@ -You can define a [groupTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#groupTemplate') to customize group headers. In Angular and Vue, declare the template in the markup. In React, use a rendering function (shown in the code below) or component. Without a **groupTemplate**, group headers display the text of the **key** field in bold font. +You can define a [groupTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#groupTemplate') to customize group headers. Without a **groupTemplate**, group headers display the text of the **key** field in bold font. --- +##### jQuery + + const fruitsVegetables = [{ + key: "Fruits", + items: [ + { name: "Apples", count: 10 }, + { name: "Oranges", count: 12 }, + { name: "Lemons", count: 15 } + ] + }, { + key: "Vegetables", + items: [ + { name: "Potatoes", count: 5 }, + { name: "Tomatoes", count: 9 }, + { name: "Turnips", count: 8 } + ] + }]; + + $(function() { + $("#listContainer").dxList({ + dataSource: new DevExpress.data.DataSource({ + store: fruitsVegetables, + map: function(groupedItem) { + let overallCount = 0; + groupedItem.items.forEach(function(item) { + overallCount += item.count; + }); + return $.extend(groupedItem, { overallCount: overallCount }) + } + }), + grouped: true, + groupTemplate: function(groupData, _, groupElement) { + groupElement.append( + $("
").text(groupData.key + " | " + groupData.overallCount) + ) + }, + itemTemplate: function(data, _, element) { + element.append( + $("
").text(data.name + " | " + data.count).css("margin", 0) + ) + } + }); + }); ##### Angular @@ -181,56 +224,10 @@ You can define a [groupTemplate](/api-reference/10%20UI%20Components/dxList/1%20 --- -If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for group headers. To apply this markup, use the [groupTemplate](/api-reference/10%20UI%20Components/dxList/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxList/Configuration/#groupTemplate') callback function as shown in the following code. - - const fruitsVegetables = [{ - key: "Fruits", - items: [ - { name: "Apples", count: 10 }, - { name: "Oranges", count: 12 }, - { name: "Lemons", count: 15 } - ] - }, { - key: "Vegetables", - items: [ - { name: "Potatoes", count: 5 }, - { name: "Tomatoes", count: 9 }, - { name: "Turnips", count: 8 } - ] - }]; - - $(function() { - $("#listContainer").dxList({ - dataSource: new DevExpress.data.DataSource({ - store: fruitsVegetables, - map: function(groupedItem) { - let overallCount = 0; - groupedItem.items.forEach(function(item) { - overallCount += item.count; - }); - return $.extend(groupedItem, { overallCount: overallCount }) - } - }), - grouped: true, - groupTemplate: function(groupData, _, groupElement) { - groupElement.append( - $("
").text(groupData.key + " | " + groupData.overallCount) - ) - }, - itemTemplate: function(data, _, element) { - element.append( - $("
").text(data.name + " | " + data.count).css("margin", 0) - ) - } - }); - }); - #include common-demobutton with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/GroupedList/" } -In addition, you can use a 3rd-party template engine to perform the needed customizations. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article. - #####See Also##### - [List API Reference](/api-reference/10%20UI%20Components/dxList '/Documentation/ApiReference/UI_Components/dxList/') diff --git a/concepts/05 UI Components/List/Demos.md b/concepts/05 UI Components/List/Demos.md new file mode 100644 index 0000000000..1eeaa9fa49 --- /dev/null +++ b/concepts/05 UI Components/List/Demos.md @@ -0,0 +1,10 @@ +#include demos-intro + +- [Item Deletion UI](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ListEditingAndAPI/) +- [Grouped List](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/GroupedList/) +- [Item Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ItemTemplate/) +- [Item 3rd-Party Engine Template](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/Item3RdPartyEngineTemplate/) +- [List with Search Bar](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ListWithSearchBar/) +- [List Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ListSelection/) +- [Item Drag & Drop](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/ItemDragging/) +- [Web API Service](https://js.devexpress.com/Demos/WidgetsGallery/Demo/List/WebAPI/) \ No newline at end of file diff --git a/concepts/05 UI Components/LoadIndicator/Demos.md b/concepts/05 UI Components/LoadIndicator/Demos.md new file mode 100644 index 0000000000..5edd3124a6 --- /dev/null +++ b/concepts/05 UI Components/LoadIndicator/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Load Indicator](https://js.devexpress.com/Demos/WidgetsGallery/Demo/LoadIndicator/Overview/) \ No newline at end of file diff --git a/concepts/05 UI Components/LoadPanel/Demos.md b/concepts/05 UI Components/LoadPanel/Demos.md new file mode 100644 index 0000000000..d96dad7f36 --- /dev/null +++ b/concepts/05 UI Components/LoadPanel/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Load Panel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/LoadPanel/Overview/) \ No newline at end of file diff --git a/concepts/05 UI Components/Lookup/01 Choose a Drop-Down Editor.md b/concepts/05 UI Components/Lookup/01 Choose a Drop-Down Editor.md new file mode 100644 index 0000000000..de31b0da01 --- /dev/null +++ b/concepts/05 UI Components/Lookup/01 Choose a Drop-Down Editor.md @@ -0,0 +1 @@ +#include editors-how-to-choose \ No newline at end of file diff --git a/concepts/05 UI Components/Lookup/10 Enable Grouping.md b/concepts/05 UI Components/Lookup/10 Enable Grouping.md index 8775e25aef..72c74b5390 100644 --- a/concepts/05 UI Components/Lookup/10 Enable Grouping.md +++ b/concepts/05 UI Components/Lookup/10 Enable Grouping.md @@ -262,9 +262,30 @@ If you use the [DevExtreme DataSource](/api-reference/30%20Data%20Layer/DataSour --- -To customize group headers, specify a [groupTemplate](/api-reference/10%20UI%20Components/dxLookup/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#groupTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component: +To customize group headers, specify a [groupTemplate](/api-reference/10%20UI%20Components/dxLookup/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#groupTemplate'). --- +##### jQuery + + + const lookupData = [{ + key: "Mr. John Heart", + items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"] + }, { + key: "Mrs. Olivia Peyton", + items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"] + }, // ... + ]; + + $(function() { + $("#lookupContainer").dxLookup({ + dataSource: lookupData, + grouped: true, + groupTemplate: function (data) { + return $("
Assigned: " + data.key + "
");
+ }
+ });
+ });
##### Angular
@@ -380,28 +401,6 @@ To customize group headers, specify a [groupTemplate](/api-reference/10%20UI%20C
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for items. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/dxLookup/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#itemTemplate') callback function as shown in the following code.
-
-
- const lookupData = [{
- key: "Mr. John Heart",
- items: ["Google AdWords Strategy", "New Brochures", "Update NDA Agreement"]
- }, {
- key: "Mrs. Olivia Peyton",
- items: ["Update Personnel Files", "Non-Compete Agreements", "Give Final Approval for Refunds"]
- }, // ...
- ];
-
- $(function() {
- $("#lookupContainer").dxLookup({
- dataSource: lookupData,
- grouped: true,
- groupTemplate: function (data) {
- return $("Assigned: " + data.key + "
");
- }
- });
- });
-
#####See Also#####
- [Lookup - Customize the Appearance](/concepts/05%20UI%20Components/Lookup/20%20Customize%20the%20Appearance/05%20Customize%20Item%20Appearance.md '/Documentation/Guide/UI_Components/Lookup/Customize_the_Appearance/')
- [Lookup - Enable Paging](/concepts/05%20UI%20Components/Lookup/15%20Enable%20Paging.md '/Documentation/Guide/UI_Components/Lookup/Enable_Paging/')
diff --git a/concepts/05 UI Components/Lookup/20 Customize the Appearance/05 Customize Item Appearance.md b/concepts/05 UI Components/Lookup/20 Customize the Appearance/05 Customize Item Appearance.md
index 3135a15035..2d6f6215a0 100644
--- a/concepts/05 UI Components/Lookup/20 Customize the Appearance/05 Customize Item Appearance.md
+++ b/concepts/05 UI Components/Lookup/20 Customize the Appearance/05 Customize Item Appearance.md
@@ -103,9 +103,40 @@ For a minor customization of Lookup items, you can define [specific fields](/api
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxLookup/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxLookup/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#itemTemplate').
---
+##### jQuery
+
+
+ const lookupData = [{
+ id: 1,
+ name: "HD Video Player",
+ imgSrc: "images/products/1-small.png"
+ }, {
+ id: 2,
+ name: "UltraHD Player",
+ imgSrc: "images/products/2-small.png"
+ },
+ // ...
+ ];
+
+ $(function() {
+ $("#lookupContainer").dxLookup({
+ dataSource: lookupData,
+ valueExpr: 'id',
+ displayExpr: 'name',
+ itemTemplate: function (itemData, itemIndex, itemElement) {
+ return $("").append(
+ $("").text("This is Info Tab"); - } - }, { - title: "Contacts", - template: $("#individualTemplate") - }] - }); - }); - - -
- --- -In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article. + #####See Also##### - [TabPanel - Control the Behavior](/concepts/05%20UI%20Components/TabPanel/15%20Control%20the%20Behavior.md '/Documentation/Guide/UI_Components/TabPanel/Control_the_Behavior') diff --git a/concepts/05 UI Components/TabPanel/Demos.md b/concepts/05 UI Components/TabPanel/Demos.md new file mode 100644 index 0000000000..1181e1659b --- /dev/null +++ b/concepts/05 UI Components/TabPanel/Demos.md @@ -0,0 +1,4 @@ +#include demos-intro + +- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TabPanel/Overview/) +- [Tab Drag & Drop](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TabPanel/SortableClosableTabs/) \ No newline at end of file diff --git a/concepts/05 UI Components/Tabs/05 Customize Item Appearance.md b/concepts/05 UI Components/Tabs/05 Customize Item Appearance.md index 352119011a..f42cb7df93 100644 --- a/concepts/05 UI Components/Tabs/05 Customize Item Appearance.md +++ b/concepts/05 UI Components/Tabs/05 Customize Item Appearance.md @@ -95,9 +95,25 @@ For a minor customization of tabs, you can define [specific fields](/api-referen --- -If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component: +If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/CollectionWidget/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#itemTemplate'). --- +##### jQuery + + + $(function() { + $("#tabsContainer").dxTabs({ + items: [ + { text: "User" }, + { text: "Comment" }, + { text: "Find" } + ], + itemTemplate: function (itemData, itemIndex, itemElement) { + itemElement.append("" + itemData.text + "
"); + } + }); + }); + ##### Angular @@ -195,31 +211,10 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 --- -If you use jQuery, use DOM manipulation methods to combine the HTML markup for tabs. To apply this markup, use the **itemTemplate** callback function as shown in the following code: - --- ##### jQuery - - $(function() { - $("#tabsContainer").dxTabs({ - items: [ - { text: "User" }, - { text: "Comment" }, - { text: "Find" } - ], - itemTemplate: function (itemData, itemIndex, itemElement) { - itemElement.append("" + itemData.text + "
"); - } - }); - }); - ---- - -You can also customize individual tabs. In Angular, Vue, and React, declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component. When using jQuery, you can declare the tabs as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/items/#template') property or assign a customization function straight to this property. - ---- -##### jQuery +You can also customize individual tabs. Declare them as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/items/#template') property or assign a customization function straight to this property. @@ -242,6 +237,8 @@ You can also customize individual tabs. In Angular, Vue, and React, declare them ##### Angular +You can also customize individual tabs. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component. +").text(groupData.key + " | Count: " + groupData.overallCount) + ) + }, + displayExpr: 'name', + valueExpr: 'count' + }); + }); + ##### Angular @@ -175,41 +204,10 @@ To customize group headers, specify a [groupTemplate](/api-reference/10%20UI%20C --- -If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for group headers. To apply this markup, use the [groupTemplate](/api-reference/10%20UI%20Components/dxDropDownList/1%20Configuration/groupTemplate.md '/Documentation/ApiReference/UI_Components/dxTagBox/Configuration/#groupTemplate') callback function as shown in the following code. - - const fruitsVegetables = [{ - // ... - }]; - - $(function() { - $("#tagBoxContainer").dxTagBox({ - dataSource: new DevExpress.data.DataSource({ - store: fruitsVegetables, - map: function(groupedItem) { - let overallCount = 0; - groupedItem.items.forEach(function(item) { - overallCount += item.count; - }); - return $.extend(groupedItem, { overallCount: overallCount }) - } - }), - grouped: true, - groupTemplate: function(groupData, _, groupElement) { - groupElement.append( - $("
").text(groupData.key + " | Count: " + groupData.overallCount) - ) - }, - displayExpr: 'name', - valueExpr: 'count' - }); - }); - #include common-demobutton with { url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Tag_Box/GroupedItems/" } -In addition, you can use a 3rd-party template engine to perform the needed customizations. For more information, see the [3rd-Party Template Engines](/concepts/05%20UI%20Components/zz%20Common/30%20Templates/30%203rd-Party%20Template%20Engines.md '/Documentation/Guide/UI_Components/Common/Templates/#3rd-Party_Template_Engines') article. - #####See Also##### - [TagBox - Customize Item Appearance](/concepts/05%20UI%20Components/TagBox/05%20Customize%20Item%20Appearance.md '/Documentation/Guide/UI_Components/TagBox/Customize_Item_Appearance/') - [TagBox API Reference](/api-reference/10%20UI%20Components/dxTagBox '/Documentation/ApiReference/UI_Components/dxTagBox/') diff --git a/concepts/05 UI Components/TagBox/Demos.md b/concepts/05 UI Components/TagBox/Demos.md new file mode 100644 index 0000000000..16b2907fbb --- /dev/null +++ b/concepts/05 UI Components/TagBox/Demos.md @@ -0,0 +1,5 @@ +#include demos-intro + +- [Overview](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TagBox/Overview/) +- [Grouped Items](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TagBox/GroupedItems/) +- [Tag Count Limitation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TagBox/TagCountLimitation/) \ No newline at end of file diff --git a/concepts/05 UI Components/TextArea/Demos.md b/concepts/05 UI Components/TextArea/Demos.md new file mode 100644 index 0000000000..34c911db3d --- /dev/null +++ b/concepts/05 UI Components/TextArea/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Text Area](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TextArea/Overview/) diff --git a/concepts/05 UI Components/TextBox/Demos.md b/concepts/05 UI Components/TextBox/Demos.md new file mode 100644 index 0000000000..c0dab32892 --- /dev/null +++ b/concepts/05 UI Components/TextBox/Demos.md @@ -0,0 +1,3 @@ +#include demos-intro + +- [Text Box](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TextBox/Overview/) diff --git a/concepts/05 UI Components/TileView/05 Customize Tile Appearance.md b/concepts/05 UI Components/TileView/05 Customize Tile Appearance.md index cd310d2ccc..597249a095 100644 --- a/concepts/05 UI Components/TileView/05 Customize Tile Appearance.md +++ b/concepts/05 UI Components/TileView/05 Customize Tile Appearance.md @@ -90,9 +90,38 @@ For a minor customization of tiles, you can define [specific fields](/api-refere --- -If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxTileView/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTileView/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component: +If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxTileView/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTileView/Configuration/#itemTemplate'). --- +##### jQuery + + const tileViewData = [ + { name: "Alabama", capital: "Montgomery" }, + { name: "Alaska", capital: "Juneau" }, + { name: "Arizona", capital: "Phoenix" }, + // ... + ]; + + $(function() { + $("#tileViewContainer").dxTileView({ + dataSource: tileViewData, + itemTemplate: function (itemData, itemIndex, itemElement) { + itemElement.addClass("tile"); + itemElement.append( + "
" + itemData.name + "
", + "Capital: " + itemData.capital + "
" + ) + } + }); + }); + + .tile { + border-radius: .5em; + text-align: center; + color: white; + background: gray; + } + ##### Angular @@ -231,44 +260,10 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 --- -If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for tiles. To apply this markup, use the [itemTemplate](/api-reference/10%20UI%20Components/dxTileView/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTileView/Configuration/#itemTemplate') callback function as shown in the following code: - --- ##### jQuery - const tileViewData = [ - { name: "Alabama", capital: "Montgomery" }, - { name: "Alaska", capital: "Juneau" }, - { name: "Arizona", capital: "Phoenix" }, - // ... - ]; - - $(function() { - $("#tileViewContainer").dxTileView({ - dataSource: tileViewData, - itemTemplate: function (itemData, itemIndex, itemElement) { - itemElement.addClass("tile"); - itemElement.append( - "" + itemData.name + "
", - "Capital: " + itemData.capital + "
" - ) - } - }); - }); - - .tile { - border-radius: .5em; - text-align: center; - color: white; - background: gray; - } - ---- - -You can also customize individual tiles. In Angular, Vue, and React, declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component. When using jQuery, you can declare the tiles as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/items/#template') property or assign a customization function straight to this property. - ---- -##### jQuery +You can also customize individual tiles. Declare them as scripts and reference them in the [template](/api-reference/_hidden/CollectionWidgetItem/template.md '/Documentation/ApiReference/UI_Components/dxTabs/Configuration/items/#template') property or assign a customization function straight to this property. @@ -288,6 +283,8 @@ You can also customize individual tiles. In Angular, Vue, and React, declare the ##### Angular +You can also customize individual tiles. Declare them using the [dxItem](/api-reference/10%20UI%20Components/Markup%20Components/dxItem '/Documentation/ApiReference/UI_Components/Markup_Components/dxItem/') component. +" + info.text + "
")
+ .css("color", "blue");
+ }
+ }]
+ });
+ });
+
##### Angular
@@ -82,27 +97,6 @@ To customize cell appearance, use a column's [cellTemplate](/api-reference/_hidd
---
-If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for cells. To apply this markup, use the **cellTemplate** function as shown in the following code:
-
----
-##### jQuery
-
-
- $(function() {
- $("#treeListContainer").dxTreeList({
- // ...
- columns: [{
- dataField: "Title",
- cellTemplate: function(element, info) {
- element.append("" + info.text + "
")
- .css("color", "blue");
- }
- }]
- });
- });
-
----
-
While **cellTemplate** customizes data cells only, the [onCellPrepared](/api-reference/10%20UI%20Components/dxTreeList/1%20Configuration/onCellPrepared.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#onCellPrepared') function can customize any cell. Unlike **cellTemplate**, this function does customizations after a cell is created, so you cannot use it to change the cell value. Check the [rowType](/api-reference/10%20UI%20Components/dxTreeList/6%20Row/rowType.md '/Documentation/ApiReference/UI_Components/dxTreeList/Row/#rowType') field of the function's argument to detect the UI element that owns the cell.
---
diff --git a/concepts/05 UI Components/TreeList/20 Editing/20 API/30 Delete.md b/concepts/05 UI Components/TreeList/20 Editing/20 API/30 Delete.md
index b945742079..795a454f89 100644
--- a/concepts/05 UI Components/TreeList/20 Editing/20 API/30 Delete.md
+++ b/concepts/05 UI Components/TreeList/20 Editing/20 API/30 Delete.md
@@ -226,6 +226,7 @@ Note that in the [batch mode](/concepts/05%20UI%20Components/TreeList/20%20Editi
}
}
export default App;
+
---
#####See Also#####
diff --git a/concepts/05 UI Components/TreeList/Demos.md b/concepts/05 UI Components/TreeList/Demos.md
new file mode 100644
index 0000000000..f005c5a72a
--- /dev/null
+++ b/concepts/05 UI Components/TreeList/Demos.md
@@ -0,0 +1,47 @@
+#include demos-intro
+
+**Data Binding**
+
+- [Simple Array: Plain Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/SimpleArrayPlainStructure/)
+- [Simple Array: Hierarchical Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/SimpleArrayHierarchicalStructure/)
+- [Load Data on Demand](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/LoadDataOnDemand/)
+- [Web API Service](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/WebAPIService/)
+
+**Editing**
+
+- [Row Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/RowEditing/)
+- [Cell Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/CellEditing/)
+- [Batch Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/BatchEditing/)
+- [Form Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/FormEditing/)
+- [Popup Editing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/PopupEditing/)
+- [Customize Keyboard Navigation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/CustomizeKeyboardNavigation/)
+
+**Selection**
+
+- [Single Row Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/SingleRowSelection/)
+- [Multiple Row Selection](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/MultipleRowSelection/)
+
+**Filtering**
+
+- [Using Search Panel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/UsingSearchPanel/)
+- [Using Filter Row](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/UsingFilterRow/)
+- [Using Header Filter](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/UsingHeaderFilter/)
+- [Filter Panel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/FilterPanel/)
+- [Filter Modes](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/FilterModes/)
+
+**Column Customization**
+
+- [Column Chooser](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/ColumnChooser/)
+- [Column Reordering](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/Reordering/)
+- [Column Resizing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/Resizing/)
+- [Column Fixing](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/ColumnFixing/)
+
+**More Features**
+
+- [Sorting](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/MultipleSorting/)
+- [Paging](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/Paging/)
+- [Node Drag & Drop](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/LocalReordering/)
+- [Focused Row](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/FocusedRow/)
+- [State Persistence](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/StatePersistence/)
+- [Adaptability](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/Adaptability/)
+- [Keyboard Navigation](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/KeyboardNavigation/)
diff --git a/concepts/05 UI Components/TreeMap/Demos.md b/concepts/05 UI Components/TreeMap/Demos.md
new file mode 100644
index 0000000000..15644593cd
--- /dev/null
+++ b/concepts/05 UI Components/TreeMap/Demos.md
@@ -0,0 +1,7 @@
+#include demos-intro
+
+- [Hierarchical Data Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/HierarchicalDataStructure/)
+- [Plain Data Structure](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/FlatDataStructure/)
+- [Tiling Algorithms](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/TilingAlgorithms/)
+- [Colorization](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Colorization/)
+- [Drill Down](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/DrillDown/)
\ No newline at end of file
diff --git a/concepts/05 UI Components/TreeView/30 Customize Node Appearance.md b/concepts/05 UI Components/TreeView/30 Customize Node Appearance.md
index e354a4990e..755c10207b 100644
--- a/concepts/05 UI Components/TreeView/30 Customize Node Appearance.md
+++ b/concepts/05 UI Components/TreeView/30 Customize Node Appearance.md
@@ -147,9 +147,20 @@ For minor customization of nodes, you can define [specific fields](/api-referenc
---
-If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxTreeView/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#itemTemplate'). In Angular and Vue, you can declare it in the markup. In React, you can use a rendering function (shown in the code below) or component:
+If you need a more flexible solution, define an [itemTemplate](/api-reference/10%20UI%20Components/dxTreeView/1%20Configuration/itemTemplate.md '/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#itemTemplate').
---
+##### jQuery
+
+ $(function() {
+ $("#treeViewContainer").dxTreeView({
+ dataSource: treeViewData,
+ itemTemplate: function (itemData, itemIndex, itemElement) {
+ itemElement.append("" + itemData.text + "");
+ }
+ });
+ });
+
##### Angular
-
-
-##### Knockout
-
- var viewModel = {
- login: ko.observable(""),
- loginRules: [{
- type: 'required'
- }, {
- type: 'pattern',
- pattern: '^[a-zA-Z]+$',
- message: 'Do not use digits.'
- }]
- };
- ko.applyBindings(viewModel);
-
-
-
-
##### Vue
diff --git a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/1 Group the Editors.md b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/1 Group the Editors.md
index a9b826b034..711bc21d5c 100644
--- a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/1 Group the Editors.md
+++ b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/1 Group the Editors.md
@@ -75,30 +75,6 @@ Editors belonging to a single **Validation Group** can be validated together. Al
})
export class AppModule { }
-##### AngularJS
-
-
-
-
-
-##### Knockout
-
-
-
-
-
-
-
-
-
##### Vue
diff --git a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/2 Validate the Group.md b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/2 Validate the Group.md
index 306b9d2beb..04d8f47a29 100644
--- a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/2 Validate the Group.md
+++ b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/2 Validate the Group.md
@@ -102,63 +102,6 @@ Call a group's [validate()](/api-reference/10%20UI%20Components/dxValidator/3%20
})
export class AppModule { }
-##### AngularJS
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function Controller($scope) {
- // ...
- $scope.loginClick = function (e) {
- var result = e.validationGroup.validate();
- if (result.isValid) {
- // ...
- }
- };
- }
-
-##### Knockout
-
-
-
-
-
-
-
-
@@ -447,6 +395,8 @@ Alternatively, you can use the [DevExpress.validationEngine.validateGroup](/api-
##### React
+Alternatively, you can get a group's instance and call its [validate](/api-reference/10%20UI%20Components/dxValidationGroup/3%20Methods/validate().md '/Documentation/ApiReference/UI_Components/dxValidationGroup/Methods/#validate') method to validate this group:
+
import React from 'react';
diff --git a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/3 Display Validation Errors.md b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/3 Display Validation Errors.md
index aea138f092..f733836808 100644
--- a/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/3 Display Validation Errors.md
+++ b/concepts/05 UI Components/zz Common/05 UI Widgets/20 Data Validation/20 Validate Several Editor Values/3 Display Validation Errors.md
@@ -48,21 +48,6 @@ All group validation errors can be displayed in the [ValidationSummary](/api-ref
})
export class AppModule { }
-##### AngularJS
-
-
-
- ...
-
-
-
-##### Knockout
-
-
-
-
-
-
##### Vue
diff --git a/concepts/05 UI Components/zz Common/30 Templates/05 Default Templates.md b/concepts/05 UI Components/zz Common/30 Templates/05 Default Templates.md
index 3b52b9cb07..e749258b59 100644
--- a/concepts/05 UI Components/zz Common/30 Templates/05 Default Templates.md
+++ b/concepts/05 UI Components/zz Common/30 Templates/05 Default Templates.md
@@ -54,41 +54,6 @@ You can achieve the same in the markup using the [dxItem](/api-reference/10%20UI
})
export class AppModule { }
-#####AngularJS
-
-
-
-
-
-
-
-
- angular.module('DemoApp', ['dx'])
- .controller('DemoController', function ($scope) {
- // ...
- });
-
-#####Knockout
-
-
-
- Oranges
-
-
-
-
-
-
-
- var viewModel = {
- // ...
- };
-
- ko.applyBindings(viewModel);
-
##### Vue
diff --git a/concepts/34 ASP.NET MVC Controls/10 Prerequisites and Installation/Prerequisites and Installation.md b/concepts/34 ASP.NET MVC Controls/10 Prerequisites and Installation/Prerequisites and Installation.md
index 628178187b..58e6b54fb9 100644
--- a/concepts/34 ASP.NET MVC Controls/10 Prerequisites and Installation/Prerequisites and Installation.md
+++ b/concepts/34 ASP.NET MVC Controls/10 Prerequisites and Installation/Prerequisites and Installation.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400702/?v=22.2",
core: "https://docs.devexpress.com/AspNetCore/401026/?v=22.2"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md b/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md
index 773a18f5ae..6b58e2a254 100644
--- a/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md
+++ b/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400703/?v=22.2",
core: "https://docs.devexpress.com/AspNetCore/400574/?v=22.2"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md b/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md
index 6038b3d752..bb7e83556a 100644
--- a/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md
+++ b/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400704/?v=22.2",
core: "https://docs.devexpress.com/AspNetCore/400575/?v=22.2"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/01 Overview.md b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/01 Overview.md
index 83dae80fe6..66222c7079 100644
--- a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/01 Overview.md
+++ b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/01 Overview.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400705/?v=22.2",
core: "https://docs.devexpress.com/AspNetCore/400576/?v=22.2"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/05 Validate a Group of Editors.md b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/05 Validate a Group of Editors.md
index c08d67b8a1..70877d176a 100644
--- a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/05 Validate a Group of Editors.md
+++ b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/05 Validate a Group of Editors.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400705/?v=22.2#validate-a-group-of-editors",
core: "https://docs.devexpress.com/AspNetCore/400576/?v=22.2#validate-a-group-of-editors"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/20 Implement a Custom Validation Rule.md b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/20 Implement a Custom Validation Rule.md
index 27d563a351..fb52e3099c 100644
--- a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/20 Implement a Custom Validation Rule.md
+++ b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/20 Implement a Custom Validation Rule.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400705/?v=22.2#implement-a-custom-validation-rule",
core: "https://docs.devexpress.com/AspNetCore/400576/?v=22.2#implement-a-custom-validation-rule"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/25 Validate and Submit an HTML Form.md b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/25 Validate and Submit an HTML Form.md
index 33f42d7f5c..1ef3628862 100644
--- a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/25 Validate and Submit an HTML Form.md
+++ b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/25 Validate and Submit an HTML Form.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400705/?v=22.2#validate-and-submit-an-html-form",
core: "https://docs.devexpress.com/AspNetCore/400576/?v=22.2#validate-and-submit-an-html-form"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/28 Validate and Submit the Form Control.md b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/28 Validate and Submit the Form Control.md
index 3cff7f4c55..b2b763c58d 100644
--- a/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/28 Validate and Submit the Form Control.md
+++ b/concepts/34 ASP.NET MVC Controls/35 Client-Side Data Validation/28 Validate and Submit the Form Control.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400705/?v=22.2#validate-and-submit-the-form-control",
core: "https://docs.devexpress.com/AspNetCore/400576/?v=22.2#validate-and-submit-the-form-control"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/38 Localization/10 Using Intl.md b/concepts/34 ASP.NET MVC Controls/38 Localization/10 Using Intl.md
index f136649613..97302cb923 100644
--- a/concepts/34 ASP.NET MVC Controls/38 Localization/10 Using Intl.md
+++ b/concepts/34 ASP.NET MVC Controls/38 Localization/10 Using Intl.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400706/?v=22.2#intl",
core: "https://docs.devexpress.com/AspNetCore/400577/?v=22.2#intl"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/38 Localization/20 Using Globalize.md b/concepts/34 ASP.NET MVC Controls/38 Localization/20 Using Globalize.md
index b59a1815b4..72a4a0ddb3 100644
--- a/concepts/34 ASP.NET MVC Controls/38 Localization/20 Using Globalize.md
+++ b/concepts/34 ASP.NET MVC Controls/38 Localization/20 Using Globalize.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400706/?v=22.2#globalize",
core: "https://docs.devexpress.com/AspNetCore/400577/?v=22.2#globalize"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/01 Project Templates.md b/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/01 Project Templates.md
index c9ccfe8ef1..740b1197ab 100644
--- a/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/01 Project Templates.md
+++ b/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/01 Project Templates.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400702/?v=22.2#create-a-new-project-from-templates",
core: "https://docs.devexpress.com/AspNetCore/401026/?v=22.2#create-a-new-project-from-templates"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/05 Add or Upgrade the Required Resources in Your Project.md b/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/05 Add or Upgrade the Required Resources in Your Project.md
index cbd47152e0..734ae1f910 100644
--- a/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/05 Add or Upgrade the Required Resources in Your Project.md
+++ b/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/05 Add or Upgrade the Required Resources in Your Project.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400702/?v=22.2#add-devextreme-to-an-existing-project",
core: "https://docs.devexpress.com/AspNetCore/401026/?v=22.2#add-devextreme-to-an-existing-project"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/20 Scaffolding.md b/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/20 Scaffolding.md
index 80acd36cd4..e4d12614d7 100644
--- a/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/20 Scaffolding.md
+++ b/concepts/34 ASP.NET MVC Controls/40 Visual Studio Integration/20 Scaffolding.md
@@ -2,3 +2,5 @@
mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/401327/?v=22.2",
core: "https://docs.devexpress.com/AspNetCore/401035/?v=22.2"
}
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/36 ASP.NET MVC 5.md b/concepts/36 ASP.NET MVC 5.md
index 60ca98e9d6..fc896a5883 100644
--- a/concepts/36 ASP.NET MVC 5.md
+++ b/concepts/36 ASP.NET MVC 5.md
@@ -1 +1,3 @@
Starting from v19.1, ASP.NET MVC 5 Controls documentation is available at docs.devexpress.com.
+
+[tags] jquery
\ No newline at end of file
diff --git a/concepts/37 ASP.NET Core.md b/concepts/37 ASP.NET Core.md
index a73221dd48..1f146737db 100644
--- a/concepts/37 ASP.NET Core.md
+++ b/concepts/37 ASP.NET Core.md
@@ -1 +1,3 @@
Starting from v19.1, ASP.NET Core Controls documentation is available at docs.devexpress.com.
+
+[tags] jquery
diff --git a/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/03 Configure Stylesheets.md b/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/03 Configure Stylesheets.md
index c6aa1450c9..0a7a11064e 100644
--- a/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/03 Configure Stylesheets.md
+++ b/concepts/40 Angular Components/10 Getting Started/03 Add DevExtreme to an Angular CLI Application/03 Configure Stylesheets.md
@@ -35,6 +35,6 @@ Then, go to the `src` folder, open the `index.html` file, and add the `dx-viewpo
-[note] [SVG-based UI components](/concepts/60%20Themes%20and%20Styles/00%20HTML-%20and%20SVG-Based%20UI%20Components.md '/Documentation/Guide/Themes_and_Styles/HTML-_and_SVG-Based_UI_Components/') do not require theme stylesheets. If you choose to reference the stylesheets, the UI components apply an appearance that matches them.
+[note] [SVG-based UI components](/Documentation/Guide/Themes_and_Styles/Styling_Methods/) do not require theme stylesheets. If you choose to reference the stylesheets, the UI components apply an appearance that matches them.
[tags] theme
diff --git a/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/04 Using Webpack/04 Import Stylesheets.md b/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/04 Using Webpack/04 Import Stylesheets.md
index f1e302286f..02ff297a5a 100644
--- a/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/04 Using Webpack/04 Import Stylesheets.md
+++ b/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/04 Using Webpack/04 Import Stylesheets.md
@@ -4,4 +4,4 @@ Open the main `.ts` file and import a [predefined theme stylesheet](/concepts/60
// ...
import 'devextreme/dist/css/dx.light.css';
-[note] [SVG-based UI components](/concepts/60%20Themes%20and%20Styles/00%20HTML-%20and%20SVG-Based%20UI%20Components.md '/Documentation/Guide/Themes_and_Styles/HTML-_and_SVG-Based_UI_Components/') do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.
+[note] [SVG-based UI components](/Documentation/Guide/Themes_and_Styles/Styling_Methods/) do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.
diff --git a/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/05 Using Ionic/05 Import Stylesheets.md b/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/05 Using Ionic/05 Import Stylesheets.md
index 969b3bdaf1..a1d93ef5d5 100644
--- a/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/05 Using Ionic/05 Import Stylesheets.md
+++ b/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/05 Using Ionic/05 Import Stylesheets.md
@@ -3,4 +3,4 @@ Open the `global.scss` file in the `src` folder and import a [predefined theme s
@import '~devextreme/dist/css/dx.light.css';
-[note] [SVG-based UI components](/concepts/60%20Themes%20and%20Styles/00%20HTML-%20and%20SVG-Based%20UI%20Components.md '/Documentation/Guide/Themes_and_Styles/HTML-_and_SVG-Based_UI_Components/') do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.
\ No newline at end of file
+[note] [SVG-based UI components](/Documentation/Guide/Themes_and_Styles/Styling_Methods/) do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.
\ No newline at end of file
diff --git a/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/06 Using Rollup/04 Import Stylesheets.md b/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/06 Using Rollup/04 Import Stylesheets.md
index b4d8c6ceda..3b09453506 100644
--- a/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/06 Using Rollup/04 Import Stylesheets.md
+++ b/concepts/40 Angular Components/10 Getting Started/30 Other Approaches/06 Using Rollup/04 Import Stylesheets.md
@@ -24,4 +24,4 @@ To create a single CSS bundle, you can use the `rollup-plugin-css-only` package.
]
}
-[note] [SVG-based UI components](/concepts/60%20Themes%20and%20Styles/00%20HTML-%20and%20SVG-Based%20UI%20Components.md '/Documentation/Guide/Themes_and_Styles/HTML-_and_SVG-Based_UI_Components/') do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.
+[note] [SVG-based UI components](/Documentation/Guide/Themes_and_Styles/Styling_Methods/) do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.
diff --git a/concepts/50 React Components/05 Add DevExtreme to a React Application/40 Import Stylesheets.md b/concepts/50 React Components/05 Add DevExtreme to a React Application/40 Import Stylesheets.md
index a6cf9baf2c..2db082b752 100644
--- a/concepts/50 React Components/05 Add DevExtreme to a React Application/40 Import Stylesheets.md
+++ b/concepts/50 React Components/05 Add DevExtreme to a React Application/40 Import Stylesheets.md
@@ -16,6 +16,6 @@ Then, go to the `public` folder, open the `index.html` file, and add the `dx-vie
- Oranges
-
-