diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
index ca6fff5a9761..8cee6837275e 100644
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -17,7 +17,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        branch: [ '22_1', '22_2', '23_1', '23_2', '24_1' ]
+        branch: [ '22_2', '23_1', '23_2', '24_1', '24_2' ]
         language: [ 'csharp', 'javascript' ]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index ab830ad0ff81..d7f4661f3f8b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/packages_publishing_scheduler.yml b/.github/workflows/packages_publishing_scheduler.yml
index 5d3695f239ce..656ef6bd8030 100644
--- a/.github/workflows/packages_publishing_scheduler.yml
+++ b/.github/workflows/packages_publishing_scheduler.yml
@@ -12,7 +12,7 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
     strategy:
       matrix:
-        branch: ['23_2', '24_1']
+        branch: ['23_2', '24_1', '24_2']
 
     name: Run Packages Publishing workflow
     steps:
diff --git a/.github/workflows/paths.yml b/.github/workflows/paths.yml
index 2b9fa1620bfc..a2a0539386fb 100644
--- a/.github/workflows/paths.yml
+++ b/.github/workflows/paths.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   MAX_LENGTH: 170
diff --git a/.github/workflows/playgrounds_tests.yml b/.github/workflows/playgrounds_tests.yml
index 77200ed5dd36..ee06f91b0069 100644
--- a/.github/workflows/playgrounds_tests.yml
+++ b/.github/workflows/playgrounds_tests.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/qunit_tests-additional-renovation.yml b/.github/workflows/qunit_tests-additional-renovation.yml
index 5705f6a1e536..5d69d103a228 100644
--- a/.github/workflows/qunit_tests-additional-renovation.yml
+++ b/.github/workflows/qunit_tests-additional-renovation.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/qunit_tests-renovation.yml b/.github/workflows/qunit_tests-renovation.yml
index aadbca641f50..c9d1e0c98e0b 100644
--- a/.github/workflows/qunit_tests-renovation.yml
+++ b/.github/workflows/qunit_tests-renovation.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/renovation.yml b/.github/workflows/renovation.yml
index 30d77607e93e..be3f1286502e 100644
--- a/.github/workflows/renovation.yml
+++ b/.github/workflows/renovation.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/styles.yml b/.github/workflows/styles.yml
index 960f27314c7a..8de3b42d4f4a 100644
--- a/.github/workflows/styles.yml
+++ b/.github/workflows/styles.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/testcafe_tests.yml b/.github/workflows/testcafe_tests.yml
index 8d7cca54bec4..a03b6906f166 100644
--- a/.github/workflows/testcafe_tests.yml
+++ b/.github/workflows/testcafe_tests.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/themebuilder_tests.yml b/.github/workflows/themebuilder_tests.yml
index 887f31941f26..12fe6e6098e7 100644
--- a/.github/workflows/themebuilder_tests.yml
+++ b/.github/workflows/themebuilder_tests.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/.github/workflows/ts_declarations.yml b/.github/workflows/ts_declarations.yml
index 16112ce748e1..293272236b24 100644
--- a/.github/workflows/ts_declarations.yml
+++ b/.github/workflows/ts_declarations.yml
@@ -7,7 +7,7 @@ concurrency:
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 jobs:
   check-ts-bundle:
diff --git a/.github/workflows/wrapper_tests.yml b/.github/workflows/wrapper_tests.yml
index 02386c6f5c68..64f58d1d3985 100644
--- a/.github/workflows/wrapper_tests.yml
+++ b/.github/workflows/wrapper_tests.yml
@@ -3,7 +3,7 @@ name: DevExtreme Wrappers Tests
 on:
   pull_request:
   push:
-    branches: [24_1]
+    branches: [24_2]
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_TOKEN }}
diff --git a/apps/angular/package.json b/apps/angular/package.json
index 395ef4f32b03..9cc3c4ef4f2d 100644
--- a/apps/angular/package.json
+++ b/apps/angular/package.json
@@ -2,7 +2,7 @@
   "name": "devextreme-angular-playground",
   "description": "DevExtreme Angular UI and Visualization Components",
   "private": true,
-  "version": "24.1.3",
+  "version": "24.2.0",
   "author": "Developer Express Inc.",
   "license": "MIT",
   "dependencies": {
@@ -16,8 +16,8 @@
     "@angular/platform-browser-dynamic": "~16.2.12",
     "@angular/router": "~16.2.12",
     "core-js": "^2.6.12",
-    "devextreme": "~24.1.3",
-    "devextreme-angular": "~24.1.3",
+    "devextreme": "~24.2.0",
+    "devextreme-angular": "~24.2.0",
     "rxjs": "^6.6.7",
     "tslib": "^2.6.1",
     "zone.js": "0.13.0"
diff --git a/apps/demos/Demos/Accordion/Overview/Vue/App.vue b/apps/demos/Demos/Accordion/Overview/Vue/App.vue
index 6a4a82d6fdb8..346cd726a057 100644
--- a/apps/demos/Demos/Accordion/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Accordion/Overview/Vue/App.vue
@@ -7,8 +7,9 @@
       :animation-duration="animationDuration"
       v-model:selected-items="selectedItems"
       id="accordion-container"
+      item-title-template="itemTitle"
     >
-      <template #title="{ data }">
+      <template #itemTitle="{ data }">
         <CustomTitle :item-data="data"/>
       </template>
       <template #item="{ data }">
diff --git a/apps/demos/Demos/Charts/AjaxRequest/description.md b/apps/demos/Demos/Charts/AjaxRequest/description.md
index 17c6977b066b..25306e3dbd1c 100644
--- a/apps/demos/Demos/Charts/AjaxRequest/description.md
+++ b/apps/demos/Demos/Charts/AjaxRequest/description.md
@@ -1,4 +1,4 @@
 If your server stores data in JSON format, you do not need to make AJAX requests to get the data. Instead, assign the URL of your data storage to the Chart's [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource) property. To configure how the component displays data, specify the [series](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) type and its nested options: [argumentField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#argumentField) and [valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField), so the component can determine the object fields that indicate Chart arguments and values in JSON.
-<!--split-->
 
-Note that you can also use a JSONP callback parameter supported by <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">jQuery.ajax()</a> in the [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource).
\ No newline at end of file
+Note that you can also use a JSONP callback parameter supported by <a href="http://api.jquery.com/jQuery.ajax/" target="_blank">jQuery.ajax()</a> in the [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/Annotation/description.md b/apps/demos/Demos/Charts/Annotation/description.md
index af0af775f272..f1e2ba34d519 100644
--- a/apps/demos/Demos/Charts/Annotation/description.md
+++ b/apps/demos/Demos/Charts/Annotation/description.md
@@ -1,7 +1,7 @@
 Annotations are containers for images, text blocks, and custom content that display additional information about the visualized data.
-<!--split-->
 
 To create annotations, populate the Chart's [annotations](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/) array. Each object in the array configures an individual annotation. To specify properties for all annotations, use the [commonAnnotationSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAnnotationSettings/) object. Individual settings take precedence over common settings.
+<!--split-->
 
 You can set each annotation's [type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/#type) property to *"text"*, *"image"*, or *"custom"*. Depending on the **type**, specify the [text](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/#text) or [image](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/image/) property. You can also add a [description](/Documentation/ApiReference/UI_Components/dxChart/Configuration/annotations/#description) that will be displayed in a tooltip.
 
diff --git a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/description.md b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/description.md
index 5cdff4a1befa..0feee59329fb 100644
--- a/apps/demos/Demos/Charts/AutoCalculatedBarWidth/description.md
+++ b/apps/demos/Demos/Charts/AutoCalculatedBarWidth/description.md
@@ -1,4 +1,4 @@
 This demo illustrates a common issue in multi-series charts. Individual [series](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/) can skip values for certain arguments or include zero values. In such cases, arguments can display a different number of bars and cause uneven gaps between data. 
-<!--split-->
 
 The [ignoreEmptyPoints](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/#ignoreEmptyPoints) property allows you to change this behavior. If you set it to **true**, bars increase their width to fill the gaps. In this demo, you can see how the property affects the following arguments: `Iran`, `Canada`, `Saudi Arabia`, and `Mexico`.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/AxisLabelsOverlapping/description.md b/apps/demos/Demos/Charts/AxisLabelsOverlapping/description.md
index 90b5d7927963..3289d9827c5b 100644
--- a/apps/demos/Demos/Charts/AxisLabelsOverlapping/description.md
+++ b/apps/demos/Demos/Charts/AxisLabelsOverlapping/description.md
@@ -1,5 +1,4 @@
 In this demo, argument axis labels overlap due to their length. 
-<!--split-->
 
 To specify the overlapping behavior, you can use one of the following [label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/).[overlappingBehavior](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/#overlappingBehavior) modes:
 
@@ -14,6 +13,6 @@ Rotates axis labels at the angle specified by the [rotationAngle](/Documentation
 
 - `stagger`      
 Arranges axis labels into two staggered rows. Use the [staggeringSpacing](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/#staggeringSpacing) property to specify an empty space between rows.
+<!--split-->
 
-All of the values above can be applied to a horizontal axis, but only `none` and `hide` can be specified for a vertical axis.
-
+All of the values above can be applied to a horizontal axis, but only `none` and `hide` can be specified for a vertical axis.
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/AxisLabelsTemplates/description.md b/apps/demos/Demos/Charts/AxisLabelsTemplates/description.md
index 426ce3602c64..3a08cf079dcf 100644
--- a/apps/demos/Demos/Charts/AxisLabelsTemplates/description.md
+++ b/apps/demos/Demos/Charts/AxisLabelsTemplates/description.md
@@ -1,6 +1,6 @@
 Axis labels display values for [major axis ticks](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings/tick/).
-<!--split-->
 
 To configure labels for individual axes, specify label settings in the **valueAxis**.[label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/label/) and **argumentAxis**.[label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/label/) objects. To configure labels for all axes, use the **commonAxisSettings**.[label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings/label/) object. Individual settings take precedence over common settings.
 
 This demo illustrates how you can display custom content for axis labels. To replicate this demo, declare SVG markup within the [template](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings/label/#template) property. You can access a label's original and formatted values from template code. 
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/Candlestick/description.md b/apps/demos/Demos/Charts/Candlestick/description.md
index 9c076573c303..6c6be0d420e4 100644
--- a/apps/demos/Demos/Charts/Candlestick/description.md
+++ b/apps/demos/Demos/Charts/Candlestick/description.md
@@ -1,7 +1,7 @@
 The Candlestick financial chart is designed to communicate trading patterns over a short period of time. A single data point on a Candlestick [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type) displays variations in stock prices over the course of a day.
-<!--split-->
 
 You can use the Candlestick type for an individual [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) or specify the type in the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object for all series in the Chart. Use the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/).[candlestick](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/CandleStickSeries/) object to configure properties of the Chart Candlestick series.
+<!--split-->
 
 In Candlestick series, each point consists of a rectangle (body) and a vertical line (shadow, wick, or tail). The top and bottom values of a vertical line correspond to the highest and lowest prices of the stock, respectively. Use the [highValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#highValueField) and [lowValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#lowValueField) properties to specify data source fields for these prices.
 
diff --git a/apps/demos/Demos/Charts/ClientSideDataProcessing/description.md b/apps/demos/Demos/Charts/ClientSideDataProcessing/description.md
index 1b61dd263e2f..569cced4ea5a 100644
--- a/apps/demos/Demos/Charts/ClientSideDataProcessing/description.md
+++ b/apps/demos/Demos/Charts/ClientSideDataProcessing/description.md
@@ -1,6 +1,6 @@
 The Chart component can get data from a remote storage and process it on the client side. To implement this functionality, assign a [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) object to the Chart [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource) property.
-<!--split-->
 
 In the [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/), implement a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/). Switch the [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) to the `raw` [loadMode](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#loadMode) and load all data from the server in the [load](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#load) function as shown in the demo. Set the [paginate](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#paginate) property to **false** to prevent data from partitioning. You can also apply [filter](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#filter) to the received values. In this demo, select different values of the drop-down menu under the chart to apply different filters.
+<!--split-->
 
 Once you load the data, specify the [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) type and its nested options: [argumentField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#argumentField) and [valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField), so the component can determine which object fields in the data source indicate Chart arguments and values.
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/ColorEachBar/description.md b/apps/demos/Demos/Charts/ColorEachBar/description.md
index d14ffa4ea10d..2b886db1de1c 100644
--- a/apps/demos/Demos/Charts/ColorEachBar/description.md
+++ b/apps/demos/Demos/Charts/ColorEachBar/description.md
@@ -1,8 +1,8 @@
 The Chart assigns one color to one series. To color bars differently, create a separate series for each bar.
-<!--split-->
 
 Assign the `age` field to the [argumentField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/#argumentField) property of the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object to specify a common argument for the series. Then specify the [valueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#valueField) property.
 
 Choose a data field and assign it to the [seriesTemplate](/Documentation/ApiReference/UI_Components/dxChart/Configuration/seriesTemplate/).[nameField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/seriesTemplate/#nameField) property. Each value from this data field generates a separate series.
 
-To learn more about this type of data binding, refer to the following demo: [Dynamic Series from the DataSource](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/SeriesTemplates/).
\ No newline at end of file
+To learn more about this type of data binding, refer to the following demo: [Dynamic Series from the DataSource](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/SeriesTemplates/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/CustomLegendMarkers/description.md b/apps/demos/Demos/Charts/CustomLegendMarkers/description.md
index 95790d97fbfd..b3473c4b036a 100644
--- a/apps/demos/Demos/Charts/CustomLegendMarkers/description.md
+++ b/apps/demos/Demos/Charts/CustomLegendMarkers/description.md
@@ -1,4 +1,4 @@
 Legend markers are SVG elements. To customize a legend marker, declare the SVG markup in the [markerTemplate](/Documentation/ApiReference/UI_Components/dxChart/Configuration/legend/#markerTemplate). You can access the [legend item data object](/Documentation/ApiReference/UI_Components/dxChart/Types/Legend/) inside the template and use it to identify the series and read its parameters.
-<!--split-->
 
-In this demo, the markers' appearance changes when you click the markers to show or hide the corresponding series.
\ No newline at end of file
+In this demo, the markers' appearance changes when you click the markers to show or hide the corresponding series.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/description.md b/apps/demos/Demos/Charts/ExportCustomMarkup/description.md
index 05a832322b62..cab247c59569 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/description.md
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/description.md
@@ -1,4 +1,4 @@
 The [DevExpress.viz.exportFromMarkup(markup, options)](/Documentation/ApiReference/Common/utils/viz/Methods/#exportFromMarkupmarkup_options) method allows you to export SVG content, including [SVG-based DevExtreme components](/Documentation/Guide/Themes_and_Styles/HTML-_and_SVG-Based_Widgets/), to an image or document.
-<!--split-->
  
-The **markup** parameter accepts valid SVG markup (see the `prepareMarkup()` function in the code). To get the markup of a component, call its [svg()](/Documentation/ApiReference/UI_Components/dxChart/Methods/#svg) method. The **options** parameter accepts an object whose fields configure export properties. In this demo, we specify the `width`, `height`, `format`, and `svgToCanvas` fields.  Refer to the [method description](/Documentation/ApiReference/Common/utils/viz/Methods/#exportFromMarkupmarkup_options) for more information on these and other available fields.
\ No newline at end of file
+The **markup** parameter accepts valid SVG markup (see the `prepareMarkup()` function in the code). To get the markup of a component, call its [svg()](/Documentation/ApiReference/UI_Components/dxChart/Methods/#svg) method. The **options** parameter accepts an object whose fields configure export properties. In this demo, we specify the `width`, `height`, `format`, and `svgToCanvas` fields.  Refer to the [method description](/Documentation/ApiReference/Common/utils/viz/Methods/#exportFromMarkupmarkup_options) for more information on these and other available fields.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/ExportSeveralCharts/description.md b/apps/demos/Demos/Charts/ExportSeveralCharts/description.md
index d0c7b4226d39..4beb5d87e853 100644
--- a/apps/demos/Demos/Charts/ExportSeveralCharts/description.md
+++ b/apps/demos/Demos/Charts/ExportSeveralCharts/description.md
@@ -1,5 +1,4 @@
 The **DevExpress.viz.exportWidgets(widgetInstances, options)** method allows you to export several charts to a single image or document. 
-<!--split-->
 
 The **widgetInstances** parameter accepts an array with the following format:
 
@@ -9,6 +8,7 @@ The **widgetInstances** parameter accepts an array with the following format:
         ...
         [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
     ]
+<!--split-->
 
 Each nested array contains component instances that should be in the same row in the exported document. In this demo, `chartInstance` and `pieChartInstance` occupy the only row in the document.
 
diff --git a/apps/demos/Demos/Charts/FlatDataStructure/description.md b/apps/demos/Demos/Charts/FlatDataStructure/description.md
index 39ccea86b5a5..c057437db7b9 100644
--- a/apps/demos/Demos/Charts/FlatDataStructure/description.md
+++ b/apps/demos/Demos/Charts/FlatDataStructure/description.md
@@ -1,9 +1,9 @@
 The TreeMap component visualizes data as a set of rectangles (tiles). The tile size corresponds to a data point value relative to other data points. 
-<!--split-->
 
 The TreeMap component works with collections of objects. If objects in your collection have a plain structure, the component visualizes them as tiles. If your data is hierarchical, the TreeMap displays it as a group of nested tiles.
 
 To bind data to the component, assign the collection of objects to the TreeMap's [dataSource](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#dataSource) property. 
+<!--split-->
 
 Once you assign the data source, specify the [valueField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#valueField) and [labelField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#labelField) properties. If you specify these properties, the component can determine the object fields that indicate TreeMap labels and values in the collection. The default values for these properties are `value` and `name`, respectively. This demo uses default values, so there is no need to explicitly specify value and label fields.
 
@@ -30,5 +30,4 @@ For example, one group of objects in the demo data appears as follows:
 
 This group of objects produces a tile with the **Australia** label. The **Australia** tile has two nested tiles labeled **Sydney** and **Melbourne**.
 
-To make the TreeMap more informative, you can specify a [title](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/title/) and implement a [tooltip](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/tooltip/).
-
+To make the TreeMap more informative, you can specify a [title](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/title/) and implement a [tooltip](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/tooltip/).
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/HierarchicalDataStructure/description.md b/apps/demos/Demos/Charts/HierarchicalDataStructure/description.md
index e1bee5cccc6e..6429b68e855f 100644
--- a/apps/demos/Demos/Charts/HierarchicalDataStructure/description.md
+++ b/apps/demos/Demos/Charts/HierarchicalDataStructure/description.md
@@ -1,9 +1,9 @@
 The TreeMap component visualizes data as a set of rectangles (tiles). The tile size corresponds to a data point value relative to other data points. 
-<!--split-->
 
 The TreeMap component works with collections of objects. If objects in your collection have a plain structure, the component visualizes them as tiles. If your data is hierarchical, the TreeMap displays it as a group of nested tiles.
 
 To bind data to the component, assign the collection of objects to the TreeMap's [dataSource](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#dataSource) property. 
+<!--split-->
 
 Once you assign the data source, specify the [valueField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#valueField) and [labelField](/Documentation/ApiReference/UI_Components/dxTreeMap/Configuration/#labelField) properties. If you specify these properties, the component can determine the object fields that indicate TreeMap labels and values in the collection. The default values for these properties are `value` and `name`, respectively.
 
diff --git a/apps/demos/Demos/Charts/NullPointSupport/description.md b/apps/demos/Demos/Charts/NullPointSupport/description.md
index 37cbe82de62d..e0e327e4bc45 100644
--- a/apps/demos/Demos/Charts/NullPointSupport/description.md
+++ b/apps/demos/Demos/Charts/NullPointSupport/description.md
@@ -1,4 +1,4 @@
 The [Step Area](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/StepArea/) series uses perpendicular vertical and horizontal lines to connect data points and shades the area under these lines. If a point's value is `null`, the series draws a gap.
-<!--split-->
 
 Only `null` point values result in gaps. `undefined` values are ignored. Multiple 0 values may look like a gap, but if [series points](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StepAreaSeries/point/) are visible, you can see them in this gap. If you want to remove gaps caused by `null` values, enable the [ignoreEmptyPoints](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#ignoreEmptyPoints) property.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/PieWithAnnotations/description.md b/apps/demos/Demos/Charts/PieWithAnnotations/description.md
index a6dde8b92d4a..bf758bb611ec 100644
--- a/apps/demos/Demos/Charts/PieWithAnnotations/description.md
+++ b/apps/demos/Demos/Charts/PieWithAnnotations/description.md
@@ -1,10 +1,10 @@
 Annotations are containers for images, text blocks, and custom content. Annotations can help deliver a more refined user-experience and can improve analysis and readability (by displaying additional information for visualized data).
-<!--split-->
 
 To create annotations, populate the PieChart's [annotations](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/) array. Each object in the array configures an individual annotation. To specify settings for all annotations, use the [commonAnnotationSettings](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/commonAnnotationSettings/) object. Individual settings take precedence over common settings.
+<!--split-->
 
 You can set each annotation [type](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/#type) property to *"text"*, *"image"*, or *"custom"*. In this demo, the type used for all annotations is *"image"*.
 
 Annotations can deliver more information if you add tooltips. A [tooltip](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/tooltip/) appears when users hover the mouse pointer over an annotation. This demo illustrates how you can implement a tooltip with custom content via the [tooltipTemplate](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/#tooltipTemplate) property.
 
-For more information on annotation settings, refer to the [annotations[]](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/) help topic.
+For more information on annotation settings, refer to the [annotations[]](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/annotations/) help topic.
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/PiesWithEqualSize/description.md b/apps/demos/Demos/Charts/PiesWithEqualSize/description.md
index 8e9a039cdc32..c936a01a9f0b 100644
--- a/apps/demos/Demos/Charts/PiesWithEqualSize/description.md
+++ b/apps/demos/Demos/Charts/PiesWithEqualSize/description.md
@@ -1,4 +1,4 @@
 To display multiple PieChart components that share [series](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/series/) and [legend](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/legend/) settings, you can declare an object with options and use this object in every PieChart.
-<!--split-->
 
-When you display PieChart components side by side, their pies may differ in size. You can join all charts into a size group to resize these pies to match each other. To do so, set the [sizeGroup](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#sizeGroup) property of every chart to the same value.
\ No newline at end of file
+When you display PieChart components side by side, their pies may differ in size. You can join all charts into a size group to resize these pies to match each other. To do so, set the [sizeGroup](/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#sizeGroup) property of every chart to the same value.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/description.md b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/description.md
index e11884275538..3e568a6c3237 100644
--- a/apps/demos/Demos/Charts/PointsAggregationFinancialChart/description.md
+++ b/apps/demos/Demos/Charts/PointsAggregationFinancialChart/description.md
@@ -1,6 +1,6 @@
 The Chart component can aggregate series points. To enable this feature, set the **aggregation**.[enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/#enabled) property of a [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) to **true**. 
-<!--split-->
 
 In this demo, the Chart is bound to the [RangeSelector](/Documentation/ApiReference/UI_Components/dxRangeSelector/) component. If you set the selection to a wide range, the control will use a higher aggregation degree, and vice versa.
 
 Aggregation on zoom is one of many possible use cases for this feature. For information on how to configure aggregation for other scenarios, refer to the following description: [aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/PolarChartAnnotations/description.md b/apps/demos/Demos/Charts/PolarChartAnnotations/description.md
index f02252bc6a73..f5eb7321dfcf 100644
--- a/apps/demos/Demos/Charts/PolarChartAnnotations/description.md
+++ b/apps/demos/Demos/Charts/PolarChartAnnotations/description.md
@@ -1,9 +1,9 @@
 Annotations are containers for images, text blocks, and custom content that display additional information about the visualized data.
-<!--split-->
 
 To create annotations, populate the PolarChart's [annotations](/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/annotations/) array. Each object in the array configures an individual annotation. To specify settings for all annotations, use the [commonAnnotationSettings](/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/commonAnnotationSettings/) object. Individual settings take precedence over common settings.
 
 You can set each annotation's [type](/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/annotations/#type) property to *"text"*, *"image"*, or *"custom"*. This demo shows only *"text"* annotations.
+<!--split-->
 
 You can place annotations at specific coordinates or anchor them to PolarChart elements. This demo illustrates the following annotation placement methods:  
 
diff --git a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/description.md b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/description.md
index adb32a8565e4..071d7cef9ea2 100644
--- a/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/description.md
+++ b/apps/demos/Demos/Charts/PolarChartZoomingAndScrollingAPI/description.md
@@ -1,6 +1,6 @@
 To zoom a [PolarChart](/Documentation/ApiReference/UI_Components/dxPolarChart/) into a specific range on the value axis, specify the PolarChart's [visualRange](/Documentation/ApiReference/UI_Components/dxPolarChart/Configuration/valueAxis/visualRange/) property.
-<!--split-->
 
 In this demo, this property is bound to the [RangeSelector](/Documentation/ApiReference/UI_Components/dxRangeSelector/)'s value. When you move the sliders in the RangeSelector, you change the **visualRange** and zoom the PolarChart.
 
 Once you set the zoom level, move the selected range left and right to scroll through data.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/RangeBar/description.md b/apps/demos/Demos/Charts/RangeBar/description.md
index 9f0c5e952905..7f1318dd0ded 100644
--- a/apps/demos/Demos/Charts/RangeBar/description.md
+++ b/apps/demos/Demos/Charts/RangeBar/description.md
@@ -1,6 +1,6 @@
 This demo illustrates the range bar [series type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type). 
-<!--split-->
 
 You can use range bars to display value ranges that correspond to specified arguments. Each point in a range bar series has one argument and two values. The [argumentField](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/RangeBarSeries/#argumentField) supplies arguments while the [rangeValue1Field](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/RangeBarSeries/#rangeValue1Field) and [rangeValue2Field](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/RangeBarSeries/#rangeValue2Field) supply bar start and end point values.
+<!--split-->
 
 To create multiple range bar series, use the [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) array to declare each series and the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object to specify the common series type. In this object, you can implement parameters specific to the [range bar series](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/RangeBarSeries/) type. For example, this demo specifies a [minimum bar size](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/RangeBarSeries/#minBarSize) for all series.
diff --git a/apps/demos/Demos/Charts/ScaleBreaks/description.md b/apps/demos/Demos/Charts/ScaleBreaks/description.md
index ec2f391e6843..c77e1ab08a9f 100644
--- a/apps/demos/Demos/Charts/ScaleBreaks/description.md
+++ b/apps/demos/Demos/Charts/ScaleBreaks/description.md
@@ -1,7 +1,7 @@
 Scale breaks (wavy stripes you see on the chart) cut out ranges from the value axis. This technique may enhance chart readability if values differ greatly. As you can see in this demo, you can easily compare smaller values if scale breaks are enabled. If you disable scale breaks, the smaller values are indistinguishable. 
-<!--split-->
 
 The Chart component can generate scale breaks on the [valueAxis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/). The Chart detects large gaps between side-by-side points, cuts them out, and displays scale breaks instead. Scale breaks are available only for *'continuous'* or *'logarithmic'* [axis types](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#type).
+<!--split-->
 
 To enable auto-calculated scale breaks, set the [autoBreaksEnabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#autoBreaksEnabled) property to `true`. Use the [maxAutoBreakCount](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#maxAutoBreakCount) property to limit the number of automatically created scale breaks. To configure scale break appearance, use the [breakStyle](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/breakStyle/) object. You can test all these options in the demo.
 
diff --git a/apps/demos/Demos/Charts/SeriesTemplates/description.md b/apps/demos/Demos/Charts/SeriesTemplates/description.md
index 6477c2b538e5..c0e3e7395e89 100644
--- a/apps/demos/Demos/Charts/SeriesTemplates/description.md
+++ b/apps/demos/Demos/Charts/SeriesTemplates/description.md
@@ -1,5 +1,4 @@
 In certain scenarios, you may need to add more series to the data source after you created the Chart. 
-<!--split-->
 
 In this case, arrange your data source structure as follows:
 
@@ -13,6 +12,7 @@ In this case, arrange your data source structure as follows:
     ]
 
 Every object in the data source should correspond to a point in a single series.
+<!--split-->
 
 This demo uses the structure displayed above to organize data:
 
diff --git a/apps/demos/Demos/Charts/ServerSideDataProcessing/description.md b/apps/demos/Demos/Charts/ServerSideDataProcessing/description.md
index 68fe5db32440..eecaf81a5d6f 100644
--- a/apps/demos/Demos/Charts/ServerSideDataProcessing/description.md
+++ b/apps/demos/Demos/Charts/ServerSideDataProcessing/description.md
@@ -1,7 +1,7 @@
 In many cases, you need to process data on the server before a chart displays it. The Chart component supports this scenario. 
-<!--split-->
 
 In this demo, the data source of the Chart loads weather data for a selected month from an OData service. Each time you select a different month in the drop-down menu, the data source sends a new query to the service. To implement this functionality, assign a [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) object to the Chart's [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource) property. 
+<!--split-->
 
 In the [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/), implement the [ODataStore](/Documentation/ApiReference/Data_Layer/ODataStore/). An OData service can include multiple entity collections related to each other, but the [ODataStore](/Documentation/ApiReference/Data_Layer/ODataStore/) specifies only one collection. To load multiple collections at once, set the [expand](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#expand) property to an array with the additional collection titles. Then, call the [postProcess](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#postProcess) function to process additional data.
 
diff --git a/apps/demos/Demos/Charts/SignalRService/description.md b/apps/demos/Demos/Charts/SignalRService/description.md
index 4c85d3780af5..10157d927841 100644
--- a/apps/demos/Demos/Charts/SignalRService/description.md
+++ b/apps/demos/Demos/Charts/SignalRService/description.md
@@ -1,7 +1,7 @@
 This example demonstrates a real-time data update in a financial [candlestick](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Candlestick/) chart bound to a [SignalR](https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-6.0) server. Note that data used in this demo is for demonstration purposes only.
-<!--split-->
 
 To integrate the Chart with a [SignalR](https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-6.0) server, specify a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/). Use the [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/)'s [push(changes)](/Documentation/ApiReference/Data_Layer/CustomStore/Methods/#pushchanges) method to insert, update, and remove data objects. This method accepts an array and allows you to update data in batches.
+<!--split-->
 
 To display updated data in real time, use the [aggregation](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/) configuration object. In this object, set the [enabled](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/#enabled) property to **true**, the [method](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/#method) property to `custom`, and then implement the [calculate](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/#calculate) function to process the incoming data. In this demo, the [calculate](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/aggregation/#calculate) function aggregates data into a one point for each interval.
 
diff --git a/apps/demos/Demos/Charts/StepArea/description.md b/apps/demos/Demos/Charts/StepArea/description.md
index f703e12a2797..e79a63692f5f 100644
--- a/apps/demos/Demos/Charts/StepArea/description.md
+++ b/apps/demos/Demos/Charts/StepArea/description.md
@@ -1,4 +1,4 @@
 This demo shows a step area [series type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type). The primary difference between area and step area is that in step area series, data points are connected by perpendicular vertical and horizontal lines.
-<!--split-->
 
-To create multiple area series, use the [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) array to declare each series and the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object to specify the common series type. In that object you can implement specific parameters to configure [step area](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StepAreaSeries/) specifically. For example, this demo disables a [border](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StepAreaSeries/border/) for all series.
\ No newline at end of file
+To create multiple area series, use the [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) array to declare each series and the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object to specify the common series type. In that object you can implement specific parameters to configure [step area](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StepAreaSeries/) specifically. For example, this demo disables a [border](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StepAreaSeries/border/) for all series.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Charts/Stock/description.md b/apps/demos/Demos/Charts/Stock/description.md
index 198f6b2c3036..c4d6d9706a27 100644
--- a/apps/demos/Demos/Charts/Stock/description.md
+++ b/apps/demos/Demos/Charts/Stock/description.md
@@ -1,7 +1,7 @@
 A stock [series type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type) displays variations in stock prices over the course of a day. You can specify the stock series type for each object in the [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) or specify the type in the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/) object for all series in the Chart. Use the [commonSeriesSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonSeriesSettings/).[stock](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/StockSeries/) object to configure properties of the Chart stock series.
-<!--split-->
 
 In stock series, the bottom and top values of a vertical line correspond to high and low prices. Use the [highValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#highValueField) and [lowValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#lowValueField) properties to specify data source fields for high and low prices.
+<!--split-->
 
 Open and close prices are displayed as left and right tick marks. To specify these prices, use the [openValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#openValueField) and [closeValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#closeValueField) properties.
 
diff --git a/apps/demos/Demos/Charts/Strips/description.md b/apps/demos/Demos/Charts/Strips/description.md
index 9cd6cd75ddf0..04102fe0c236 100644
--- a/apps/demos/Demos/Charts/Strips/description.md
+++ b/apps/demos/Demos/Charts/Strips/description.md
@@ -1,8 +1,8 @@
 DevExtreme Chart can display background strips to better highlight a range of values.
-<!--split-->
 
 To configure strips, declare an array of objects in the **argumentAxis**.[strips[]](Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/strips/) or **valueAxis**.[strips[]](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/strips/) property. Each object in this array configures an individual strip. The [startValue](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/strips/#startValue) and [endValue](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/strips/#endValue) properties define the highlighted range. 
 
 This demo shows two value axis strips. The code configures [label](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/strips/label/) [text](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/strips/label/#text) and **font**.[color](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/strips/label/font/#color) properties for each strip.
+<!--split-->
 
 You can specify the same appearance for all strips on a specific axis or in the Chart. To specify the same appearance, declare the [stripStyle](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/stripStyle/) object in the [valueAxis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/), [argumentAxis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/), or [commonAxisSettings](/Documentation/ApiReference/UI_Components/dxChart/Configuration/commonAxisSettings/) object. Individual settings override common settings. In this example, we used the **stripStyle** object to specify the font [weight](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/stripStyle/label/font/#weight) and [size](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/stripStyle/label/font/#size) for all strip labels on the value axis. 
diff --git a/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue b/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
index 61450b9fbe02..d1731f7cf374 100644
--- a/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
+++ b/apps/demos/Demos/Common/NavigationOverview/Vue/App.vue
@@ -42,10 +42,10 @@
         v-model:selected-index="tabPanelIndex"
         :data-source="citiesData"
         :animation-enabled="true"
-        item-title-template="title"
+        item-title-template="itemTitle"
         item-template="cityTemplate"
       >
-        <template #title="{ data: item }">
+        <template #itemTitle="{ data: item }">
           <span class="tab-panel-title">{{ item.text }}</span>
         </template>
         <template #cityTemplate="{ data: city }">
diff --git a/apps/demos/Demos/ContextMenu/Scrolling/description.md b/apps/demos/Demos/ContextMenu/Scrolling/description.md
index d1fdbcf9f0a2..108b6caed9c2 100644
--- a/apps/demos/Demos/ContextMenu/Scrolling/description.md
+++ b/apps/demos/Demos/ContextMenu/Scrolling/description.md
@@ -1,8 +1,8 @@
 The DevExtreme ContextMenu component supports submenu item scrolling. If combined item height exceeds screen size, a scrollbar appears on-screen.
-<!--split-->
 
 To restrict submenu height, use the following CSS notation:
 
     .dx-context-menu .dx-menu-items-container {
         max-height: 200px;
     }
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/Appearance/description.md b/apps/demos/Demos/DataGrid/Appearance/description.md
index 95885fe3c3b7..3f862081a517 100644
--- a/apps/demos/Demos/DataGrid/Appearance/description.md
+++ b/apps/demos/Demos/DataGrid/Appearance/description.md
@@ -1,5 +1,4 @@
-This example demonstrates the following properties.
-<!--split-->
+This example demonstrates the following properties:
 
 * [showBorders](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#showBorders)      
 Specifies whether the outer borders of the DataGrid are visible.
@@ -14,3 +13,4 @@ Specifies whether horizontal lines that separate rows are visible.
 Specifies whether rows should be in alternate colors.
 
 To toggle these properties, select the corresponding checkbox under the DataGrid.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/BatchEditing/description.md b/apps/demos/Demos/DataGrid/BatchEditing/description.md
index 091095a6110e..05557ef200e7 100644
--- a/apps/demos/Demos/DataGrid/BatchEditing/description.md
+++ b/apps/demos/Demos/DataGrid/BatchEditing/description.md
@@ -1,9 +1,9 @@
 You can use batch edit mode to defer saving multiple cell changes. Changes are stored in a buffer and can be discarded before a user clicks the **Save** button.
-<!--split-->
 
 To enable batch edit mode, configure the following properties:
 
 * Set **editing**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#mode) to *"batch"*.
 * Assign **true**  to the [editing](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#mode) object's [allowUpdating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowUpdating), [allowAdding](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowAdding), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowDeleting) properties.
+<!--split-->
 
-The [startEditAction](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#startEditAction) property specifies whether cells enter the editing state on a single or double click. Cell edit also selects the cells' text because the [selectTextOnEditStart](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#selectTextOnEditStart) property is set to **true**. You can use the controls below the DataGrid to change these properties at runtime.
+The [startEditAction](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#startEditAction) property specifies whether cells enter the editing state on a single or double click. Cell edit also selects the cells' text because the [selectTextOnEditStart](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#selectTextOnEditStart) property is set to **true**. You can use the controls below the DataGrid to change these properties at runtime.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/CRUDOperations/description.md b/apps/demos/Demos/DataGrid/CRUDOperations/description.md
index 7e0b31688dd1..7d50b8d26177 100644
--- a/apps/demos/Demos/DataGrid/CRUDOperations/description.md
+++ b/apps/demos/Demos/DataGrid/CRUDOperations/description.md
@@ -1,4 +1,4 @@
-This demo shows how to&nbsp;implement remote CRUD operations in&nbsp;the **CustomStore**. You can view the server implementation under the *DataGridWebApiController* tab in&nbsp;the ASP.NET MVC version of&nbsp;this demo. The requests sent to&nbsp;the server are displayed under the DataGrid.
-<!--split-->
+This demo shows how to implement remote CRUD operations in the **CustomStore**. You can view the server implementation under the *DataGridWebApiController* tab in the ASP.NET MVC version of this demo. The requests sent to the server are displayed under the DataGrid.
  
-After a&nbsp;cell is&nbsp;edited, the DataGrid can behave differently depending on&nbsp;the selected refresh mode: reload data from the server (the [refreshMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#refreshMode) is&nbsp;full), reapply data processing operations (reshape), or&nbsp;merely rerender the changed cells (repaint).
\ No newline at end of file
+After a cell is edited, the DataGrid can behave differently depending on the selected refresh mode: reload data from the server (the [refreshMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#refreshMode) is full), reapply data processing operations (reshape), or merely rerender the changed cells (repaint).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/CellEditingAndEditingAPI/description.md b/apps/demos/Demos/DataGrid/CellEditingAndEditingAPI/description.md
index 53e6f2271fa1..05387b800203 100644
--- a/apps/demos/Demos/DataGrid/CellEditingAndEditingAPI/description.md
+++ b/apps/demos/Demos/DataGrid/CellEditingAndEditingAPI/description.md
@@ -1,8 +1,8 @@
 Users can modify DataGrid data cell by cell. In this mode, only one cell can be in the edit state at a time. DataGrid saves changes immediately after the focus leaves cell.
-<!--split-->
 
 To enable the cell mode, do the following:
 - Set the **editing**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#mode) to *"cell*".
 - Assign **true** to the [editing](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/) object's [allowUpdating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowUpdating), [allowAdding](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowAdding), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowDeleting) properties.
 
-This demo also shows how to delete selected records. Review the [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged) and `deleteRecords` functions for implementation details.
\ No newline at end of file
+This demo also shows how to delete selected records. Review the [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged) and `deleteRecords` functions for implementation details.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/description.md b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/description.md
index 76376bf00de5..0c2f28c695c9 100644
--- a/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/description.md
+++ b/apps/demos/Demos/DataGrid/CustomizeKeyboardNavigation/description.md
@@ -1,5 +1,4 @@
-The following properties customize keyboard navigation.
-<!--split-->
+The following properties customize keyboard navigation:
  
 - [enterKeyAction](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/keyboardNavigation/#enterKeyAction)    
 Specifies the DataGrid's actions when a user presses Enter key: 
@@ -17,3 +16,4 @@ Specifies the direction in which to move focus when a user presses Enter:
 Specifies whether to start entering a new cell value on a key press.
 
 In this demo, you can use the controls under the DataGrid to change any of these properties.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/DeferredSelection/description.md b/apps/demos/Demos/DataGrid/DeferredSelection/description.md
index 6abc0e620062..a51ee1213cd3 100644
--- a/apps/demos/Demos/DataGrid/DeferredSelection/description.md
+++ b/apps/demos/Demos/DataGrid/DeferredSelection/description.md
@@ -1,10 +1,10 @@
 If you enable deferred row selection, the grid does not request selected rows' data with every selection change. For example, if a user clicks the checkbox in the column header to select all the rows, the grid does not immediately fetch all data from the server. 
-<!--split-->
 
 This is helpful in the following cases:
 
 - You process data on the server and do not want to load the selected rows' data.
 - You do process selected records on the client, but want to reduce the number of requests that are sent.
+<!--split-->
 
 This demo illustrates the second scenario. Deferred selection is enabled and the selected rows are only requested when you click the button below the grid.
 
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/React/description.md b/apps/demos/Demos/DataGrid/EditStateManagement/React/description.md
index da82ac7073ba..f8ce44c8624c 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/React/description.md
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/React/description.md
@@ -1,4 +1,5 @@
 Our DataGrid component manages its edit state automatically. If your use case requires full control over the editing process, you can use the API members below to manage state manually. In this demo, we manage state with a help of the <a href="https://react.dev/reference/react/useReducer" target="_blank">useReducer</a> React hook.
+<!--split-->
 
 **Component Properties**
 
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/description.md b/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/description.md
index da82ac7073ba..f8ce44c8624c 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/description.md
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/ReactJs/description.md
@@ -1,4 +1,5 @@
 Our DataGrid component manages its edit state automatically. If your use case requires full control over the editing process, you can use the API members below to manage state manually. In this demo, we manage state with a help of the <a href="https://react.dev/reference/react/useReducer" target="_blank">useReducer</a> React hook.
+<!--split-->
 
 **Component Properties**
 
diff --git a/apps/demos/Demos/DataGrid/EditStateManagement/Vue/description.md b/apps/demos/Demos/DataGrid/EditStateManagement/Vue/description.md
index 4537d3f5f0bb..c116a185d6d4 100644
--- a/apps/demos/Demos/DataGrid/EditStateManagement/Vue/description.md
+++ b/apps/demos/Demos/DataGrid/EditStateManagement/Vue/description.md
@@ -1,4 +1,5 @@
 Our DataGrid component manages its edit state automatically. If your use case requires full control over the editing process, you can use the API members below to manage state manually. In this demo, we manage state with a help of the <a href="https://vuex.vuejs.org/" target="_blank">Vuex</a> library.
+<!--split-->
 
 **Component Properties**
 
diff --git a/apps/demos/Demos/DataGrid/ExcelJSCellCustomization/description.md b/apps/demos/Demos/DataGrid/ExcelJSCellCustomization/description.md
index d1ac926cc118..71c63d17d842 100644
--- a/apps/demos/Demos/DataGrid/ExcelJSCellCustomization/description.md
+++ b/apps/demos/Demos/DataGrid/ExcelJSCellCustomization/description.md
@@ -1,5 +1,4 @@
 The [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/#customizeCell) function allows you to modify cell data and value formatting in exported worksheets.
-<!--split-->
 
 You can access and change the following attributes:
 
@@ -9,4 +8,5 @@ You can access and change the following attributes:
 - Text <a href="https://github.com/exceljs/exceljs#alignment" target="_blank">alignment</a>        
 - <a href="https://github.com/exceljs/exceljs#number-formats" target="_blank">Formatting</a> properties    
 
-The [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/#customizeCell) function also allows you to identify row types. For example, this demo changes the background color and font weight for cells with the "group" [rowType](/Documentation/ApiReference/UI_Components/dxDataGrid/Row/#rowType).
\ No newline at end of file
+The [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/#customizeCell) function also allows you to identify row types. For example, this demo changes the background color and font weight for cells with the "group" [rowType](/Documentation/ApiReference/UI_Components/dxDataGrid/Row/#rowType).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/ExcelJSExportImages/description.md b/apps/demos/Demos/DataGrid/ExcelJSExportImages/description.md
index 718b8641fc3e..bf74d99b549d 100644
--- a/apps/demos/Demos/DataGrid/ExcelJSExportImages/description.md
+++ b/apps/demos/Demos/DataGrid/ExcelJSExportImages/description.md
@@ -1,4 +1,4 @@
 This demo shows how you can use <a href="https://github.com/exceljs/exceljs" target="_blank">ExcelJS</a> API to export images to Excel [worksheets](https://github.com/exceljs/exceljs#add-a-worksheet).
-<!--split-->
 
-See the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/#customizeCell) callback for implementation details. The **workbook**.<a href="https://github.com/exceljs/exceljs#add-image-to-workbook" target="_blank">addImage()</a> method specifies image data and encoding. **tl** and **br** parameters are used to specify image location and span.
\ No newline at end of file
+See the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/#customizeCell) callback for implementation details. The **workbook**.<a href="https://github.com/exceljs/exceljs#add-image-to-workbook" target="_blank">addImage()</a> method specifies image data and encoding. **tl** and **br** parameters are used to specify image location and span.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/description.md b/apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/description.md
index 6a45a1eec7f4..b5ef612c0ba5 100644
--- a/apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/description.md
+++ b/apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/description.md
@@ -1,6 +1,6 @@
 The [exportDataGrid()](/Documentation/ApiReference/Common/Utils/excelExporter/#exportDataGridoptions) method allows users to export multiple grids to one Excel document. Grids are exported consequently in a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then" target="_blank">chain of Promises</a>. 
-<!--split-->
 
 In this demo, this functionality is used to export two DataGrids into separate <a href="https://github.com/exceljs/exceljs#add-a-worksheet" target="_blank">worksheets</a> in the same <a href="https://github.com/exceljs/exceljs#create-a-workbook" target="_blank">workbook</a>. Starting position of each exported grid is set using the [topLeftCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/topLeftCell/) property.
 
-Use the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/#customizeCell) method to customize the exported worksheets.
\ No newline at end of file
+Use the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExportDataGridProps/#customizeCell) method to customize the exported worksheets.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/description.md b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/description.md
index eb5cf0ff60db..6857c676f918 100644
--- a/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/description.md
+++ b/apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/description.md
@@ -1,5 +1,4 @@
 <a href="https://github.com/exceljs/exceljs" target="_blank">ExcelJS</a> library allows you to customize worksheets outside the exported cell area. This demo uses this functionality to add a header (a title before exported data) and a footer (a note after exported data).
-<!--split-->
 
 Review the [onExporting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onExporting) handler to see the data export code. The functions that create header and footer sections utilize the following customization features:
 
@@ -7,3 +6,4 @@ Review the [onExporting](/Documentation/ApiReference/UI_Components/dxDataGrid/Co
 - <a href="https://github.com/exceljs/exceljs#value-types" target="_blank">Cell values</a> formatting
 - <a href="https://github.com/exceljs/exceljs#fonts" target="_blank">Font properties</a>
 - Text <a href="https://github.com/exceljs/exceljs#alignment" target="_blank">alignment</a>
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/ExcelJSOverview/description.md b/apps/demos/Demos/DataGrid/ExcelJSOverview/description.md
index 809d32380cec..b95a10f7dc81 100644
--- a/apps/demos/Demos/DataGrid/ExcelJSOverview/description.md
+++ b/apps/demos/Demos/DataGrid/ExcelJSOverview/description.md
@@ -1,11 +1,11 @@
 To enable export in the DataGrid, reference or import the <a href="https://github.com/exceljs/exceljs" target="_blank">ExcelJS</a> and <a href="https://github.com/eligrey/FileSaver.js/" target="_blank">FileSaver</a> libraries. Set **export**.[enabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/#enabled) to **true**. 
-<!--split-->
 
 Once the conditions above are met, use the [exportDataGrid(options)](/Documentation/ApiReference/Common/Utils/excelExporter/#exportDataGridoptions) method to export the DataGrid to an Excel <a href="https://github.com/exceljs/exceljs#create-a-workbook" target="_blank">workbook</a>. 
 
 Review the [onExporting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onExporting) handler to see the data export code. DataGrid is exported as is to a single <a href="https://github.com/exceljs/exceljs#add-a-worksheet" target="_blank">worksheet</a>. You can also set [allowExportSelectedData](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/#allowExportSelectedData) to **true** to export only selected rows.
 
 You can export DataGrid to CSV. Call the **exportDataGrid(options)** method as shown in the following ticket: <a href="https://supportcenter.devexpress.com/ticket/details/t920593/pivotgrid-exceljs-export-to-export-pivotgrid-into-csv-file" target="_blank">Export PivotGrid into CSV file</a>.
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/DataGrid/FilterPanel/description.md b/apps/demos/Demos/DataGrid/FilterPanel/description.md
index 42ee8ef4d3e2..2865f248f546 100644
--- a/apps/demos/Demos/DataGrid/FilterPanel/description.md
+++ b/apps/demos/Demos/DataGrid/FilterPanel/description.md
@@ -1,8 +1,8 @@
 The [Filter panel](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/filterPanel/) is a UI element that displays the combined filter. This filter is stored in the [filterValue](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#filterValue) property and consists of filters that users apply in other UI elements ([filter row](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/filterRow/), [header filter](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/headerFilter/), [filterBuilder](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#filterBuilder)).
-<!--split-->
 
 To display the filter panel, set the **filterPanel**.[visible](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/filterPanel/#visible) property to **true**. 
 
 A click on the combined filter calls the integrated filter builder. You can configure it in the [filterBuilder](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#filterBuilder) object. In this demo, this object is used to add the `weekends` [custom filter operation](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/customOperations).
+<!--split-->
 
-The intergrated filter builder is displayed in a pop-up window (the DevExtreme [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) component). Its default configuration is defined automatically, but you can change it in the [filterBuilderPopup](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#filterBuilderPopup) object. In this example, this object is used to specify the [position](/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#position) of the pop-up window.
+The intergrated filter builder is displayed in a pop-up window (the DevExtreme [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) component). Its default configuration is defined automatically, but you can change it in the [filterBuilderPopup](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#filterBuilderPopup) object. In this example, this object is used to specify the [position](/Documentation/ApiReference/UI_Components/dxPopup/Configuration/#position) of the pop-up window.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/FocusedRow/description.md b/apps/demos/Demos/DataGrid/FocusedRow/description.md
index f3f9cd746dee..d39fe26bc01a 100644
--- a/apps/demos/Demos/DataGrid/FocusedRow/description.md
+++ b/apps/demos/Demos/DataGrid/FocusedRow/description.md
@@ -1,8 +1,8 @@
 The DataGrid component can highlight the focused row. To enable this feature, set the [focusedRowEnabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#focusedRowEnabled) property to **true**.
-<!--split-->
 
 To focus a row programmatically, specify the [focusedRowKey](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#focusedRowKey) property. The DataGrid automatically scrolls to the focused row if the [autoNavigateToFocusedRow](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#autoNavigateToFocusedRow) property is enabled. In the UI, users can click a row to focus it. The focused row is saved in the DataGrid's [state](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/stateStoring/).
 
 You can use the [onFocusedRowChanging](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onFocusedRowChanging) or [onFocusedRowChanged](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onFocusedRowChanged) property to specify a custom function that is executed before or after a row is focused.
+<!--split-->
 
 In this demo, the row with the `117` key is focused initially. You can specify the `focusedRowKey` and `autoNavigateToFocusedRow` properties via the input field and the checkbox below the DataGrid.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/FormEditing/description.md b/apps/demos/Demos/DataGrid/FormEditing/description.md
index 76e29165f806..044d82c36a7b 100644
--- a/apps/demos/Demos/DataGrid/FormEditing/description.md
+++ b/apps/demos/Demos/DataGrid/FormEditing/description.md
@@ -1,9 +1,9 @@
 The DataGrid can use the [Form](/Documentation/ApiReference/UI_Components/dxForm/) component to arrange cell editors when users modify a row. The Form allows users to edit values from [visible and hidden](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visible) columns (see the `Notes` column).
-<!--split-->
 
 To enable form edit mode, configure the following properties:
 - Set **editing**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#mode) to *"form"*
 - Assign **true** to the [editing](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/) object's [allowAdding](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowAdding), [allowUpdating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowUpdating), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowDeleting) properties.
+<!--split-->
 
 A column's default editor is defined automatically based on this column's [dataType](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataType). To customize this editor or replace it with another editor, use the column's [formItem](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#formItem) object. This demo shows how to replace the default editor in the `Notes` column with a [TextArea](/Documentation/ApiReference/UI_Components/dxTextArea/). Refer to the [SimpleItem](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/) help topic for information on all settings that you can define in the **formItem** object. If you need more information about editor customization in DataGrid Form, review the following topic: [Customize Edit Form](/Documentation/Guide/UI_Components/DataGrid/Editing/#Customize_Edit_Form).
 
diff --git a/apps/demos/Demos/DataGrid/GridAdaptabilityOverview/description.md b/apps/demos/Demos/DataGrid/GridAdaptabilityOverview/description.md
index 54468c05da63..1189a968dd68 100644
--- a/apps/demos/Demos/DataGrid/GridAdaptabilityOverview/description.md
+++ b/apps/demos/Demos/DataGrid/GridAdaptabilityOverview/description.md
@@ -1,4 +1,4 @@
 DataGrid automatically adapts its layout to screens with different sizes. In this demo, you can switch between horizontal and vertical screen orientations. If columns do not fit the selected orientation, the DataGrid hides them one by one, starting with the rightmost column. Information from the hidden columns is still available in adaptive detail rows.
-<!--split-->
 
 To enable this feature, set the [columnHidingEnabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#columnHidingEnabled) property to **true**.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/GridColumnsHidingPriority/description.md b/apps/demos/Demos/DataGrid/GridColumnsHidingPriority/description.md
index fd88b49201c0..04644e4d7451 100644
--- a/apps/demos/Demos/DataGrid/GridColumnsHidingPriority/description.md
+++ b/apps/demos/Demos/DataGrid/GridColumnsHidingPriority/description.md
@@ -1,4 +1,4 @@
 When the DataGrid adapts its layout to smaller screens, it hides columns based on the [hidingPriority](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#hidingPriority). Columns with lower values are hidden first. 
-<!--split-->
 
 In this demo, the `CustomerStoreCity` column is hidden in vertical and horizontal orientation modes because its **hidingPriority** is 0. The `CustomerStoreState` and `OrderDate` columns have a priority of 1 and 2. The DataGrid hides these columns after the `CustomerStoreCity` column, only when the screen orientation is vertical.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/InfiniteScrolling/description.md b/apps/demos/Demos/DataGrid/InfiniteScrolling/description.md
index fb6e2900f548..5e96e69ac13b 100644
--- a/apps/demos/Demos/DataGrid/InfiniteScrolling/description.md
+++ b/apps/demos/Demos/DataGrid/InfiniteScrolling/description.md
@@ -1,6 +1,6 @@
 If the DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset.
-<!--split-->
 
 To enable infinite scroll mode, set the **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) to *"infinite"*.
 
 In this demo, the DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/description.md b/apps/demos/Demos/DataGrid/KeyboardNavigation/description.md
index db6c1ff56bc6..f2068e57cfb6 100644
--- a/apps/demos/Demos/DataGrid/KeyboardNavigation/description.md
+++ b/apps/demos/Demos/DataGrid/KeyboardNavigation/description.md
@@ -1,5 +1,4 @@
-In this demo, you can use the following keys and key combinations to interact with the DataGrid.
-<!--split-->
+In this demo, you can use the following keys and key combinations to interact with the DataGrid:
 
 - **Enter**             
 Execute an action on a focused element.
@@ -9,3 +8,4 @@ Navigate within DataGrid elements.
 
 - **Ctrl** + **&uarr;** or **Ctrl** + **&darr;**            
 Navigate between a column header, filter row, data area, filter panel, and pager.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/LocalReordering/description.md b/apps/demos/Demos/DataGrid/LocalReordering/description.md
index 4ee187144da6..ec1a4bb7fdbf 100644
--- a/apps/demos/Demos/DataGrid/LocalReordering/description.md
+++ b/apps/demos/Demos/DataGrid/LocalReordering/description.md
@@ -1,6 +1,6 @@
 The DataGrid allows users to drag and drop rows. Use the icon to the left of the row as the drag handle.
-<!--split-->
 
 To enable this feature, set the [allowReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#allowReordering) property to **true** and change the row index in the [onReorder](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/#onReorder) function.
 
-Use the [rowDragging](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/) object to configure the row drag and drop feature.
\ No newline at end of file
+Use the [rowDragging](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/rowDragging/) object to configure the row drag and drop feature.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/MultiRowHeadersBands/description.md b/apps/demos/Demos/DataGrid/MultiRowHeadersBands/description.md
index e0134d70b885..999c8fb0e1fe 100644
--- a/apps/demos/Demos/DataGrid/MultiRowHeadersBands/description.md
+++ b/apps/demos/Demos/DataGrid/MultiRowHeadersBands/description.md
@@ -1,7 +1,7 @@
 Our DataGrid component allows you to group multiple columns under one header (band). This demo shows an example: the "Nominal GDP" and "Population" bands have banded columns.
-<!--split-->
 
 You can drag one of the bands across the grid to reorder all its banded columns simultaneously. You can also move the band to the column chooser and hide the banded columns. Banded columns remain interactive.
+<!--split-->
 
 To create the banded layout, do one of the following:
 
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/description.md b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/description.md
index 06144f004a84..a89bd1ebc164 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/description.md
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/description.md
@@ -1,5 +1,4 @@
-DataGrid has the following API for multiple record selection.
-<!--split-->
+DataGrid has the following API for multiple record selection:
 
 * [selectAll()](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#selectAll) / [deselectAll()](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#deselectAll)       
 Selects / deselects all rows or current page rows, depending on the value of [selectAllMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#selectAllMode).
@@ -15,5 +14,6 @@ Clears the selection of all rows on all pages.
 
 * [getSelectedRowKeys()](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getSelectedRowKeys) / [getSelectedRowsData()](/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#getSelectedRowsData)       
 Gets the selected rows' keys or data objects.
+<!--split-->
 
 In this demo, **selectAll()** or **selectRows(keys, preserve)** is called when you change the SelectBox value and **clearSelection()** is called when you click the Clear Selection button.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/description.md b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/description.md
index 396ce036b91f..975109b54704 100644
--- a/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/description.md
+++ b/apps/demos/Demos/DataGrid/MultipleRecordSelectionModes/description.md
@@ -1,8 +1,8 @@
 This demo sets **selection**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode) to *"multiple"*. This allows users to select multiple rows using checkboxes or keyboard shortcuts.
-<!--split-->
 
 To configure when the checkboxes appear, set the [showCheckBoxesMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#showCheckBoxesMode) property.
 
 The checkbox in the header selects all rows or current page rows, depending on the [selectAllMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#selectAllMode) value. If you want to disable this checkbox, set [allowSelectAll](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#allowSelectAll) to **false**.
 
-In this demo, you can use the drop-down menus under the grid to change the **showCheckBoxesMode** and **selectAllMode** values.
\ No newline at end of file
+In this demo, you can use the drop-down menus under the grid to change the **showCheckBoxesMode** and **selectAllMode** values.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/OdataService/description.md b/apps/demos/Demos/DataGrid/OdataService/description.md
index 2c5556a44117..1331ddb47119 100644
--- a/apps/demos/Demos/DataGrid/OdataService/description.md
+++ b/apps/demos/Demos/DataGrid/OdataService/description.md
@@ -1,7 +1,7 @@
 To fetch data from an OData service, implement an [ODataStore](/Documentation/ApiReference/Data_Layer/ODataStore/). Use its properties to specify the service's [url](/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#url), [key](/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#key) data field, and OData [version](/Documentation/ApiReference/Data_Layer/ODataStore/Configuration/#version) if it is different from 2.
-<!--split-->
  
 You can configure **ODataStore** as a standalone element (see [OData](/Documentation/Guide/Data_Binding/Specify_a_Data_Source/OData/) for details), but this demo assigns **ODataStore** settings to the [store](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/store/) field of the [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) configuration object. If you follow the same pattern in your application, make sure to set the **store**'s [type](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/store/#type) property to *"odata"*.
+<!--split-->
  
 The **DataSource** configuration object allows you to sort, filter, group, and otherwise shape the store's data objects. This demo [filters](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#filter) data and [selects](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#select) a limited number of fields. 
 
diff --git a/apps/demos/Demos/DataGrid/Overview/Angular/description.md b/apps/demos/Demos/DataGrid/Overview/Angular/description.md
index 25a790166097..71036ee8fbb2 100644
--- a/apps/demos/Demos/DataGrid/Overview/Angular/description.md
+++ b/apps/demos/Demos/DataGrid/Overview/Angular/description.md
@@ -1,6 +1,6 @@
 DevExtreme Angular Data Grid is a responsive grid control with a vast assortment of capabilities, including data editing and validation, searching and filtering, layout customization. It supports native Angular features too: AOT compilation, declarative configuration, TypeScript compile-time checking, and more.
-<!--split-->
 
 To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with DataGrid](/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/).
 
-For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
\ No newline at end of file
+For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/Overview/React/description.md b/apps/demos/Demos/DataGrid/Overview/React/description.md
index 24848be4ddb1..1cbc91b3ec3e 100644
--- a/apps/demos/Demos/DataGrid/Overview/React/description.md
+++ b/apps/demos/Demos/DataGrid/Overview/React/description.md
@@ -1,6 +1,6 @@
 DevExtreme React DataGrid is a feature-rich grid control. Its main features include robust data layer, fast data processing, client-side data validation, and many more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
 To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with DataGrid](/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/).
 
-For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
\ No newline at end of file
+For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/Overview/ReactJs/description.md b/apps/demos/Demos/DataGrid/Overview/ReactJs/description.md
index 24848be4ddb1..1cbc91b3ec3e 100644
--- a/apps/demos/Demos/DataGrid/Overview/ReactJs/description.md
+++ b/apps/demos/Demos/DataGrid/Overview/ReactJs/description.md
@@ -1,6 +1,6 @@
 DevExtreme React DataGrid is a feature-rich grid control. Its main features include robust data layer, fast data processing, client-side data validation, and many more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
 To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with DataGrid](/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/).
 
-For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
\ No newline at end of file
+For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/Overview/Vue/description.md b/apps/demos/Demos/DataGrid/Overview/Vue/description.md
index 8b1121c43aa4..6040f24ee7dc 100644
--- a/apps/demos/Demos/DataGrid/Overview/Vue/description.md
+++ b/apps/demos/Demos/DataGrid/Overview/Vue/description.md
@@ -1,6 +1,6 @@
 DevExtreme Vue Data Grid is&nbsp;a&nbsp;a client-side grid component that includes all the features needed for use in a modern business application: powerful data binding, editing, and validation capabilities, versatile searching and filtering, flexible layout, and many more. You can use Vue syntax and techniques to&nbsp;instantiate and configure the Data Grid or&nbsp;handle its events. In&nbsp;addition, the Data Grid supports [prop validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation) and templates that use [named slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots). [Find out more about DevExtreme Vue components](/Documentation/Guide/Vue_Components/DevExtreme_Vue_Components/).
-<!--split-->
 
 To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with DataGrid](/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/).
 
-For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
\ No newline at end of file
+For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/Overview/jQuery/description.md b/apps/demos/Demos/DataGrid/Overview/jQuery/description.md
index e5aff9362f42..e1df0b8a7425 100644
--- a/apps/demos/Demos/DataGrid/Overview/jQuery/description.md
+++ b/apps/demos/Demos/DataGrid/Overview/jQuery/description.md
@@ -1,6 +1,6 @@
 DevExtreme JavaScript DataGrid is a client-side grid control available as a jQuery component. This control supports binding to data from local arrays, JSON files, Web API and OData services, as well as custom remote services. Check out other demos in this section to explore more DataGrid features, like data editing and validation, paging, scrolling, etc.
-<!--split-->
 
 To get started with the DevExtreme DataGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with DataGrid](/Documentation/Guide/UI_Components/DataGrid/Getting_Started_with_DataGrid/).
 
-For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
\ No newline at end of file
+For a complete overview of DataGrid options, check the [DataGrid API Reference](/Documentation/ApiReference/UI_Components/dxDataGrid/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/PDFCellCustomization/description.md b/apps/demos/Demos/DataGrid/PDFCellCustomization/description.md
index 4a7b6075ee2b..9a8613b8ebf5 100644
--- a/apps/demos/Demos/DataGrid/PDFCellCustomization/description.md
+++ b/apps/demos/Demos/DataGrid/PDFCellCustomization/description.md
@@ -1,5 +1,4 @@
 DataGrid allows you to modify cell style settings and custom paint cells in a PDF document.
-<!--split-->
 
 Use the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customizeCell) function to customize the appearance settings of DataGrid cells in a PDF document. For example, you can change the text alignment and the background color of cells. The following function parameters are available:
 
@@ -7,6 +6,7 @@ Use the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/Pdf
 Contains information about the source DataGrid cell.
 - **pdfCell**     
 Contains settings applied to a cell in a PDF document.
+<!--split-->
 
 In this demo, the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customizeCell) function changes the following elements:
 - Background color and font weight of group row cells 
@@ -25,4 +25,4 @@ Contains settings applied to a cell in a PDF document.
 - **cancel**   
 Set this parameter to **true** to prevent default painting logic.
 
-This demo uses the [customDrawCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customDrawCell) function to paint cells in the "Website" column.
+This demo uses the [customDrawCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customDrawCell) function to paint cells in the "Website" column.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/PDFExportImages/description.md b/apps/demos/Demos/DataGrid/PDFExportImages/description.md
index c1c79e75cb2f..d9637ef066e1 100644
--- a/apps/demos/Demos/DataGrid/PDFExportImages/description.md
+++ b/apps/demos/Demos/DataGrid/PDFExportImages/description.md
@@ -1,4 +1,4 @@
 This demo shows how to configure the DataGrid to export data with images to a PDF document.
-<!--split-->
 
-Use the [customDrawCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customDrawCell) function to redraw the content of the cell. Inside this function, implement the **jsPDF**.<a href="https://raw.githack.com/parallax/jsPDF/master/docs/module-addImage.html#~addImage" target="_blank">addImage()</a> method that specifies image data. Specify the [onRowExporting](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#onRowExporting) function to change the height of the rows to fit the images.
\ No newline at end of file
+Use the [customDrawCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customDrawCell) function to redraw the content of the cell. Inside this function, implement the **jsPDF**.<a href="https://raw.githack.com/parallax/jsPDF/master/docs/module-addImage.html#~addImage" target="_blank">addImage()</a> method that specifies image data. Specify the [onRowExporting](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#onRowExporting) function to change the height of the rows to fit the images.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/PDFExportMultipleGrids/description.md b/apps/demos/Demos/DataGrid/PDFExportMultipleGrids/description.md
index aa3a13fa028a..846aa0045ac7 100644
--- a/apps/demos/Demos/DataGrid/PDFExportMultipleGrids/description.md
+++ b/apps/demos/Demos/DataGrid/PDFExportMultipleGrids/description.md
@@ -1,6 +1,6 @@
 This demo shows two DataGrids in different tabs. Click the **Export multiple grids** button to export two grids and arrange them on different pages of the PDF document. 
-<!--split-->
 
 To implement this functionality, call the [exportDataGrid(options)](/Documentation/ApiReference/Common/Utils/pdfExporter/#exportDataGridoptions) methods in a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then" target="_blank">chain of Promises</a>, one after another. Use the **jsPDF**.<a href="https://raw.githack.com/parallax/jsPDF/master/docs/jsPDF.html#addPage" target="_blank">addPage()</a> method to add a page in the PDF document.
 
-You can use the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customizeCell) function to customize cell appearance in the PDF document. In this demo, the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customizeCell) function highlights alternate (even) rows.
\ No newline at end of file
+You can use the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customizeCell) function to customize cell appearance in the PDF document. In this demo, the [customizeCell](/Documentation/ApiReference/Common/Object_Structures/PdfExportDataGridProps/#customizeCell) function highlights alternate (even) rows.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/PDFOverview/description.md b/apps/demos/Demos/DataGrid/PDFOverview/description.md
index 3ff3f44cc48e..a85bc149c7b1 100644
--- a/apps/demos/Demos/DataGrid/PDFOverview/description.md
+++ b/apps/demos/Demos/DataGrid/PDFOverview/description.md
@@ -1,5 +1,4 @@
 The [DataGrid](/Documentation/ApiReference/UI_Components/dxDataGrid/) allows you to export its contents to a PDF document. 
-<!--split-->
 
 To enable PDF export operations, import the <a href="https://github.com/parallax/jsPDF" target="_blank">jsPDF</a> library and set the **export**.[enabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/#enabled) property to **true**.
 
@@ -12,6 +11,7 @@ Specifies the <a href="https://github.com/parallax/jsPDF" target="_blank">jsPDF<
 Specifies the DataGrid's instance.
 
 To review implementation details, see the [exportDataGrid(options)](/Documentation/ApiReference/Common/Utils/pdfExporter/#exportDataGridoptions) method call in [onExporting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onExporting) handler. You can also set [allowExportSelectedData](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/#allowExportSelectedData) to **true** to export only selected rows.
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/DataGrid/PopupEditing/description.md b/apps/demos/Demos/DataGrid/PopupEditing/description.md
index f86ca16de35b..bf7ebe4aa5ca 100644
--- a/apps/demos/Demos/DataGrid/PopupEditing/description.md
+++ b/apps/demos/Demos/DataGrid/PopupEditing/description.md
@@ -1,8 +1,8 @@
 DataGrid can display a popup edit form. The form can include any fields from the bound data source, regardless of whether the corresponding column is visible in the grid (see the `Notes` and `Address` columns).
-<!--split-->
 
 To enable this behavior in your application, do the following:
 - Set **editing**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#mode) to *"popup"*.
 - Set the [editing](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/) object's [allowUpdating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowUpdating), [allowAdding](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowAdding), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowDeleting) properties to **true**.
+<!--split-->
 
 DataGrid uses the DevExtreme [Form](/Documentation/ApiReference/UI_Components/dxForm/) and [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) components to display the form and the popup. Their default configurations are defined automatically. If these configurations do not meet your requirements, you can redefine them in the **editing** object's [form](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#form) and [popup](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#popup) properties as shown in this demo. For more information about this edit mode's limitations, refer to the descriptions of these properties.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/RecordGrouping/description.md b/apps/demos/Demos/DataGrid/RecordGrouping/description.md
index 08833fc9d5c1..64bc1dca87a8 100644
--- a/apps/demos/Demos/DataGrid/RecordGrouping/description.md
+++ b/apps/demos/Demos/DataGrid/RecordGrouping/description.md
@@ -1,10 +1,10 @@
 The DataGrid allows users to group data against a single column or multiple columns.
-<!--split-->
 
 To group data, users can drag and drop column headers onto and from the area above the grid. This area is called the [groupPanel](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/groupPanel/). Set its **visible** property to **true** to show it. 
 
 Users can reorder headers within the **groupPanel** to change group hierarchy. To enable this functionality, set the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering) property to *"true"*. 
+<!--split-->
 
 To group data against a single **column**, apply the [groupIndex](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#groupIndex) property to it. This property accepts a zero-based index number that controls the column order. In this example, the data is grouped against the *State* column.
 
-You can also use the [grouping](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/) object to specify user interaction settings related to grouping. This demo illustrates the [autoExpandAll](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/#autoExpandAll) property that specifies whether the groups appear expanded.
+You can also use the [grouping](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/) object to specify user interaction settings related to grouping. This demo illustrates the [autoExpandAll](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/#autoExpandAll) property that specifies whether the groups appear expanded.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/RemoteGrouping/description.md b/apps/demos/Demos/DataGrid/RemoteGrouping/description.md
index 39c79f47f18b..6fee2a94a9b0 100644
--- a/apps/demos/Demos/DataGrid/RemoteGrouping/description.md
+++ b/apps/demos/Demos/DataGrid/RemoteGrouping/description.md
@@ -1,7 +1,7 @@
 Remote (server-side) operations can boost the DataGrid's performance on large datasets. In this demo, the DataGrid works with a million records seamlessly because they are processed on the server.
-<!--split-->
 
 To notify the DataGrid that it works with a pre-processed dataset, set the [remoteOperations](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/remoteOperations/) property to **true**.
+<!--split-->
 
 You can also specify properties that allow the DataGrid to load data on demand to reduce the amount of transmitted data. Set the **grouping**.[autoExpandAll](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/grouping/#autoExpandAll) property to **false** to collapse all the groups at startup. Data for each group is loaded only when the user expands the group. Enable the *"virtual"* **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) to load only those records that come into the viewport when the grid is scrolled vertically.
 
diff --git a/apps/demos/Demos/DataGrid/RemoteReordering/description.md b/apps/demos/Demos/DataGrid/RemoteReordering/description.md
index fae188b83951..53c31ecc02b5 100644
--- a/apps/demos/Demos/DataGrid/RemoteReordering/description.md
+++ b/apps/demos/Demos/DataGrid/RemoteReordering/description.md
@@ -1,7 +1,7 @@
 This demo shows how to use drag and drop to reorder records stored on the server. This functionality requires that records' order indexes are in an individual data field (`OrderIndex` in this demo) and sorted against that field.
-<!--split-->
 
 Row drag and drop is configured in the [rowDragging][5] object. Set [allowReordering][2] to **true** to enable this feature. To specify the highlight mode of the row's drop position, use the [dropFeedbackMode][6] property. In this demo, it is set to *"push"*: rows move up or down with animation to create space for the new position of the row.
+<!--split-->
 
 When a row is dropped, the [onReorder][0] event handler is called. Use it to update the record's `OrderIndex` on the server. In this demo, we use the **onReorder** function's `toIndex` parameter to obtain the position at which a user dropped the row. The position is then used to get the new order index. The store's [update][1] method sends this index to the server where the records are sorted and returned to the client. Server-side implementation is available in the [ASP.NET Core][3] and [ASP.NET MVC 5][4] versions of this demo under the `DataGridRowReorderingController.cs` tab.
 
diff --git a/apps/demos/Demos/DataGrid/RightToLeftSupport/description.md b/apps/demos/Demos/DataGrid/RightToLeftSupport/description.md
index 02d321008ed5..0dbafbd14e17 100644
--- a/apps/demos/Demos/DataGrid/RightToLeftSupport/description.md
+++ b/apps/demos/Demos/DataGrid/RightToLeftSupport/description.md
@@ -1,4 +1,4 @@
 DevExtreme supports right-to-left layouts. To change a layout to RTL, set the DataGrid's [rtlEnabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#rtlEnabled) property to **true**. You can also set **rtlEnabled** to **true** in the project's [globalConfig](/Documentation/ApiReference/Common/Object_Structures/globalConfig/) to apply RTL to all DevExtreme components in your application.
-<!--split-->
 
 In this demo, you can use the drop-down menu to switch between the different layouts. Note that this demo updates the [dataField](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField) and [caption](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#caption) properties to display translated content when you change the **rtlEnabled** value.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/RowEditingAndEditingEvents/description.md b/apps/demos/Demos/DataGrid/RowEditingAndEditingEvents/description.md
index ad46b621e421..20500687fcdf 100644
--- a/apps/demos/Demos/DataGrid/RowEditingAndEditingEvents/description.md
+++ b/apps/demos/Demos/DataGrid/RowEditingAndEditingEvents/description.md
@@ -1,7 +1,7 @@
 The DataGrid allows users to edit data in multiple modes. This demo shows the *"row"* edit mode. To start editing any row, click *"Edit"* in it. Only one row can be in the edit state at a time.
-<!--split-->
 
 To enable row edit mode, set the [mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#mode) property to "row" and assign true to the editing object's [allowUpdating](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowUpdating), [allowAdding](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowAdding), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/editing/#allowDeleting) properties.
+<!--split-->
 
 Edit operations raise events that you can handle with the following functions:    
 - [onEditingStart](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onEditingStart)
diff --git a/apps/demos/Demos/DataGrid/RowSelection/description.md b/apps/demos/Demos/DataGrid/RowSelection/description.md
index 3fbbf1021ced..48475633f45a 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/description.md
+++ b/apps/demos/Demos/DataGrid/RowSelection/description.md
@@ -1,4 +1,4 @@
 In this demo, the DataGrid allows users to select only one row at a time. To enable this mode, set the **selection**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/selection/#mode) property to *"single"*. Press Ctrl to unselect a row.
-<!--split-->
 
-You can access the selected row data from the [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged) function. In this demo, this function fetches the selected row's information and displays it under the grid.
\ No newline at end of file
+You can access the selected row data from the [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onSelectionChanged) function. In this demo, this function fetches the selected row's information and displays it under the grid.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/SignalRService/description.md b/apps/demos/Demos/DataGrid/SignalRService/description.md
index 3c762eb7ad9f..d37bb12c5f5a 100644
--- a/apps/demos/Demos/DataGrid/SignalRService/description.md
+++ b/apps/demos/Demos/DataGrid/SignalRService/description.md
@@ -1,9 +1,9 @@
 This example demonstrates real-time data update in a **DataGrid** bound to a <a href="https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction" target="_blank">SignalR</a> service. Access to the service is configured in a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/).
-<!--split-->
  
 The **CustomStore** fetches the remote dataset at launch and keeps its local copy. Whenever the remote dataset changes, the server calls a client-side function that updates the local copy of the dataset (`updateStockPrices` in this demo). This function uses the store's [push(changes)](/Documentation/ApiReference/Data_Layer/CustomStore/Methods/#pushchanges) method.
 
 For server-side configuration, refer to the [ASP.NET MVC version of this demo](https://demos.devexpress.com/ASPNetMvc/Demo/DataGrid/SignalRService).
+<!--split-->
 
 For more information about integration with push services, refer to the following help topic: [Integration with Push Services](/Documentation/Guide/Data_Binding/Data_Layer/#Data_Modification/Integration_with_Push_Services).
  
diff --git a/apps/demos/Demos/DataGrid/SimpleArray/description.md b/apps/demos/Demos/DataGrid/SimpleArray/description.md
index 0c4c825cc410..6d5c041bde61 100644
--- a/apps/demos/Demos/DataGrid/SimpleArray/description.md
+++ b/apps/demos/Demos/DataGrid/SimpleArray/description.md
@@ -1,4 +1,4 @@
 You can use the DataGrid component to display and edit data from an array of objects. Use the [dataSource](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#dataSource) and [keyExpr](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#keyExpr) properties to specify the bound array and its key field. For more information, refer to the following help topic: [Local Array](/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Local_Array/).
-<!--split-->
 
-Use the [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) property to specify a list of data fields you want to display within the DataGrid as columns. If the **columns** property is not specified, the component creates columns for all data fields available in objects from the bound array.
\ No newline at end of file
+Use the [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) property to specify a list of data fields you want to display within the DataGrid as columns. If the **columns** property is not specified, the component creates columns for all data fields available in objects from the bound array.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/VirtualScrolling/description.md b/apps/demos/Demos/DataGrid/VirtualScrolling/description.md
index 21d18aee996e..c7874382953a 100644
--- a/apps/demos/Demos/DataGrid/VirtualScrolling/description.md
+++ b/apps/demos/Demos/DataGrid/VirtualScrolling/description.md
@@ -1,6 +1,6 @@
 If the DataGrid component is bound to a large dataset, you can enable the virtual scroll feature to optimize data load times and improve user navigation. The component calculates the overall number of visible rows and displays a scrollbar that allows users to navigate to any section of rows. When users release the scroll thumb, the control loads records to be displayed in the viewport and removes other rows from memory. 
-<!--split-->
 
 To allow users to scroll the DataGrid virtually, set the **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) to *"virtual"*.
+<!--split-->
 
-In this demo, the DataGrid is bound to a local dataset of 100,000 records. You can drag the scrollbar on the right to see that records within the viewport are updated immediately.
+In this demo, the DataGrid is bound to a local dataset of 100,000 records. You can drag the scrollbar on the right to see that records within the viewport are updated immediately.
\ No newline at end of file
diff --git a/apps/demos/Demos/DataGrid/WebAPIService/description.md b/apps/demos/Demos/DataGrid/WebAPIService/description.md
index e9e35b3c05ac..1117be2e7cfb 100644
--- a/apps/demos/Demos/DataGrid/WebAPIService/description.md
+++ b/apps/demos/Demos/DataGrid/WebAPIService/description.md
@@ -1,7 +1,7 @@
 To access a Web API service from the client, use the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/client-side-with-jquery.md#api-reference" target="_blank">createStore</a> method which is part of the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data#devextreme-aspnet-data" target="_blank">DevExtreme.AspNet.Data</a> extension. This extension also allows you to process data for DevExtreme components <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/server-side-configuration.md" target="_blank">on the server</a>. The server-side implementation is available under the `DataGridWebApiController.cs` tab in the [ASP.NET MVC version of this demo](https://demos.devexpress.com/ASPNetMvc/Demo/DataGrid/WebAPIService).
-<!--split-->
  
 To notify the DataGrid that data is processed on the server, set the [remoteOperations](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/remoteOperations/) property to **true**.
+<!--split-->
 
 ### A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
 
diff --git a/apps/demos/Demos/Diagram/Adaptability/description.md b/apps/demos/Demos/Diagram/Adaptability/description.md
index 36f07fa905d2..b878044ffa83 100644
--- a/apps/demos/Demos/Diagram/Adaptability/description.md
+++ b/apps/demos/Demos/Diagram/Adaptability/description.md
@@ -1,5 +1,4 @@
 The Diagram can adapt its layout to narrow screens. In this demo, the component's **Height** property is set to 100% to fit a screen.
-<!--split-->
 
 Note the following changes to the toolbox and properties panel:
 
@@ -8,4 +7,5 @@ Note the following changes to the toolbox and properties panel:
 * A tool slides out of the screen when a user drags a shape from the toolbox or edits an item's text.
 * Only one tool can be displayed at a time.
 
-You can switch between landscape and portrait layouts to see the Diagram's appearance and behavior on wide and narrow screens.
\ No newline at end of file
+You can switch between landscape and portrait layouts to see the Diagram's appearance and behavior on wide and narrow screens.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/AdvancedDataBinding/description.md b/apps/demos/Demos/Diagram/AdvancedDataBinding/description.md
index 0cd78e7c4b03..fb4c1d7fc4a7 100644
--- a/apps/demos/Demos/Diagram/AdvancedDataBinding/description.md
+++ b/apps/demos/Demos/Diagram/AdvancedDataBinding/description.md
@@ -1,5 +1,6 @@
 The Diagram component accepts functions as expression property values.  It allows you to implement custom logic when you bind a diagram to a data source.
-<!--split-->
+
 In this demo, the [nodes](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/) and [edges](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/edges/) collections are bound to a data source. Custom functions are used to get different shape types and font styles for items based on additional data source information.
 
-The [autoLayout](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/) property specifies an auto-layout algorithm type and orientation that the component uses to build diagrams.
\ No newline at end of file
+The [autoLayout](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/autoLayout/) property specifies an auto-layout algorithm type and orientation that the component uses to build diagrams.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/Containers/description.md b/apps/demos/Demos/Diagram/Containers/description.md
index 53e63831c8f7..862bceddc416 100644
--- a/apps/demos/Demos/Diagram/Containers/description.md
+++ b/apps/demos/Demos/Diagram/Containers/description.md
@@ -1,5 +1,4 @@
 This demo shows the Diagram component's capability to wrap shapes into containers. A container is a special shape with the following features:
-<!--split-->
 
 * A container can contain other shapes (including other containers).
 * A container is dragged with its content.
@@ -7,4 +6,5 @@ This demo shows the Diagram component's capability to wrap shapes into container
 
 To wrap a shape, drop it into a container.
 
-If you bind the Diagram to a data source, define the [containerKeyExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#containerKeyExpr) property to store information about the parent container in the data source. Otherwise, this information will be lost. 
\ No newline at end of file
+If you bind the Diagram to a data source, define the [containerKeyExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#containerKeyExpr) property to store information about the parent container in the data source. Otherwise, this information will be lost. 
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithIcons/description.md b/apps/demos/Demos/Diagram/CustomShapesWithIcons/description.md
index 463f31b06f25..d4328ac00a70 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithIcons/description.md
+++ b/apps/demos/Demos/Diagram/CustomShapesWithIcons/description.md
@@ -1,6 +1,6 @@
 The Diagram component provides a collection of built-in shapes. You can extend this collection with custom shapes.
-<!--split-->
 
 An array of custom shape objects is accessible through the [customShapes](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/) property. For each custom shape object, you can specify the type, background image, default size, text, connection points, and other settings. Note that shape images should be supplied as SVG files.
 
-This demo shows how to populate the shape collection with custom shape types, and how to use custom shapes in the Diagram.
\ No newline at end of file
+This demo shows how to populate the shape collection with custom shape types, and how to use custom shapes in the Diagram.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/description.md b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/description.md
index 9cabc71f38e8..2ea03bc77b3a 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplates/description.md
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplates/description.md
@@ -1,9 +1,9 @@
 The Diagram component provides the following properties to create custom shape templates.
-<!--split-->
 
 * The [customShapeTemplate](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#customShapeTemplate) property defines a common template for all shapes in the component.
 * The [template](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/#template) property defines a template for an individual shape. 
 
 Template content must be presented as SVG elements. 
 
-In this demo, the [customShapeTemplate](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#customShapeTemplate) property adds the 'Show Details' link to a shape. When clicked, it displays a popup window that contains additional information about an employee.
\ No newline at end of file
+In this demo, the [customShapeTemplate](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#customShapeTemplate) property adds the 'Show Details' link to a shape. When clicked, it displays a popup window that contains additional information about an employee.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/description.md b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/description.md
index 08c315ff009d..77623ef4a31a 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/description.md
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/description.md
@@ -1,7 +1,7 @@
 In this demo, the [customShapeTemplate](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#customShapeTemplate) property defines a common shape template and adds the **Edit** and **Delete** links to a shape. These links allow users to modify and remove employee data from the data source. The Diagram component reloads modified diagram data whenever the data source changes.
-<!--split-->
 
 The [onRequestLayoutUpdate](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onRequestLayoutUpdate) function specifies whether the component must reapply its auto layout once the diagram is reloaded.
+<!--split-->
 
 The [customDataExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#customDataExpr) property links custom employee information from the data source to diagram nodes. Changes made to data are reflected in the diagram's history. Undo and redo actions (available within the control's UI) allow users to rollback/reapply changes.
 
diff --git a/apps/demos/Demos/Diagram/CustomShapesWithTexts/description.md b/apps/demos/Demos/Diagram/CustomShapesWithTexts/description.md
index 01b1470c6bc7..95ca3e76bc44 100644
--- a/apps/demos/Demos/Diagram/CustomShapesWithTexts/description.md
+++ b/apps/demos/Demos/Diagram/CustomShapesWithTexts/description.md
@@ -1,6 +1,6 @@
 The Diagram component allows you to bind a [customShapes](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/customShapes/) collection to a data source. In this demo, the collection is bound to an array of employee objects. The Diagram creates a shape for every employee data item in the data source and adds the shapes to the "employees" category.  
-<!--split-->
 
 The [toolbox](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/toolbox/) property allows you to add custom categories to a data toolbox. 
 
-Users can drag data items from the toolbox and drop them onto a canvas to create a diagram. 
\ No newline at end of file
+Users can drag data items from the toolbox and drop them onto a canvas to create a diagram. 
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/ImagesInShapes/description.md b/apps/demos/Demos/Diagram/ImagesInShapes/description.md
index d062a2d1877c..f7b5c77a961a 100644
--- a/apps/demos/Demos/Diagram/ImagesInShapes/description.md
+++ b/apps/demos/Demos/Diagram/ImagesInShapes/description.md
@@ -1,4 +1,4 @@
 The Diagram component provides shapes with images that are specially designed for use in OrgCharts. You can select a shape with the following image positions: on the left, right, or top of the shape. 
-<!--split-->
 
-In this demo, the Diagram is bound to a data source. The [imageUrlExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#imageUrlExpr) property specifies the name of a field that provides a path to images.
\ No newline at end of file
+In this demo, the Diagram is bound to a data source. The [imageUrlExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#imageUrlExpr) property specifies the name of a field that provides a path to images.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/ItemSelection/description.md b/apps/demos/Demos/Diagram/ItemSelection/description.md
index 1330a7f5e28c..8110fcc1bd8c 100644
--- a/apps/demos/Demos/Diagram/ItemSelection/description.md
+++ b/apps/demos/Demos/Diagram/ItemSelection/description.md
@@ -1,5 +1,4 @@
 The [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onSelectionChanged) function is executed after the selection is changed and allows you to access information about the selected items. In this demo, the function fetches selected shape information and displays it under the Diagram component.
-<!--split-->
 
 The [onContentReady](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onContentReady) function is handled to find the 'Greta Sims' shape, select it, and scroll to it. For this purpose, the following methods are called:
 
@@ -7,3 +6,4 @@ The [onContentReady](/Documentation/ApiReference/UI_Components/dxDiagram/Configu
 * [setSelectedItems](/Documentation/ApiReference/UI_Components/dxDiagram/Methods/#setSelectedItemsitems) selects the specified items.
 * [scrollToItem](/Documentation/ApiReference/UI_Components/dxDiagram/Methods/#scrollToItemitem) scrolls the view area to the specified item.
 * [focus](/Documentation/ApiReference/UI_Components/dxDiagram/Methods/#focus) focuses the Diagram.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/NodesArrayHierarchicalStructure/description.md b/apps/demos/Demos/Diagram/NodesArrayHierarchicalStructure/description.md
index f2c722c5c922..1ee4c60d729e 100644
--- a/apps/demos/Demos/Diagram/NodesArrayHierarchicalStructure/description.md
+++ b/apps/demos/Demos/Diagram/NodesArrayHierarchicalStructure/description.md
@@ -1,4 +1,4 @@
 This demo shows the Diagram's ability to load an external tree structure from a hierarchical object. 
-<!--split-->
 
-The component binds to a data object specified by the [dataSource](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#dataSource) property. You should set the [itemsExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#itemsExpr) property to the name of the field that provides data for nested items due to the data's hierarchical structure.
\ No newline at end of file
+The component binds to a data object specified by the [dataSource](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#dataSource) property. You should set the [itemsExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#itemsExpr) property to the name of the field that provides data for nested items due to the data's hierarchical structure.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/NodesArrayPlainStructure/description.md b/apps/demos/Demos/Diagram/NodesArrayPlainStructure/description.md
index 0ebc91b18c62..e84b6eb52336 100644
--- a/apps/demos/Demos/Diagram/NodesArrayPlainStructure/description.md
+++ b/apps/demos/Demos/Diagram/NodesArrayPlainStructure/description.md
@@ -1,4 +1,4 @@
 This demo shows the Diagram component's capability to load an external tree structure from a linear array.
-<!--split-->
 
-The component binds to a data object specified by the [dataSource](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#dataSource) property. You should specify the [keyExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#keyExpr) and [parentKeyExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#parentKeyExpr) properties because of the data's linear structure. The Diagram uses information from the key fields to transform linear data into a tree.
\ No newline at end of file
+The component binds to a data object specified by the [dataSource](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#dataSource) property. You should specify the [keyExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#keyExpr) and [parentKeyExpr](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/nodes/#parentKeyExpr) properties because of the data's linear structure. The Diagram uses information from the key fields to transform linear data into a tree.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/OperationRestrictions/description.md b/apps/demos/Demos/Diagram/OperationRestrictions/description.md
index f4dbefdfa9bb..a1e6cbc0977b 100644
--- a/apps/demos/Demos/Diagram/OperationRestrictions/description.md
+++ b/apps/demos/Demos/Diagram/OperationRestrictions/description.md
@@ -1,4 +1,4 @@
 Our Diagram component allows you to restrict edit operations as needed. To prohibit a specific operation, set its corresponding property within the [editing](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/editing/) property to **false**.
-<!--split-->
 
 In this demo, the [onRequestEditOperation](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#onRequestEditOperation) function implements complex logic to determine whether an operation is allowed. The **reason** event parameter indicates whether the event is raised by a user action or via a UI update. If a user tries to perform a prohibited action, an error message is displayed.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/ReadOnly/description.md b/apps/demos/Demos/Diagram/ReadOnly/description.md
index 34ddf6692a9c..c876e89b8f51 100644
--- a/apps/demos/Demos/Diagram/ReadOnly/description.md
+++ b/apps/demos/Demos/Diagram/ReadOnly/description.md
@@ -1,4 +1,4 @@
 The Diagram component can operate in Read Only mode. In this mode, users are not permitted to edit a diagram; therefore, most of the UI elements are disabled. It is for this reason that the Toolbox and Properties panel in this demo are hidden.
-<!--split-->
 
-To switch the Diagram to Read Only mode, set the [readOnly](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#readOnly) property to true.
\ No newline at end of file
+To switch the Diagram to Read Only mode, set the [readOnly](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#readOnly) property to true.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/SimpleView/description.md b/apps/demos/Demos/Diagram/SimpleView/description.md
index d331e8122bb4..599d3cbf76a8 100644
--- a/apps/demos/Demos/Diagram/SimpleView/description.md
+++ b/apps/demos/Demos/Diagram/SimpleView/description.md
@@ -1,4 +1,4 @@
 This demo shows the Diagram component in Simple View mode. In this mode, the control does not divide the work area into pages and the diagram's content occupies all the available area inside the component. 
-<!--split-->
 
-To enable Simple View mode, set the [simpleView](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#simpleView) property to true.
\ No newline at end of file
+To enable Simple View mode, set the [simpleView](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/#simpleView) property to true.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Diagram/UICustomization/description.md b/apps/demos/Demos/Diagram/UICustomization/description.md
index 2105b4015e57..e0ba0aadf516 100644
--- a/apps/demos/Demos/Diagram/UICustomization/description.md
+++ b/apps/demos/Demos/Diagram/UICustomization/description.md
@@ -1,5 +1,4 @@
 The following properties allow you to customize the Diagram component's UI elements:
-<!--split-->
 
 * [contextMenu](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/contextMenu/)
 * [contextToolbox](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/contextToolbox/)
@@ -7,4 +6,5 @@ The following properties allow you to customize the Diagram component's UI eleme
 * [historyToolbar](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/historyToolbar/)
 * [viewToolbar](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/viewToolbar/)
 * [mainToolbar](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/mainToolbar/)
-* [toolbox](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/toolbox/)
\ No newline at end of file
+* [toolbox](/Documentation/ApiReference/UI_Components/dxDiagram/Configuration/toolbox/)
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Drawer/LeftOrRightPosition/description.md b/apps/demos/Demos/Drawer/LeftOrRightPosition/description.md
index a390cc1837c3..a085d881f1fc 100644
--- a/apps/demos/Demos/Drawer/LeftOrRightPosition/description.md
+++ b/apps/demos/Demos/Drawer/LeftOrRightPosition/description.md
@@ -1,5 +1,4 @@
 Drawer is a dismissible or permanently visible panel that usually contains navigation elements. 
-<!--split-->
 
 To open or close the Drawer component in this demo, click the 'Hamburger' button. Each Drawer visibility change can adjust the layout in the following ways (see [openedStateMode](/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#openedStateMode)): 
 
@@ -11,6 +10,7 @@ The view shrinks to accommodate the Drawer.
 
 - "*overlap*"    
 The Drawer overlaps the view.
+<!--split-->
 
 Use the radio buttons at the bottom of this demo module to try different layout modes. You can also change the Drawer's [position](/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#position) and [revealMode](/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#revealMode) properties.
 
diff --git a/apps/demos/Demos/Drawer/TopOrBottomPosition/description.md b/apps/demos/Demos/Drawer/TopOrBottomPosition/description.md
index a390cc1837c3..a085d881f1fc 100644
--- a/apps/demos/Demos/Drawer/TopOrBottomPosition/description.md
+++ b/apps/demos/Demos/Drawer/TopOrBottomPosition/description.md
@@ -1,5 +1,4 @@
 Drawer is a dismissible or permanently visible panel that usually contains navigation elements. 
-<!--split-->
 
 To open or close the Drawer component in this demo, click the 'Hamburger' button. Each Drawer visibility change can adjust the layout in the following ways (see [openedStateMode](/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#openedStateMode)): 
 
@@ -11,6 +10,7 @@ The view shrinks to accommodate the Drawer.
 
 - "*overlap*"    
 The Drawer overlaps the view.
+<!--split-->
 
 Use the radio buttons at the bottom of this demo module to try different layout modes. You can also change the Drawer's [position](/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#position) and [revealMode](/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#revealMode) properties.
 
diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/Angular/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/Angular/description.md
index 411f1dab4440..351ec986b248 100644
--- a/apps/demos/Demos/DropDownBox/SingleSelection/Angular/description.md
+++ b/apps/demos/Demos/DropDownBox/SingleSelection/Angular/description.md
@@ -1,4 +1,8 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
 <!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:
diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/React/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/React/description.md
index add75e5cf71d..351ec986b248 100644
--- a/apps/demos/Demos/DropDownBox/SingleSelection/React/description.md
+++ b/apps/demos/Demos/DropDownBox/SingleSelection/React/description.md
@@ -1,4 +1,9 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
+<!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:
 
diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/ReactJs/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/ReactJs/description.md
index add75e5cf71d..351ec986b248 100644
--- a/apps/demos/Demos/DropDownBox/SingleSelection/ReactJs/description.md
+++ b/apps/demos/Demos/DropDownBox/SingleSelection/ReactJs/description.md
@@ -1,4 +1,9 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
+<!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:
 
diff --git a/apps/demos/Demos/DropDownBox/SingleSelection/Vue/description.md b/apps/demos/Demos/DropDownBox/SingleSelection/Vue/description.md
index 5f3afd92b8d8..6ead6e8718a1 100644
--- a/apps/demos/Demos/DropDownBox/SingleSelection/Vue/description.md
+++ b/apps/demos/Demos/DropDownBox/SingleSelection/Vue/description.md
@@ -1,4 +1,9 @@
-The DropDownBox component is an editor that consists of a text field and drop-down content. In this demo, the content is the TreeView and the DataGrid in the single selection mode. 
+DropDownBox is an advanced editor whose drop-down window can include other components.
+
+DevExtreme ships with multiple other drop-down editors. To find out which editor best suits your task, review the following article: [How to Choose a Drop-Down Editor](/Documentation/Guide/UI_Components/Lookup/Choose_a_Drop-Down_Editor/).
+
+To get started with the DevExtreme DropDownBox component, refer to the following step-by-step tutorial: [Getting Started with DropDownBox](/Documentation/Guide/UI_Components/DropDownBox/Getting_Started_with_DropDownBox/).
+<!--split-->
 
 The following instructions show how to synchronize the DropDownBox with any other embedded DevExtreme component:
 
diff --git a/apps/demos/Demos/FileManager/Overview/description.md b/apps/demos/Demos/FileManager/Overview/description.md
index a00b45a554a2..dde945a18871 100644
--- a/apps/demos/Demos/FileManager/Overview/description.md
+++ b/apps/demos/Demos/FileManager/Overview/description.md
@@ -1,7 +1,7 @@
 The DevExtreme JavaScript FileManager component allows you to display and manage files and directories for different file systems. The FileManager uses file system providers to access file systems.
-<!--split-->
 
 Use the [fileSystemProvider](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/#fileSystemProvider) property to configure the component's file system provider. The ["File System Types"](/Demos/WidgetsGallery/Demo/FileManager/BindingToFileSystem/NetCore/Light) demo group illustrates how to use the FileManager with different file system providers.
+<!--split-->
 
 The component's default security settings provide read-only access to files and directories. Use the [permissions](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/permissions) property to deny or allow a user to copy, create, move, delete, rename, upload, and download files and directories. You can also specify file restrictions: allowed file extensions ([allowedFileExtensions](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/#allowedFileExtensions)), chunk size ([chunkSize](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/upload/#chunkSize)) and maximum file size ([maxFileSize](/Documentation/ApiReference/UI_Components/dxFileManager/Configuration/upload/#maxFileSize)).
 
diff --git a/apps/demos/Demos/FileUploader/CustomDropzone/description.md b/apps/demos/Demos/FileUploader/CustomDropzone/description.md
index 9b3a94c28f45..35124a93f51c 100644
--- a/apps/demos/Demos/FileUploader/CustomDropzone/description.md
+++ b/apps/demos/Demos/FileUploader/CustomDropzone/description.md
@@ -1,7 +1,7 @@
 The FileUploader component supports the drag-and-drop functionality to upload files.
-<!--split-->
 
 In this demo, the [dropZone](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#dropZone) property specifies the HTML element in which you can drag and drop files for upload. The [dropZoneEnter](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#onDropZoneEnter) and [dropZoneLeave](/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#onDropZoneLeave) events allow you to customize the drop zone when the mouse pointer enters and leaves this zone while dragging the file.
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/FilterBuilder/Customization/description.md b/apps/demos/Demos/FilterBuilder/Customization/description.md
index 3f0254d9c55e..79477c7d3041 100644
--- a/apps/demos/Demos/FilterBuilder/Customization/description.md
+++ b/apps/demos/Demos/FilterBuilder/Customization/description.md
@@ -1,5 +1,5 @@
-In&nbsp;this demo, a&nbsp;custom filter operation, *"anyof"*, is&nbsp;implemented. The [calculateFilterExpression](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/customOperations/#calculateFilterExpression) function converts it&nbsp;into **DataSource**-compatible operations. The compatible and incompatible filter expressions are displayed under the FilterBuilder.
-<!--split-->
+In this demo, a custom filter operation, *"anyof"*, is implemented. The [calculateFilterExpression](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/customOperations/#calculateFilterExpression) function converts it into **DataSource**-compatible operations. The compatible and incompatible filter expressions are displayed under the FilterBuilder.
 
-The set of&nbsp;available group operations is&nbsp;limited to&nbsp;*"and"* and *"or"* using the [groupOperations](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/#groupOperations) array, and the groups&rsquo; maximum nesting level is&nbsp;limited to&nbsp;one using the
-[maxGroupLevel](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/#maxGroupLevel).
\ No newline at end of file
+The set of available group operations is limited to *"and"* and *"or"* using the [groupOperations](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/#groupOperations) array, and the groups&rsquo; maximum nesting level is limited to one using the
+[maxGroupLevel](/Documentation/ApiReference/UI_Components/dxFilterBuilder/Configuration/#maxGroupLevel).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Form/CustomizeItem/description.md b/apps/demos/Demos/Form/CustomizeItem/description.md
index 1f1e51c4ee73..fa8df97a26db 100644
--- a/apps/demos/Demos/Form/CustomizeItem/description.md
+++ b/apps/demos/Demos/Form/CustomizeItem/description.md
@@ -1,7 +1,7 @@
 You can use the [items[]](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#items) array to configure all form items. This array can contain strings ([formData](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData) field names) and objects (item configurations). 
-<!--split-->
 
-Use a string to create a simple item with default configuration as shown for the **Email** item. 
+Use a string to create a simple item with default configuration as shown for the **Email** item.
+<!--split--> 
 
 To change the default settings, declare an item configuration object. Use the [dataField](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#dataField) property to bind an item to a field in the [formData](/Documentation/ApiReference/UI_Components/dxForm/Configuration/#formData) object. Use the [editorType](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#editorType) property to specify an item's data editor or configure the editor in the [editorOptions](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#editorOptions) object. You can also specify any other properties described in the [SimpleItem](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/) section.
 
diff --git a/apps/demos/Demos/Form/UpdateItemsDynamically/description.md b/apps/demos/Demos/Form/UpdateItemsDynamically/description.md
index a4cb2ae3f685..274232eb3936 100644
--- a/apps/demos/Demos/Form/UpdateItemsDynamically/description.md
+++ b/apps/demos/Demos/Form/UpdateItemsDynamically/description.md
@@ -1,6 +1,6 @@
 The [Form](/Documentation/ApiReference/UI_Components/dxForm/) component allows you to add/remove items and specify item visibility at runtime. The Form only updates the affected items and does not re-render the entire form.
-<!--split-->
 
 In this demo, the "Show Address" checkbox specifies the visibility of address-related fields. Review the component's code to see how to set the "HomeAddress" group's [visible](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/GroupItem/#visible) attribute.
 
-Click the "Add phone" button to add a new phone editor. This action adds a new item to the [items](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/GroupItem/#items) array of the "phones" group. Each phone editor contains a button that deletes it from the **items** array and the Form.
\ No newline at end of file
+Click the "Add phone" button to add a new phone editor. This action adds a new item to the [items](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/GroupItem/#items) array of the "phones" group. Each phone editor contains a button that deletes it from the **items** array and the Form.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Gantt/ChartAppearance/description.md b/apps/demos/Demos/Gantt/ChartAppearance/description.md
index 181a5980b330..2a8f81bc48a4 100644
--- a/apps/demos/Demos/Gantt/ChartAppearance/description.md
+++ b/apps/demos/Demos/Gantt/ChartAppearance/description.md
@@ -1,5 +1,4 @@
 This demo illustrates the DevExtreme JavaScript Gantt component's appearance settings.
-<!--split-->
 
 * [scaleType](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/#scaleType) - Specifies views to display tasks: hours, days, weeks, months, etc.
 * [taskTitlePosition](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/#taskTitlePosition) - Specifies where to display a task's title - none, inside or outside the task.
@@ -9,3 +8,4 @@ This demo illustrates the DevExtreme JavaScript Gantt component's appearance set
 * [startDateRange](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/#startDateRange) and [endDateRange](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/#endDateRange) - Allow you to specify a visible data range for the Gantt chart.
 
 Use the properties in the demo to see how they affect the Gantt's behavior and appearance.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Gantt/FilterRow/description.md b/apps/demos/Demos/Gantt/FilterRow/description.md
index fac2c663d6f9..a1feeead973a 100644
--- a/apps/demos/Demos/Gantt/FilterRow/description.md
+++ b/apps/demos/Demos/Gantt/FilterRow/description.md
@@ -1,5 +1,4 @@
 The DevExtreme JavaScript Gantt component allows users to filter columns by filter row values. To display the filter row, set the **filterRow**.[visible](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/filterRow/#visible) property to **true**.
-<!--split-->
 
 To apply filter criteria to a column, enter or select a value for the filter row cell or specify the [filterValue](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/columns/#filterValue) property (for the appropriate column) in code.
 
@@ -27,6 +26,7 @@ Underlying [dataType](/Documentation/ApiReference/UI_Components/dxGantt/Configur
         <td>Date and time picker</td>
     </tr> 
 </table>
+<!--split-->
 
 The **Gantt** supports a predefined set of [filter operations](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/columns/#filterOperations) for each data type. Click a cell’s magnifier icon to select the desired filter operation ([selectedFilterOperation](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/columns/#selectedFilterOperation)).
 
diff --git a/apps/demos/Demos/Gantt/Overview/description.md b/apps/demos/Demos/Gantt/Overview/description.md
index ebd08823d435..c1df26a0dc69 100644
--- a/apps/demos/Demos/Gantt/Overview/description.md
+++ b/apps/demos/Demos/Gantt/Overview/description.md
@@ -1,6 +1,6 @@
 The DevExtreme JavaScript Gantt component allows you to display task flow and dependencies between tasks over a specified period.
-<!--split-->
 
 You can move and modify tasks (task name, duration or progress, for example) directly from the chart. Adjust the timescale to display tasks in smaller or greater time intervals, from hours to years. Hold the CTRL key and rotate your mouse's scroll wheel to zoom and browse data in detail.
 
-[note] The Gantt component requires specific imports. Refer to the following step-by-step tutorial to learn more: [Getting Started with Gantt](/Documentation/Guide/UI_Components/Gantt/Getting_Started_with_Gantt/).
\ No newline at end of file
+The Gantt component requires specific imports. Refer to the following step-by-step tutorial to learn more: [Getting Started with Gantt](/Documentation/Guide/UI_Components/Gantt/Getting_Started_with_Gantt/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Gantt/StripLines/description.md b/apps/demos/Demos/Gantt/StripLines/description.md
index 4eb9e536cbcd..410f7b6be3f6 100644
--- a/apps/demos/Demos/Gantt/StripLines/description.md
+++ b/apps/demos/Demos/Gantt/StripLines/description.md
@@ -1,4 +1,4 @@
 This demo illustrates how to use strip lines to highlight different times in the DevExtreme JavaScript Gantt component. The Gantt stores strip lines in its [stripLines](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/stripLines/) collection. You can specify a title ([title](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/stripLines/#title)) and appearance settings ([CssClass](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/stripLines/#cssClass)) for each strip line.
-<!--split-->
 
 Use the [start](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/stripLines/#start) property to specify an individual strip line or combine it with the [end](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/stripLines/#end) property to specify a time interval.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
index 84e8c13b2ef6..704f141e10cd 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/TaskTemplate/Vue/App.vue
@@ -5,7 +5,7 @@
         :task-list-width="500"
         :height="700"
         scale-type="days"
-        :task-content-template="taskContentTemplate"
+        task-content-template="taskContentTemplate"
       >
 
         <DxTasks :data-source="tasks"/>
diff --git a/apps/demos/Demos/Gantt/Toolbar/Vue/App.vue b/apps/demos/Demos/Gantt/Toolbar/Vue/App.vue
index e79ba49f7bc0..b429d88df846 100644
--- a/apps/demos/Demos/Gantt/Toolbar/Vue/App.vue
+++ b/apps/demos/Demos/Gantt/Toolbar/Vue/App.vue
@@ -52,7 +52,7 @@
     <DxPopup
       v-model:visible="popupVisible"
       title="About"
-      :height="auto"
+      height="auto"
       :show-title="true"
       :hide-on-outside-click="true"
     >
diff --git a/apps/demos/Demos/Gantt/Toolbar/description.md b/apps/demos/Demos/Gantt/Toolbar/description.md
index 81640672078e..9171ef1f7988 100644
--- a/apps/demos/Demos/Gantt/Toolbar/description.md
+++ b/apps/demos/Demos/Gantt/Toolbar/description.md
@@ -1,4 +1,4 @@
 The DevExtreme JavaScript Gantt component allows you to display the most frequently used commands in the toolbar.
-<!--split-->
 
 The toolbar can display standard items and supports custom items. These items are stored in the [items](/Documentation/ApiReference/UI_Components/dxGantt/Configuration/toolbar/items/) collection.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Gauges/GaugeTitleCustomized/description.md b/apps/demos/Demos/Gauges/GaugeTitleCustomized/description.md
index 00424abe4cdb..48556d8a698e 100644
--- a/apps/demos/Demos/Gauges/GaugeTitleCustomized/description.md
+++ b/apps/demos/Demos/Gauges/GaugeTitleCustomized/description.md
@@ -1,5 +1,4 @@
 This demo shows how to specify a CircularGauge title and display custom labels in the component's center. 
-<!--split-->
 
 A CircularGauge title usually informs users about the nature of gauge data. To customize it, use the properties of the [title](/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/title/) configuration object:
 
@@ -9,4 +8,5 @@ Use the [horizontalAlignment](/Documentation/ApiReference/UI_Components/dxCircul
 - **Font Settings**    
 Use the [font](/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/title/font/) configuration object.
 
-You can display a custom label in the center of a CircularGauge. Use the [centerTemplate](/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/#centerTemplate) property. Render template content as an [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) element.
\ No newline at end of file
+You can display a custom label in the center of a CircularGauge. Use the [centerTemplate](/Documentation/ApiReference/UI_Components/dxCircularGauge/Configuration/#centerTemplate) property. Render template content as an [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) element.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Gauges/Overview/Angular/description.md b/apps/demos/Demos/Gauges/Overview/Angular/description.md
index cc954cbd57f0..61fbcdc28f5b 100644
--- a/apps/demos/Demos/Gauges/Overview/Angular/description.md
+++ b/apps/demos/Demos/Gauges/Overview/Angular/description.md
@@ -1,11 +1,11 @@
 DevExtreme Angular Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges. 
-<!--split-->
 
 This demo displays a simple dashboard with a few highly customized gauges. 
 
 Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.
 
 Our gauge controls also support Native Angular features: AOT compilation, declarative configuration, and TypeScript compile-time checking.
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/Gauges/Overview/React/description.md b/apps/demos/Demos/Gauges/Overview/React/description.md
index e373a93ff09b..c9b8958ab7dd 100644
--- a/apps/demos/Demos/Gauges/Overview/React/description.md
+++ b/apps/demos/Demos/Gauges/Overview/React/description.md
@@ -1,11 +1,11 @@
 DevExtreme React Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges. 
-<!--split-->
 
 This demo displays a simple dashboard with customized gauges. 
 
 Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.
 
 [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/). 
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/Gauges/Overview/ReactJs/description.md b/apps/demos/Demos/Gauges/Overview/ReactJs/description.md
index e373a93ff09b..c9b8958ab7dd 100644
--- a/apps/demos/Demos/Gauges/Overview/ReactJs/description.md
+++ b/apps/demos/Demos/Gauges/Overview/ReactJs/description.md
@@ -1,11 +1,11 @@
 DevExtreme React Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges. 
-<!--split-->
 
 This demo displays a simple dashboard with customized gauges. 
 
 Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.
 
 [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/). 
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/Gauges/Overview/Vue/description.md b/apps/demos/Demos/Gauges/Overview/Vue/description.md
index 937bff1671f9..8fbbe0064d53 100644
--- a/apps/demos/Demos/Gauges/Overview/Vue/description.md
+++ b/apps/demos/Demos/Gauges/Overview/Vue/description.md
@@ -1,11 +1,11 @@
 DevExtreme Vue Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges. 
-<!--split-->
 
 This demo displays a simple dashboard with a few highly customized gauges. 
 
 Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.
 
 You can use Vue syntax and techniques to instantiate and configure the gauges or handle their events. In addition, the components support [prop validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation). [Find out more about DevExtreme Vue components](/Documentation/Guide/Vue_Components/DevExtreme_Vue_Components/).
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/Gauges/Overview/jQuery/description.md b/apps/demos/Demos/Gauges/Overview/jQuery/description.md
index 64e774b1dd71..ef6182369188 100644
--- a/apps/demos/Demos/Gauges/Overview/jQuery/description.md
+++ b/apps/demos/Demos/Gauges/Overview/jQuery/description.md
@@ -1,9 +1,9 @@
 DevExtreme JavaScript Gauge controls help you visualize data and create dashboards. Our library includes three gauge types: radial bar gauges, circular scale gauges, and linear gauges. 
-<!--split-->
 
 This demo displays a simple dashboard with a few highly customized gauges. 
 
 Review other demos in this section to explore gauge features such as geometry customization, palettes, tooltips, and custom label display.
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/HtmlEditor/OutputFormats/description.md b/apps/demos/Demos/HtmlEditor/OutputFormats/description.md
index ed327df19063..792306dd88d7 100644
--- a/apps/demos/Demos/HtmlEditor/OutputFormats/description.md
+++ b/apps/demos/Demos/HtmlEditor/OutputFormats/description.md
@@ -1,4 +1,4 @@
 Our HtmlEditor can output the markup in HTML and Markdown formats. To specify the format, use the [valueType](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#valueType) property. If you use Markdown, import the Markdown converter as described in the **valueType** article.
-<!--split-->
 
 The HtmlEditor stores the markup in the [value](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#value) property. In this demo, the value is displayed under the HtmlEditor. You can click the Html and Markdown buttons to switch between output formats.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/HtmlEditor/Overview/description.md b/apps/demos/Demos/HtmlEditor/Overview/description.md
index 6c4e03f00254..9e6b7d6c8c33 100644
--- a/apps/demos/Demos/HtmlEditor/Overview/description.md
+++ b/apps/demos/Demos/HtmlEditor/Overview/description.md
@@ -1,7 +1,7 @@
 The HtmlEditor component is a client-side WYSIWYG text editor. The editor allows users to format text and integrate media elements into documents. The result can be exported to HTML or Markdown.
-<!--split-->
 
 Users can edit and customize content using the [toolbar](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/) that can contain predefined and custom controls. To specify the available controls, use the [items](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/items/) array. In this demo, the toolbar contains predefined controls.
+<!--split-->
 
 You can use the **toolbar**.[multiline](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/toolbar/#multiline) property to arrange the toolbar controls into multiple rows.
 
diff --git a/apps/demos/Demos/List/ItemDragging/React/App.tsx b/apps/demos/Demos/List/ItemDragging/React/App.tsx
index 450b410c4c77..15deeca3bc14 100644
--- a/apps/demos/Demos/List/ItemDragging/React/App.tsx
+++ b/apps/demos/Demos/List/ItemDragging/React/App.tsx
@@ -12,7 +12,9 @@ const App = () => {
 
   const onAdd = useCallback<IItemDraggingProps['onAdd']>((e) => {
     const tasks = e.toData === 'plannedTasks' ? plannedTasksState : doingTasksState;
-    const updatedTasks = [...tasks.slice(0, e.toIndex), e.itemData, ...tasks.slice(e.toIndex)];
+
+    const updatedTasks = [...tasks];
+    updatedTasks.splice(e.toIndex, 0, e.itemData);
 
     if (e.toData === 'plannedTasks') {
       setPlannedTasksState(updatedTasks);
@@ -23,7 +25,8 @@ const App = () => {
 
   const onRemove = useCallback<IItemDraggingProps['onRemove']>((e) => {
     const tasks = e.fromData === 'plannedTasks' ? plannedTasksState : doingTasksState;
-    const updatedTasks = [...tasks.slice(0, e.fromIndex), ...tasks.slice(e.fromIndex + 1)];
+    const updatedTasks = [...tasks];
+    updatedTasks.splice(e.fromIndex, 1);
 
     if (e.fromData === 'plannedTasks') {
       setPlannedTasksState(updatedTasks);
@@ -33,8 +36,24 @@ const App = () => {
   }, [setPlannedTasksState, setDoingTasksState, plannedTasksState, doingTasksState]);
 
   const onReorder = useCallback((e) => {
-    onRemove(e);
-    onAdd(e);
+    if (e.fromData === e.toData) {
+      const updateTasks = (tasks) => {
+        const updatedTasks = [...tasks];
+        const [movedTask] = updatedTasks.splice(e.fromIndex, 1);
+        updatedTasks.splice(e.toIndex, 0, movedTask);
+        return updatedTasks;
+      };
+  
+      if (e.fromData === 'plannedTasks') {
+        setPlannedTasksState((prevTasks) => updateTasks(prevTasks));
+      } else {
+        setDoingTasksState((prevTasks) => updateTasks(prevTasks));
+      }
+    }
+    else {
+      onRemove(e);
+      onAdd(e);
+    }  
   }, [onAdd, onRemove]);
 
   return (
diff --git a/apps/demos/Demos/List/ItemDragging/ReactJs/App.js b/apps/demos/Demos/List/ItemDragging/ReactJs/App.js
index d120dd40ad09..9beef1e88a8b 100644
--- a/apps/demos/Demos/List/ItemDragging/ReactJs/App.js
+++ b/apps/demos/Demos/List/ItemDragging/ReactJs/App.js
@@ -16,7 +16,8 @@ const App = () => {
   const onAdd = useCallback(
     (e) => {
       const tasks = e.toData === 'plannedTasks' ? plannedTasksState : doingTasksState;
-      const updatedTasks = [...tasks.slice(0, e.toIndex), e.itemData, ...tasks.slice(e.toIndex)];
+      const updatedTasks = [...tasks];
+      updatedTasks.splice(e.toIndex, 0, e.itemData);
       if (e.toData === 'plannedTasks') {
         setPlannedTasksState(updatedTasks);
       } else {
@@ -28,7 +29,8 @@ const App = () => {
   const onRemove = useCallback(
     (e) => {
       const tasks = e.fromData === 'plannedTasks' ? plannedTasksState : doingTasksState;
-      const updatedTasks = [...tasks.slice(0, e.fromIndex), ...tasks.slice(e.fromIndex + 1)];
+      const updatedTasks = [...tasks];
+      updatedTasks.splice(e.fromIndex, 1);
       if (e.fromData === 'plannedTasks') {
         setPlannedTasksState(updatedTasks);
       } else {
@@ -39,8 +41,22 @@ const App = () => {
   );
   const onReorder = useCallback(
     (e) => {
-      onRemove(e);
-      onAdd(e);
+      if (e.fromData === e.toData) {
+        const updateTasks = (tasks) => {
+          const updatedTasks = [...tasks];
+          const [movedTask] = updatedTasks.splice(e.fromIndex, 1);
+          updatedTasks.splice(e.toIndex, 0, movedTask);
+          return updatedTasks;
+        };
+        if (e.fromData === 'plannedTasks') {
+          setPlannedTasksState((prevTasks) => updateTasks(prevTasks));
+        } else {
+          setDoingTasksState((prevTasks) => updateTasks(prevTasks));
+        }
+      } else {
+        onRemove(e);
+        onAdd(e);
+      }
     },
     [onAdd, onRemove],
   );
diff --git a/apps/demos/Demos/List/ItemTemplate/description.md b/apps/demos/Demos/List/ItemTemplate/description.md
index 495ddb0f2ff6..07a1c83eaa71 100644
--- a/apps/demos/Demos/List/ItemTemplate/description.md
+++ b/apps/demos/Demos/List/ItemTemplate/description.md
@@ -1,6 +1,6 @@
 You can use a default or custom item template to customize list items.
 
 A default template consists of a set of data source fields that the List automatically recognizes. These fields are listed in the [items](/Documentation/ApiReference/UI_Components/dxList/Configuration/items/) section. To use a default template for customization, add or remove the fields from data objects. Refer to the [Default Templates](/Documentation/Guide/UI_Components/Common/Templates/#Default_Templates) article for more information.
-<!--split-->
 
 If you want more customization options, implement a custom template and assign it to the [itemTemplate](/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemTemplate) property, as illustrated in this demo.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/List/ListEditingAndAPI/description.md b/apps/demos/Demos/List/ListEditingAndAPI/description.md
index 683ff9fbdcc1..bc16c9de8005 100644
--- a/apps/demos/Demos/List/ListEditingAndAPI/description.md
+++ b/apps/demos/Demos/List/ListEditingAndAPI/description.md
@@ -1,7 +1,7 @@
 The [List](/Documentation/ApiReference/UI_Components/dxList/) displays a collection of items as a scrollable list. To create a list, pass an array of items to the [dataSource](/Documentation/ApiReference/UI_Components/dxList/Configuration/#dataSource) property. 
-<!--split-->
 
 To allow users to delete items, set the [allowItemDeleting](/Documentation/ApiReference/UI_Components/dxList/Configuration/#allowItemDeleting) property to **true**. Use the "Allow deletion" checkbox under the List to toggle this property.
+<!--split-->
 
 The "Deletion UI type" drop-down menu under the List allows you to switch between the different deletion behaviors described below. Menu items correspond to [itemDeleteMode](/Documentation/ApiReference/UI_Components/dxList/Configuration/#itemDeleteMode) property values. 
     
diff --git a/apps/demos/Demos/List/ListWithSearchBar/description.md b/apps/demos/Demos/List/ListWithSearchBar/description.md
index 782c882d2003..13b7b76cf5cc 100644
--- a/apps/demos/Demos/List/ListWithSearchBar/description.md
+++ b/apps/demos/Demos/List/ListWithSearchBar/description.md
@@ -1,8 +1,8 @@
 To add a search bar to the List and enable the search functionality, do the following:
 
 - Set the [searchEnabled](/Documentation/ApiReference/UI_Components/dxList/Configuration/#searchEnabled) property to **true**.
-<!--split-->  
 
 - Specify the [searchExpr](/Documentation/ApiReference/UI_Components/dxList/Configuration/#searchMode) property. It is used to compare the search string against a specific field in your data objects. In this example, the search string is compared against the *"Name"* field.
 
 - Use the [searchMode](/Documentation/ApiReference/UI_Components/dxList/Configuration/#searchMode) property to specify whether list items should start with, contain, or match the search string. In this example, you can use the drop-down menu under the List to change the **searchMode**.   
+<!--split-->  
\ No newline at end of file
diff --git a/apps/demos/Demos/Lookup/EventHandling/description.md b/apps/demos/Demos/Lookup/EventHandling/description.md
index ed7857633218..4b20b6fcfacc 100644
--- a/apps/demos/Demos/Lookup/EventHandling/description.md
+++ b/apps/demos/Demos/Lookup/EventHandling/description.md
@@ -1,4 +1,4 @@
 To handle changes to the Lookup component's value, specify the [onValueChanged](/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#onValueChanged) function. This demo uses it to display a picture and text for the selected item.
-<!--split-->
 
 The Lookup component applies the selected value instantly. If you want users to click the Apply button instead, set the [applyValueMode](/Documentation/ApiReference/UI_Components/dxLookup/Configuration/#applyValueMode) property to *"useButtons"*. It adds the Apply button to the component's drop-down menu. This demo does not show this functionality.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Lookup/Templates/description.md b/apps/demos/Demos/Lookup/Templates/description.md
index 63642c657216..d8ea9ef496e5 100644
--- a/apps/demos/Demos/Lookup/Templates/description.md
+++ b/apps/demos/Demos/Lookup/Templates/description.md
@@ -1,5 +1,4 @@
 You can use the following properties to specify custom templates for Lookup elements.
-<!--split-->
 
 <table class="dx-table">
     <tr>
@@ -21,3 +20,4 @@ You can use the following properties to specify custom templates for Lookup elem
 </table>
 
 To customize elements, you can also define specific fields in data objects. Visit the [items](/Documentation/ApiReference/UI_Components/dxLookup/Configuration/items/) documentation for a full list of such fields. Refer to the [Default Templates](/Documentation/Guide/UI_Components/Common/Templates/#Default_Templates) help topic for more information about this feature.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Map/ProvidersAndTypes/description.md b/apps/demos/Demos/Map/ProvidersAndTypes/description.md
index bcd09e786731..021c2a783f92 100644
--- a/apps/demos/Demos/Map/ProvidersAndTypes/description.md
+++ b/apps/demos/Demos/Map/ProvidersAndTypes/description.md
@@ -1,4 +1,4 @@
 The [provider](/Documentation/ApiReference/UI_Components/dxMap/Configuration/#provider) property specifies which map provider to use: Google Maps (default), Bing Maps (used in this demo), or Google Static Maps.
-<!--split-->
 
-You can also set the [type](/Documentation/ApiReference/UI_Components/dxMap/Configuration/#type) property to specify the map type: road, satellite (photographic), or hybrid map.
\ No newline at end of file
+You can also set the [type](/Documentation/ApiReference/UI_Components/dxMap/Configuration/#type) property to specify the map type: road, satellite (photographic), or hybrid map.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Menu/Overview/description.md b/apps/demos/Demos/Menu/Overview/description.md
index 82233b031fa8..622a87ba0704 100644
--- a/apps/demos/Demos/Menu/Overview/description.md
+++ b/apps/demos/Demos/Menu/Overview/description.md
@@ -1,9 +1,9 @@
 ## Populate Menu with Data and Configure the Access to It
 
 You can display Menu items from the [items](/Documentation/ApiReference/UI_Components/dxMenu/Configuration/items/) array or a [dataSource](/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#dataSource). This demo contains an example of a data structure. If you use a **dataSource**, specify the [displayExpr](/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#displayExpr) property.
-<!--split-->
 
 To access the clicked item, use the [onItemClick](/Documentation/ApiReference/UI_Components/dxMenu/Configuration/#onItemClick) event handler function.
+<!--split-->
 
 ## Configure the Menu
 
diff --git a/apps/demos/Demos/Menu/Scrolling/description.md b/apps/demos/Demos/Menu/Scrolling/description.md
index 37a3830ada10..439e176be963 100644
--- a/apps/demos/Demos/Menu/Scrolling/description.md
+++ b/apps/demos/Demos/Menu/Scrolling/description.md
@@ -1,5 +1,4 @@
 The DevExtreme Menu component supports submenu item scrolling. If combined item height exceeds screen size or a pre-defined height limit, a scrollbar appears on-screen.
-<!--split-->
 
 You can use one of the following event handlers to configure submenus as requirements dictate:
 
@@ -13,4 +12,5 @@ You can use one of the following event handlers to configure submenus as require
 
 These handlers can access the root submenu element (`submenuContainer`) and data from root and submenu items (`itemData`).
 
-In this demo, the **onSubmenuShowing** function limits submenu height to 200px.
\ No newline at end of file
+In this demo, the **onSubmenuShowing** function limits submenu height to 200px.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/MultiView/Overview/description.md b/apps/demos/Demos/MultiView/Overview/description.md
index 25c2b3d4a49b..eec208fd8be2 100644
--- a/apps/demos/Demos/MultiView/Overview/description.md
+++ b/apps/demos/Demos/MultiView/Overview/description.md
@@ -1,7 +1,6 @@
 The MultiView component contains multiple views and allows users to switch between them. In this demo, swipe left or right to navigate through the views.
-<!--split-->
 
 You can create view items in the [items](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/items/) array, or load them from a [dataSource](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#dataSource). If you specify the [dataSource](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#dataSource) structure as described in the [items](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/items/) API section, the [dataSource](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#dataSource) populates the component with view items. Otherwise, you need to specify an [itemTemplate](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#itemTemplate). This demo shows how to implement the latter scenario.
+<!--split-->
 
-If you want users to scroll back to the first item after they swipe the last item, set the [loop](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#loop) property to **true**. Specify the [animationEnabled](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#animationEnabled) property to enable or disable the scroll animation.
-
+If you want users to scroll back to the first item after they swipe the last item, set the [loop](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#loop) property to **true**. Specify the [animationEnabled](/Documentation/ApiReference/UI_Components/dxMultiView/Configuration/#animationEnabled) property to enable or disable the scroll animation.
\ No newline at end of file
diff --git a/apps/demos/Demos/NumberBox/Overview/description.md b/apps/demos/Demos/NumberBox/Overview/description.md
index 64669ace4d86..634c77a31e63 100644
--- a/apps/demos/Demos/NumberBox/Overview/description.md
+++ b/apps/demos/Demos/NumberBox/Overview/description.md
@@ -1,7 +1,7 @@
 The NumberBox is a component that displays a number. Users can change this number (for example, type a new value or use the spin buttons, keyboard arrows, or mouse wheel to increment/decrement it).
-<!--split-->
 
 Use the [value](/Documentation/ApiReference/UI_Components/dxNumberBox/Configuration/#value) property to specify the number displayed in the NumberBox. If you do not specify the **value** property, the NumberBox displays 0 (the default value). You can use the [min](/Documentation/ApiReference/UI_Components/dxNumberBox/Configuration/#min) and [max](/Documentation/ApiReference/UI_Components/dxNumberBox/Configuration/#max) properties to set the value range.
+<!--split-->
 
 Specify the [onValueChanged](/Documentation/ApiReference/UI_Components/dxNumberBox/Configuration/#onValueChanged) function to handle the value change. In this demo, the value of the "Stock" NumberBox depends on the "This month sales" NumberBox. Change the value in the "This month sales" NumberBox to see how it affects the other value.
 
diff --git a/apps/demos/Demos/PivotGrid/DrillDown/description.md b/apps/demos/Demos/PivotGrid/DrillDown/description.md
index 5a2b675076ef..9347aa36852e 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/description.md
+++ b/apps/demos/Demos/PivotGrid/DrillDown/description.md
@@ -1,6 +1,6 @@
 PivotGrid supports the drill-down operation that allows you to retrieve individual facts (records) used to calculate a specific summary value.
-<!--split-->
 
 Call the [createDrillDownDataSource(options)](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Methods/#createDrillDownDataSourceoptions) method to get a [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) instance that contains a list of facts for a summary value.
 
-This demo displays a list of facts within a [DataGrid](/Documentation/ApiReference/UI_Components/dxDataGrid) in a [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) window. To open the window, click a pivot grid cell. We use the [onCellClick](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/#onCellClick) event handler to retrieve the cell's data and pass it as an argument to the **createDrillDownDataSource(options)** method.
\ No newline at end of file
+This demo displays a list of facts within a [DataGrid](/Documentation/ApiReference/UI_Components/dxDataGrid) in a [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) window. To open the window, click a pivot grid cell. We use the [onCellClick](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/#onCellClick) event handler to retrieve the cell's data and pass it as an argument to the **createDrillDownDataSource(options)** method.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/description.md b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/description.md
index 1c125e49a999..0b36a834f5bc 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/description.md
+++ b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/description.md
@@ -1,5 +1,4 @@
 Our PivotGrid allows you to control and manage the data export process. You can use the PivotGrid's [customizeCell](/Documentation/ApiReference/Common/Object_Structures/ExcelExportPivotGridProps/#customizeCell) callback to modify cell data and associated formatting prior to export operations (from the PivotGrid to an Excel file).
-<!--split-->
 
 Our PivotGrid gives you access and allows you to change the following attributes:
 
@@ -10,3 +9,4 @@ Our PivotGrid gives you access and allows you to change the following attributes
 - <a href="https://github.com/exceljs/exceljs#number-formats" target="_blank">Formatting</a> properties
 
 The **customizeCell** function also allows you to identify cell area types.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSOverview/description.md b/apps/demos/Demos/PivotGrid/ExcelJSOverview/description.md
index 0f3eca5a4166..a7680cb3e4a7 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJSOverview/description.md
+++ b/apps/demos/Demos/PivotGrid/ExcelJSOverview/description.md
@@ -1,8 +1,8 @@
 Our PivotGrid allows you to easily and accurately export its contents to Microsoft Excel. To enable export operations, you must reference or import <a href="https://github.com/exceljs/exceljs" target="_blank">ExcelJS</a> and <a href="https://github.com/eligrey/FileSaver.js/" target="_blank">FileSaver</a> libraries. You must also set **export**.[enabled](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/export/#enabled) to **true**.
-<!--split-->
 
 Once you've referenced/imported both files and set **export**.**enabled** to **true**, use the [exportPivotGrid(options)](/Documentation/ApiReference/Common/Utils/excelExporter/#exportPivotGridoptions) method to export PivotGrid content to an Excel <a href="https://github.com/exceljs/exceljs#create-a-workbook" target="_blank">workbook</a>.
 
 Please review the [onExporting](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/#onExporting) handler and its data export code to learn more. In this example, PivotGrid content is exported as is to a single <a href="https://github.com/exceljs/exceljs#add-a-worksheet" target="_blank">worksheet</a>.
+<!--split-->
 
 You can export PivotGrid to CSV. Call the **exportPivotGrid(options)** method as shown in the following ticket: <a href="https://supportcenter.devexpress.com/ticket/details/t920593/pivotgrid-exceljs-export-to-export-pivotgrid-into-csv-file" target="_blank">Export PivotGrid into CSV file</a>.
\ No newline at end of file
diff --git a/apps/demos/Demos/PivotGrid/FieldPanel/description.md b/apps/demos/Demos/PivotGrid/FieldPanel/description.md
index 1910e25dfeac..57e090d45d0e 100644
--- a/apps/demos/Demos/PivotGrid/FieldPanel/description.md
+++ b/apps/demos/Demos/PivotGrid/FieldPanel/description.md
@@ -1,5 +1,4 @@
 A field panel is an element that displays pivot grid fields involved in summary calculation. This panel consists of four field areas: column, row, data, and filter. Users can drag and drop fields between these areas, similar to the [field chooser](https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/IntegratedFieldChooser). You can use the field panel and the field chooser simultaneously, as shown in this demo.
-<!--split-->
 
 Enable the [fieldPanel](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldPanel/).[visible](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldPanel/#visible) property to display the field panel. If you want to hide fields from specific areas, disable the corresponding properties in the **fieldPanel** object:
 
@@ -7,6 +6,7 @@ Enable the [fieldPanel](/Documentation/ApiReference/UI_Components/dxPivotGrid/Co
 - [showRowFields](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldPanel/#showRowFields)
 - [showDataFields](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldPanel/#showDataFields)
 - [showFilterFields](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldPanel/#showFilterFields)
+<!--split-->
 
 In this demo, you can click the checkboxes below the PivotGrid to enable or disable these properties.
 
diff --git a/apps/demos/Demos/PivotGrid/Overview/Angular/description.md b/apps/demos/Demos/PivotGrid/Overview/Angular/description.md
index 1ef92c1cb08d..609dbf217698 100644
--- a/apps/demos/Demos/PivotGrid/Overview/Angular/description.md
+++ b/apps/demos/Demos/PivotGrid/Overview/Angular/description.md
@@ -1,7 +1,7 @@
 DevExtreme Angular Pivot Grid is a client-side control for multi-dimensional data analysis. Its key features are: multiple summary calculation modes, customizable layout, exporting to Excel, integration with the DevExtreme Chart component. In addition, Pivot Grid supports TypeScript and AOT compilation and can be configured declaratively.
-<!--split-->
 
 To get started with the DevExtreme PivotGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with PivotGrid](/Documentation/Guide/UI_Components/PivotGrid/Getting_Started_with_PivotGrid/).
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/PivotGrid/Overview/React/description.md b/apps/demos/Demos/PivotGrid/Overview/React/description.md
index e5cb2c62d678..3558c9a29043 100644
--- a/apps/demos/Demos/PivotGrid/Overview/React/description.md
+++ b/apps/demos/Demos/PivotGrid/Overview/React/description.md
@@ -1,7 +1,7 @@
 DevExtreme React PivotGrid is a UI component for multi-dimensional data analysis. It can process data from local arrays and OLAP cubes (MS SQL Server Analysis Services), as well as from custom remote services. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
 To get started with the DevExtreme PivotGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with PivotGrid](/Documentation/Guide/UI_Components/PivotGrid/Getting_Started_with_PivotGrid/).
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/PivotGrid/Overview/ReactJs/description.md b/apps/demos/Demos/PivotGrid/Overview/ReactJs/description.md
index e5cb2c62d678..3558c9a29043 100644
--- a/apps/demos/Demos/PivotGrid/Overview/ReactJs/description.md
+++ b/apps/demos/Demos/PivotGrid/Overview/ReactJs/description.md
@@ -1,7 +1,7 @@
 DevExtreme React PivotGrid is a UI component for multi-dimensional data analysis. It can process data from local arrays and OLAP cubes (MS SQL Server Analysis Services), as well as from custom remote services. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
 To get started with the DevExtreme PivotGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with PivotGrid](/Documentation/Guide/UI_Components/PivotGrid/Getting_Started_with_PivotGrid/).
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/PivotGrid/Overview/Vue/description.md b/apps/demos/Demos/PivotGrid/Overview/Vue/description.md
index 3132752bc9da..aa59f2c4e75b 100644
--- a/apps/demos/Demos/PivotGrid/Overview/Vue/description.md
+++ b/apps/demos/Demos/PivotGrid/Overview/Vue/description.md
@@ -1,7 +1,7 @@
 DevExtreme Vue Pivot Grid is&nbsp;a&nbsp;powerful client-side component for multi-dimensional data analysis. It&nbsp;provides such essential features as&nbsp;grouping, sorting, filtering, multiple summary calculation modes, flexible layout, and more. You can use Vue syntax and techniques to&nbsp;instantiate and configure the Pivot Grid or&nbsp;handle its events. [Find out more about DevExtreme Vue components](/Documentation/Guide/Vue_Components/DevExtreme_Vue_Components/).
-<!--split-->
 
 To get started with the DevExtreme PivotGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with PivotGrid](/Documentation/Guide/UI_Components/PivotGrid/Getting_Started_with_PivotGrid/).
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/PivotGrid/Overview/jQuery/description.md b/apps/demos/Demos/PivotGrid/Overview/jQuery/description.md
index 0eeb27e296e9..a71b4752f51e 100644
--- a/apps/demos/Demos/PivotGrid/Overview/jQuery/description.md
+++ b/apps/demos/Demos/PivotGrid/Overview/jQuery/description.md
@@ -1,7 +1,7 @@
 DevExtreme JavaScript PivotGrid is a client-side control available as a jQuery component. It is optimized for multi-dimensional data analysis and supports binding to data from local arrays and OLAP cubes (MS SQL Server Analysis Services), as well as custom remote services. PivotGrid's key features include: several summary calculation modes, customizable layout, data sorting and exporting, and integration with DevExtreme Chart, which is shown in this demo.
-<!--split-->
 
 To get started with the DevExtreme PivotGrid component, refer to the following tutorial for step-by-step instructions: [Getting Started with PivotGrid](/Documentation/Guide/UI_Components/PivotGrid/Getting_Started_with_PivotGrid/).
+<!--split-->
 
 [note]
 
diff --git a/apps/demos/Demos/PivotGrid/RunningTotals/description.md b/apps/demos/Demos/PivotGrid/RunningTotals/description.md
index de62bfe43e2d..a0a91d98a002 100644
--- a/apps/demos/Demos/PivotGrid/RunningTotals/description.md
+++ b/apps/demos/Demos/PivotGrid/RunningTotals/description.md
@@ -1,4 +1,4 @@
 The PivotGrid can calculate running totals by rows or columns. Assign *"row"* or *"column"* to a field's [runningTotal](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#runningTotal) property to specify how running totals are calculated. This property is available only for data fields.
-<!--split-->
 
-Running totals are calculated from scratch for each [group](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#groupName) within a row or column. You can assign **true** to the [allowCrossGroupCalculation](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#allowCrossGroupCalculation) property to calculate running totals across all groups.
\ No newline at end of file
+Running totals are calculated from scratch for each [group](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#groupName) within a row or column. You can assign **true** to the [allowCrossGroupCalculation](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#allowCrossGroupCalculation) property to calculate running totals across all groups.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/description.md b/apps/demos/Demos/PivotGrid/SimpleArray/description.md
index 0a07fe594d90..241caa87cc5f 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/description.md
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/description.md
@@ -1,7 +1,7 @@
 The PivotGrid component can display data from an array of objects. Use the [dataSource](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/#dataSource) property to bind the PivotGrid to data. This property accepts a [PivotGridDataSource](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/) instance or its configuration object. Assign your array to the [store](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/store/) property of **PivotGridDataSource**.
-<!--split-->
 
 To display data in the PivotGrid, assign an array to the [fields[]](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/) property. Each object in this array configures a single pivot grid field. Assign a field name to the [dataField](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#dataField) property to populate the pivot grid field with data.
+<!--split-->
 
 You can distribute fields between four different areas: row, column, filter, and data. To specify the area, set the [area](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/fields/#area) property. Fields that do not belong to any area are displayed in the [field chooser](https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/IntegratedFieldChooser/).
 
diff --git a/apps/demos/Demos/PivotGrid/VirtualScrolling/description.md b/apps/demos/Demos/PivotGrid/VirtualScrolling/description.md
index 4f208d7ce9e3..9ca9437f5483 100644
--- a/apps/demos/Demos/PivotGrid/VirtualScrolling/description.md
+++ b/apps/demos/Demos/PivotGrid/VirtualScrolling/description.md
@@ -1,6 +1,6 @@
 If the PivotGrid is bound to a large dataset, you can enable the virtual scrolling mode to optimize data load time and reduce resource consumption. In this mode, the PivotGrid loads only the cells that are in the viewport. When cells leave the viewport, the PivotGrid removes them from the DOM.
-<!--split-->
 
 To enable this mode, set the **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/scrolling/#mode) to _"virtual"_.
 
-In this demo, the PivotGrid stores approximately 4000 values locally. To see virtual scrolling in action, scroll the PivotGrid horizontally.
\ No newline at end of file
+In this demo, the PivotGrid stores approximately 4000 values locally. To see virtual scrolling in action, scroll the PivotGrid horizontally.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/PivotGrid/WebAPIService/description.md b/apps/demos/Demos/PivotGrid/WebAPIService/description.md
index 8eece306ccf0..ac1bac003d95 100644
--- a/apps/demos/Demos/PivotGrid/WebAPIService/description.md
+++ b/apps/demos/Demos/PivotGrid/WebAPIService/description.md
@@ -1,9 +1,9 @@
 The PivotGrid can communicate with a Web API service. The quantity of aggregated data is irrelevant when aggregation is performed on the server. For example, the PivotGrid works with a million aggregated records in this demo.
-<!--split-->
 
 To configure access to a Web API service from the client, use the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/client-side-with-jquery.md#api-reference" target="_blank">createStore</a> method, which is part of the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data#devextreme-aspnet-data" target="_blank">DevExtreme.AspNet.Data</a> extension. This extension also allows you to <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/server-side-configuration.md" target="_blank">configure server-side data processing</a> for DevExtreme components.
 
 You should also set the [remoteOperations](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/#remoteOperations) property to **true** to notify the PivotGrid that data is aggregated on the server.
+<!--split-->
 
 ### A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
 
diff --git a/apps/demos/Demos/Popup/Scrolling/description.md b/apps/demos/Demos/Popup/Scrolling/description.md
index 8bdf1066b4eb..bb5e63b451c5 100644
--- a/apps/demos/Demos/Popup/Scrolling/description.md
+++ b/apps/demos/Demos/Popup/Scrolling/description.md
@@ -1,7 +1,7 @@
 This demo shows two implementations of scrolling in the Popup component.
-<!--split-->
 
 When you click the first **Show Popup** button, a Popup with a native scrollbar appears. The component always displays a native scrollbar when the height of the Popup's content is greater than that of the Popup.
+<!--split-->
 
 A click on the second **Show Popup** button also displays a Popup with a scrollbar, but this scrollbar belongs to the [ScrollView](/Documentation/ApiReference/UI_Components/dxScrollView/) component. This implementation is more flexible. For example, you can enable [right-to-left representation](/Documentation/ApiReference/UI_Components/dxScrollView/Configuration/#rtlEnabled) or scroll the content to a [specific position](/Documentation/ApiReference/UI_Components/dxScrollView/Methods/#scrollTotargetLocation). For more information about the available options, refer to the [ScrollView API section](/Documentation/ApiReference/UI_Components/dxScrollView/).
 
diff --git a/apps/demos/Demos/ProgressBar/Overview/description.md b/apps/demos/Demos/ProgressBar/Overview/description.md
index 68538f71c570..7fccbeaac79d 100644
--- a/apps/demos/Demos/ProgressBar/Overview/description.md
+++ b/apps/demos/Demos/ProgressBar/Overview/description.md
@@ -1,5 +1,4 @@
 This demo shows how to configure the ProgressBar component.
-<!--split-->
 
 To create a ProgressBar, declare it in markup. You can specify the following properties to change the ProgressBar's numeric scale:
 
@@ -10,8 +9,8 @@ The min and max properties limit the range of accepted values.
 This property specifies the current value. If you want to switch the ProgressBar to an indeterminate state, set the [value](/Documentation/ApiReference/UI_Components/dxProgressBar/Configuration/#value) property to `false`.
 
 This demo uses the custom timer function to increase the ProgressBar's value.
+<!--split-->
 
 When the ProgressBar reaches the maximum value, the [complete](/Documentation/ApiReference/UI_Components/dxProgressBar/Events/#complete) event occurs. Use the [onComplete](/Documentation/ApiReference/UI_Components/dxProgressBar/Configuration/#onComplete) function to handle it.
 
-The progress status displays a ratio between the current and maximum values and indicates the progress. Use the [showStatus](/Documentation/ApiReference/UI_Components/dxProgressBar/Configuration/#showStatus) property to display or hide the status string. To format the status string, use the [statusFormat](/Documentation/ApiReference/UI_Components/dxProgressBar/Configuration/#statusFormat) function.
-
+The progress status displays a ratio between the current and maximum values and indicates the progress. Use the [showStatus](/Documentation/ApiReference/UI_Components/dxProgressBar/Configuration/#showStatus) property to display or hide the status string. To format the status string, use the [statusFormat](/Documentation/ApiReference/UI_Components/dxProgressBar/Configuration/#statusFormat) function.
\ No newline at end of file
diff --git a/apps/demos/Demos/Resizable/Overview/description.md b/apps/demos/Demos/Resizable/Overview/description.md
index ed883e17b21f..30dec969d0b1 100644
--- a/apps/demos/Demos/Resizable/Overview/description.md
+++ b/apps/demos/Demos/Resizable/Overview/description.md
@@ -1,5 +1,4 @@
 If you want to enable live resize operations for a UI element, wrap that element into a Resizable widget. In this demo, you can resize the DataGrid. Try to drag the [handles](/Documentation/ApiReference/UI_Components/dxResizable/Configuration/#handles) on the grid's edges.
-<!--split-->
 
 Configure the following properties to specify resize operation constraints:
 
@@ -12,6 +11,7 @@ Configure the following properties to specify resize operation constraints:
 - [maxHeight](/Documentation/ApiReference/UI_Components/dxResizable/Configuration/#maxHeight)    
 
 - [area](/Documentation/ApiReference/UI_Components/dxResizable/Configuration/#area)    
+<!--split-->
 
 You can display resize handles on edges or corners. Use the following keywords to set up the [handles](/Documentation/ApiReference/UI_Components/dxResizable/Configuration/#handles) property: *top*, *bottom*, *left*, and *right*. If you specify two adjacent sides (for example, "bottom right"), the control displays a handle in the corner.
 
diff --git a/apps/demos/Demos/Scheduler/Adaptability/description.md b/apps/demos/Demos/Scheduler/Adaptability/description.md
index e26c13d772af..57fce8b12c5d 100644
--- a/apps/demos/Demos/Scheduler/Adaptability/description.md
+++ b/apps/demos/Demos/Scheduler/Adaptability/description.md
@@ -1,12 +1,9 @@
-When the [adaptivityEnabled](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#adaptivityEnabled) property is set to **true**, Scheduler elements adapt to small screens as follows.
-<!--split-->
+When the [adaptivityEnabled](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#adaptivityEnabled) property is set to **true**, Scheduler elements adapt to small screens as follows:
 
 * [Cell overflow indicators](/Documentation/Guide/UI_Components/Scheduler/Appointments/Cell_Overflow_Indicator/) become larger to accommodate touch gestures.
 * The appointment list **for a chosen date** slides in from the edge of the screen.
 * The appointment details form occupies the entire screen.
 * Instead of the [view switcher](/Documentation/Guide/UI_Components/Scheduler/View_Switcher/), a drop-down menu is used to switch between views. To open this menu, users should click or tap a button in the upper right corner.
+<!--split-->
 
-In this demo, we also added the [floating action button](/Demos/WidgetsGallery/Demo/FloatingActionButton/Overview/) as an alternative way to create a new appointment. The button is implemented with the [SpeedDialAction](/Documentation/ApiReference/UI_Components/dxSpeedDialAction/) component.
-
-
-
+In this demo, we also added the [floating action button](/Demos/WidgetsGallery/Demo/FloatingActionButton/Overview/) as an alternative way to create a new appointment. The button is implemented with the [SpeedDialAction](/Documentation/ApiReference/UI_Components/dxSpeedDialAction/) component.
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/Agenda/description.md b/apps/demos/Demos/Scheduler/Agenda/description.md
index 928841aee744..a6c6c3a35e7b 100644
--- a/apps/demos/Demos/Scheduler/Agenda/description.md
+++ b/apps/demos/Demos/Scheduler/Agenda/description.md
@@ -1,8 +1,8 @@
 The Agenda view shows appointments as a simple list. This is the most compact display style because it doesn't render a time scale. Appointments follow each other without empty spaces and their sizes do not depend on event duration.
-<!--split-->
 
 To add the Agenda view to your Scheduler, declare it in the [views](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/) array.
 
-[note] The Agenda view does not allow a user to add appointments or modify them by dragging.
+The Agenda view does not allow a user to add appointments or modify them by dragging.
 
 For more information about Agenda and other supported views, refer to the following help topic: [View Types](/Documentation/Guide/UI_Components/Scheduler/Views/View_Types/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/BasicViews/description.md b/apps/demos/Demos/Scheduler/BasicViews/description.md
index 4e93dd418de1..9c33adaa622a 100644
--- a/apps/demos/Demos/Scheduler/BasicViews/description.md
+++ b/apps/demos/Demos/Scheduler/BasicViews/description.md
@@ -1,6 +1,6 @@
 This example demonstrates four Scheduler views: Day, Week, Work Week, and Month. You can use the View Switcher above the timetable to switch between them.
-<!--split-->
 
 To add these views to your Scheduler, list them in the [views](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/) array. If you do not declare this array, users can switch only between the Day and Week views. To activate a specific view at application startup, use the [currentView](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#currentView) property.
 
 For more information about supported view types, refer to the following help topic: [View Types](/Documentation/Guide/UI_Components/Scheduler/Views/View_Types/). 
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/description.md b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/description.md
index f6d126bc8078..f8ea8cece451 100644
--- a/apps/demos/Demos/Scheduler/CurrentTimeIndicator/description.md
+++ b/apps/demos/Demos/Scheduler/CurrentTimeIndicator/description.md
@@ -1,6 +1,6 @@
 The Scheduler indicates the current time if you enable the [showCurrentTimeIndicator](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#showCurrentTimeIndicator) property. Use the [indicatorUpdateInterval](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#indicatorUpdateInterval) property to specify how frequently the indicator should change its position.
-<!--split-->
 
 You can also shade the timetable up to the current time. To enable this feature, set the [shadeUntilCurrentTime](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#shadeUntilCurrentTime) property to **true**.
 
 In this example, you can use the controls under the Scheduler to change the above mentioned properties at runtime.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/CustomTemplates/description.md b/apps/demos/Demos/Scheduler/CustomTemplates/description.md
index 4fa964af1f1d..b5bd5d783df6 100644
--- a/apps/demos/Demos/Scheduler/CustomTemplates/description.md
+++ b/apps/demos/Demos/Scheduler/CustomTemplates/description.md
@@ -1,8 +1,8 @@
 The Scheduler contains the following properties used to specify custom templates globally and for individual views.
-<!--split-->
 
 * Appointment rectangle: [appointmentTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTemplate) / **views[]**.[appointmentTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTemplate)
 
 * Tooltip: [appointmentTooltipTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#appointmentTooltipTemplate) / **views[]**.[appointmentTooltipTemplate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#appointmentTooltipTemplate).
 
 To customize the appointment details form, implement the [onAppointmentFormOpening](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onAppointmentFormOpening) handler. In this demo, this handler adds custom fields to the appointment details form.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/CustomizeIndividualViews/description.md b/apps/demos/Demos/Scheduler/CustomizeIndividualViews/description.md
index 47d19f284fc4..6fdd8ae4982b 100644
--- a/apps/demos/Demos/Scheduler/CustomizeIndividualViews/description.md
+++ b/apps/demos/Demos/Scheduler/CustomizeIndividualViews/description.md
@@ -1,5 +1,4 @@
 To customize a view, configure its settings in an object inside the [views[]](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views) array. You should specify the view's [type](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#type) and other properties to override global view settings.
-<!--split-->
 
 This demo customizes two views - Week and Work Week - in the following manner: 
 
@@ -8,3 +7,4 @@ This demo customizes two views - Week and Work Week - in the following manner:
 * The Work Week view uses the [startDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#startDayHour) and [endDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#endDayHour) properties to set custom first and last hours on the time scale.
 
 Day and Month views use default settings.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/GroupByDate/description.md b/apps/demos/Demos/Scheduler/GroupByDate/description.md
index 205e272e360d..863c884a3a29 100644
--- a/apps/demos/Demos/Scheduler/GroupByDate/description.md
+++ b/apps/demos/Demos/Scheduler/GroupByDate/description.md
@@ -1,6 +1,6 @@
 Appointments can be grouped by resources. This demo declares a single resource&mdash;Priority. Refer to the following demo for more information about resources and their configuration: [Resources](/Demos/WidgetsGallery/Demo/Scheduler/Resources/).
-<!--split-->
 
 When appointments are grouped by resources, you can additionally group them by date first. To do this, set [groupByDate](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#groupByDate) to **true**. You can also use the [same property](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#groupByDate) for individual views. Note that Scheduler groups appointments by date when the view's [groupOrientation](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#groupOrientation) is *"horizontal"* only.
 
 In this demo, you can use the switch below the Scheduler to change the value of **groupByDate**.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/GroupOrientation/description.md b/apps/demos/Demos/Scheduler/GroupOrientation/description.md
index a0e6116f1786..a16abd2a65fb 100644
--- a/apps/demos/Demos/Scheduler/GroupOrientation/description.md
+++ b/apps/demos/Demos/Scheduler/GroupOrientation/description.md
@@ -1,6 +1,6 @@
 Users can group appointments by resources. This demo declares a single resource&mdash;Priority. Refer to the following demo for more information about resources and their configuration: [Resources](/Demos/WidgetsGallery/Demo/Scheduler/Resources/).
-<!--split-->
 
 To group appointments by resources, specify the [groups[]](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#groups) array. Each element of this array is the [fieldExpr](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/resources/#fieldExpr) of a corresponding resource kind. The order of group headers in the UI is the same as items in the resource instances array. If the **groups[]** array contains more than one element, groups are nested. 
+<!--split-->
 
 The Scheduler can arrange group headers vertically (in a column) or horizontally (in a row). Use the **views**.[groupOrientation](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/#groupOrientation) property to set a custom orientation for specific views. This demo shows two Work Week views with different group orientations.
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/description.md b/apps/demos/Demos/Scheduler/Overview/Angular/description.md
index 406ef89818bc..634078e7c405 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/description.md
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/description.md
@@ -1,4 +1,4 @@
 DevExtreme Angular Scheduler is a client-side scheduling control. With a great number of features including appointment editing, multiple calendar views, current time indication, Scheduler provides excellent user experience. Native Angular features, like AOT compilation, declarative configuration, TypeScript compile-time checking, are supported as well.
-<!--split-->
 
-To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
\ No newline at end of file
+To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/Overview/React/description.md b/apps/demos/Demos/Scheduler/Overview/React/description.md
index fa0ba96d19f2..5bc9cd563916 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/description.md
+++ b/apps/demos/Demos/Scheduler/Overview/React/description.md
@@ -1,4 +1,4 @@
 DevExtreme React Scheduler is a UI component for scheduling. It implements all the features necessary for its purpose: flexible data binding, easy appointment editing, multiple calendar views, time zones support, and more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
-To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
\ No newline at end of file
+To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md b/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md
index fa0ba96d19f2..5bc9cd563916 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/description.md
@@ -1,4 +1,4 @@
 DevExtreme React Scheduler is a UI component for scheduling. It implements all the features necessary for its purpose: flexible data binding, easy appointment editing, multiple calendar views, time zones support, and more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
-To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
\ No newline at end of file
+To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/description.md b/apps/demos/Demos/Scheduler/Overview/Vue/description.md
index f77733f4754b..5272018e3c1c 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/description.md
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/description.md
@@ -1,4 +1,4 @@
 DevExtreme Vue Scheduler is&nbsp;a&nbsp;versatile scheduling component. Its main features include appointment editing, time zones support, vertical and horizontal orientation, and many more. You can use Vue syntax and techniques to&nbsp;instantiate and configure the Scheduler or&nbsp;handle its events. In&nbsp;addition, the component supports [prop validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation) and templates that use [named slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots). [Find out more about DevExtreme Vue components](/Documentation/Guide/Vue_Components/DevExtreme_Vue_Components/).
-<!--split-->
 
-To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
\ No newline at end of file
+To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/description.md b/apps/demos/Demos/Scheduler/Overview/jQuery/description.md
index df2e932001c6..36bf290a25ba 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/description.md
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/description.md
@@ -1,4 +1,4 @@
 DevExtreme JavaScript Scheduler is a client-side scheduling component available as a jQuery plugin. This control can be bound to local or remote data including online services like Google Calendar. In this demo, Scheduler is highly customized using templates. Appointments on the view are grouped by employee. View other demos in this section to explore more Scheduler features, like multiple calendar views, appointment editing, time zones support, etc.
-<!--split-->
 
-To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
\ No newline at end of file
+To get started with the DevExtreme Scheduler component, refer to the following tutorial for step-by-step instructions: [Getting Started with Scheduler](/Documentation/Guide/UI_Components/Scheduler/Getting_Started_with_Scheduler/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/SimpleArray/description.md b/apps/demos/Demos/Scheduler/SimpleArray/description.md
index 4003c0e5762e..849ecef3db47 100644
--- a/apps/demos/Demos/Scheduler/SimpleArray/description.md
+++ b/apps/demos/Demos/Scheduler/SimpleArray/description.md
@@ -1,6 +1,6 @@
 You can use the Scheduler component to display and edit appointments from a local array. Use the [dataSource](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#dataSource) property to bind the Scheduler to the array.
-<!--split-->
 
 The Scheduler automatically displays appointments if source object field names match the names listed in the [dxSchedulerAppointment](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/) help section. In this demo, the following fields illustrate this point: [text](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#text), [startDate](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#startDate), [endDate](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#endDate), and [allDay](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#allDay). If field names in your data source differ, specify them in **...Expr** properties ([textExpr](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#textExpr), [startDateExpr](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#startDateExpr), [endDateExpr](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#endDateExpr), [allDayExpr](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#allDayExpr), and so on).
+<!--split-->
 
-For more information about binding to an array, refer to the following help topic: [Local Array](/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Local_Array/).
+For more information about binding to an array, refer to the following help topic: [Local Array](/Documentation/Guide/Data_Binding/Specify_a_Data_Source/Local_Array/).
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/TimeZonesSupport/description.md b/apps/demos/Demos/Scheduler/TimeZonesSupport/description.md
index 76d9b3edb44d..55f2f56f007e 100644
--- a/apps/demos/Demos/Scheduler/TimeZonesSupport/description.md
+++ b/apps/demos/Demos/Scheduler/TimeZonesSupport/description.md
@@ -1,6 +1,6 @@
 The Scheduler allows its users to view appointments in different time zones. Set the [timeZone](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#timeZone) property to specify the current time zone. This property accepts values from the <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones" target="_blank">IANA time zone database</a>.
-<!--split-->
 
 In this demo, you can use the drop-down menu above the Scheduler to choose between the London, Berlin, and Helsinki time zones. To populate the menu, the [getTimeZones](/Documentation/ApiReference/Common/Utils/utils/#getTimeZonesdate) utility method is used. It returns a list of all IANA time zones that is then filtered.
+<!--split-->
 
 Users can edit the time zones of individual appointments in the appointment details form. To enable this functionality, set the **editing**.[allowTimeZoneEditing](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/editing/#allowTimeZoneEditing) property to **true**. Information about individual time zones is saved in the [startDateTimeZone](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#startDateTimeZone) and [endDateTimeZone](/Documentation/ApiReference/UI_Components/dxScheduler/Interfaces/dxSchedulerAppointment/#endDateTimeZone) fields of the appointment data objects.
diff --git a/apps/demos/Demos/Scheduler/Timelines/description.md b/apps/demos/Demos/Scheduler/Timelines/description.md
index 38ca786522a6..dab25828113b 100644
--- a/apps/demos/Demos/Scheduler/Timelines/description.md
+++ b/apps/demos/Demos/Scheduler/Timelines/description.md
@@ -1,11 +1,11 @@
 Timeline views display appointments as a sequence of events on a horizontal timeline, as opposed to basic views that display appointments in a calendar format. You can use the View Switcher above the timetable to switch between the views.
-<!--split-->
 
 List timeline views in the [views](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/) array to add them to your Scheduler. To activate a specific view at application startup, use the [currentView](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#currentView) property.
 
 For information about all supported view types, refer to the following help topic: [View Types](/Documentation/Guide/UI_Components/Scheduler/Views/View_Types/).
+<!--split-->
 
 This demo shows multiple calendars side-by-side (with data grouped by resources). For information on how to configure such a display, see the following demos:
 
 - [Resources](/Demos/WidgetsGallery/Demo/Scheduler/Resources/)
-- [Group Orientation](/Demos/WidgetsGallery/Demo/Scheduler/GroupOrientation/)
+- [Group Orientation](/Demos/WidgetsGallery/Demo/Scheduler/GroupOrientation/)
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/VirtualScrolling/description.md b/apps/demos/Demos/Scheduler/VirtualScrolling/description.md
index e09dcd91ec02..bda5c5f810c5 100644
--- a/apps/demos/Demos/Scheduler/VirtualScrolling/description.md
+++ b/apps/demos/Demos/Scheduler/VirtualScrolling/description.md
@@ -1,6 +1,6 @@
 With virtual scrolling, you can improve the overall performance of your application and reduce load times when our Scheduler component is bound to a large data set. When virtual scrolling is enabled, our Scheduler only renders visible appointments. When an appointment leaves the viewport, the Scheduler removes it from the DOM.
-<!--split-->
 
 To enable virtual scrolling mode, set the [scrolling](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/scrolling).[mode](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/scrolling/#mode) property to *"virtual"*.
 
 Virtual scrolling is available for all [views](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/views/) except *"agenda"*.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/Scheduler/WorkShifts/description.md b/apps/demos/Demos/Scheduler/WorkShifts/description.md
index 8f29db303ce3..f89b0b3fd402 100644
--- a/apps/demos/Demos/Scheduler/WorkShifts/description.md
+++ b/apps/demos/Demos/Scheduler/WorkShifts/description.md
@@ -1,6 +1,6 @@
 This demo uses the Scheduler component’s [offset](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#offset) property to indicate the starting point of a day. The Scheduler’s offset can be set in multiples of 5 and can range from -1440 minutes (-24 hours) to 1440 minutes (24 hours).
-<!--split-->
 
 For instance, if you set the offset to -120, like the **First shift** in this demo, the day begins at 10:00 PM on the previous day instead of 00:00. If you set the offset to 360, like the **Second shift**, the day begins at 6:00 AM.
 
-You can also combine this property with [startDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#startDayHour), [endDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#endDayHour), and [cellDuration](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#cellDuration) to obtain desired display results.
\ No newline at end of file
+You can also combine this property with [startDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#startDayHour), [endDayHour](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#endDayHour), and [cellDuration](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#cellDuration) to obtain desired display results.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/SelectBox/CustomizeDropDownButton/description.md b/apps/demos/Demos/SelectBox/CustomizeDropDownButton/description.md
index 41b420460680..b0e8c71617d8 100644
--- a/apps/demos/Demos/SelectBox/CustomizeDropDownButton/description.md
+++ b/apps/demos/Demos/SelectBox/CustomizeDropDownButton/description.md
@@ -1,5 +1,4 @@
 Use the [dropDownButtonTemplate](/Documentation/ApiReference/UI_Components/dxSelectBox/Configuration/#dropDownButtonTemplate) to customize the drop-down button.
-<!--split-->
 
 This demo illustrates three customization cases:
 
@@ -10,4 +9,5 @@ Declare an `img` element in the template.
 Declare the load indicator and a regular icon in the template. Display the load indicator while hiding the icon, and vice versa.
 
 - **Icon that depends on the selected value**     
-Declare the default and the selected item's icon in the template. If there is a selected item, display its icon; otherwise, show the default icon.
\ No newline at end of file
+Declare the default and the selected item's icon in the template. If there is a selected item, display its icon; otherwise, show the default icon.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/SelectBox/GroupedItems/description.md b/apps/demos/Demos/SelectBox/GroupedItems/description.md
index 706d8b4d0a51..2e8acd0bd662 100644
--- a/apps/demos/Demos/SelectBox/GroupedItems/description.md
+++ b/apps/demos/Demos/SelectBox/GroupedItems/description.md
@@ -1,7 +1,7 @@
 Data items in the SelectBox's drop-down list can be organized in groups.
-<!--split-->
 
 If the data source contains ungrouped data items, use the [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/)'s [group](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#group) property to specify the data field to group by. This case is illustrated in this demo's first and third SelectBoxes.
+<!--split-->
 
 The SelectBox can also work with initially grouped data items. In this case, the data array should contain objects with the **key** and **items** fields:
 
diff --git a/apps/demos/Demos/Switch/Overview/description.md b/apps/demos/Demos/Switch/Overview/description.md
index fef31c73965e..7251af821612 100644
--- a/apps/demos/Demos/Switch/Overview/description.md
+++ b/apps/demos/Demos/Switch/Overview/description.md
@@ -1,7 +1,6 @@
 The Switch component can be in two states: **ON** (when the [value](/Documentation/ApiReference/UI_Components/dxSwitch/Configuration/#value) is **true**) and **OFF** (when the [value](/Documentation/ApiReference/UI_Components/dxSwitch/Configuration/#value) is **false**). To respond to value changes, assign the handling function to the [onValueChanged](/Documentation/ApiReference/UI_Components/dxSwitch/Configuration/#onValueChanged) property.
-<!--split-->
 
 If you want to change the Switch text, specify the [switchedOnText](/Documentation/ApiReference/UI_Components/dxSwitch/Configuration/#switchedOnText) and the [switchedOffText](/Documentation/ApiReference/UI_Components/dxSwitch/Configuration/#switchedOffText) properties. If the changed text does not fit in the component, use the [width](/Documentation/ApiReference/UI_Components/dxSwitch/Configuration/#width) property.
 
 Set the [disabled](/Documentation/ApiReference/UI_Components/dxSwitch/Configuration/#disabled) property to **true** to disable the component.
-
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TabPanel/Overview/Vue/TabPanelItem.vue b/apps/demos/Demos/TabPanel/Overview/Vue/TabPanelItem.vue
index d1e660664e0a..e83419ec7c39 100644
--- a/apps/demos/Demos/TabPanel/Overview/Vue/TabPanelItem.vue
+++ b/apps/demos/Demos/TabPanel/Overview/Vue/TabPanelItem.vue
@@ -1,10 +1,12 @@
 <template>
-  <div class="tabpanel-item">
-    <TaskItem
-      v-for="(task, index) in tasks"
-      :key="index"
-      :task="task"
-    />
+  <div>
+    <div class="tabpanel-item">
+      <TaskItem
+        v-for="(task, index) in tasks"
+        :key="index"
+        :task="task"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/apps/demos/Demos/TabPanel/Overview/description.md b/apps/demos/Demos/TabPanel/Overview/description.md
index 36340d069039..08d982b5784e 100644
--- a/apps/demos/Demos/TabPanel/Overview/description.md
+++ b/apps/demos/Demos/TabPanel/Overview/description.md
@@ -1,7 +1,7 @@
 The [TabPanel](/Documentation/ApiReference/UI_Components/dxTabPanel/) UI component includes both the [Tabs](/Documentation/ApiReference/UI_Components/dxTabs/) and [MultiView](/Documentation/ApiReference/UI_Components/dxMultiView/) components. The TabPanel automatically synchronizes the selected tab with the currently displayed view (and vice versa).
-<!--split-->
 
 To get started with the DevExtreme TabPanel component, refer to the following step-by-step tutorial: [Getting Started with TabPanel](/Documentation/Guide/UI_Components/TabPanel/Getting_Started_with_TabPanel/).
+<!--split-->
 
 ## Generate Similar Tabs Based on a Data Source       
 
diff --git a/apps/demos/Demos/TabPanel/SortableClosableTabs/Vue/App.vue b/apps/demos/Demos/TabPanel/SortableClosableTabs/Vue/App.vue
index 3cb25afdab98..52d9d2bad321 100644
--- a/apps/demos/Demos/TabPanel/SortableClosableTabs/Vue/App.vue
+++ b/apps/demos/Demos/TabPanel/SortableClosableTabs/Vue/App.vue
@@ -25,10 +25,10 @@
           :show-nav-buttons="true"
           :repaint-changes-only="true"
           v-model:selected-index="selectedIndex"
-          item-title-template="title"
+          item-title-template="itemTitle"
           item-template="itemTemplate"
         >
-          <template #title="{ data: employee }">
+          <template #itemTitle="{ data: employee }">
             <div>
               <span>{{ employee.FirstName }} {{ employee.LastName }}</span><i
                 v-show="showCloseButton()"
diff --git a/apps/demos/Demos/TabPanel/Templates/Vue/App.vue b/apps/demos/Demos/TabPanel/Templates/Vue/App.vue
index 1b478c1a4fb9..6e111a725b49 100644
--- a/apps/demos/Demos/TabPanel/Templates/Vue/App.vue
+++ b/apps/demos/Demos/TabPanel/Templates/Vue/App.vue
@@ -7,8 +7,9 @@
       :loop="loop"
       :animation-enabled="animationEnabled"
       :swipe-enabled="swipeEnabled"
+      item-title-template="itemTitle"
     >
-      <template #title="{ data: company }">
+      <template #itemTitle="{ data: company }">
         <span>{{ company.CompanyName }}</span>
       </template>
       <template #item="{ data: company }">
diff --git a/apps/demos/Demos/TileView/Directions/Vue/App.vue b/apps/demos/Demos/TileView/Directions/Vue/App.vue
index 62094450614b..5dfdf246ca8d 100644
--- a/apps/demos/Demos/TileView/Directions/Vue/App.vue
+++ b/apps/demos/Demos/TileView/Directions/Vue/App.vue
@@ -17,6 +17,7 @@
       <div class="caption">Options</div>
       <div class="option">
         <span>Direction </span>
+        {{ " " }}
         <DxSelectBox
           v-model:value="direction"
           :input-attr="{ 'aria-label': 'Direction' }"
@@ -66,7 +67,7 @@ const itemMargin = 10;
 }
 
 .option > span {
-  width: 74px;
+  width: 70px;
   display: inline-block;
 }
 
diff --git a/apps/demos/Demos/Toast/Overview/description.md b/apps/demos/Demos/Toast/Overview/description.md
index 6742ae869fea..7ddcef51c620 100644
--- a/apps/demos/Demos/Toast/Overview/description.md
+++ b/apps/demos/Demos/Toast/Overview/description.md
@@ -1,7 +1,7 @@
 The Toast is a UI component that displays pop-up notifications. 
-<!--split-->
 
 When you need to display a notification, call the [notify(message, type, displayTime)](/Documentation/ApiReference/Common/Utils/ui/#notifymessage_type_displayTime) method with values for the [message](/Documentation/ApiReference/UI_Components/dxToast/Configuration/#message), [type](/Documentation/ApiReference/UI_Components/dxToast/Configuration/#type), and [displayTime](/Documentation/ApiReference/UI_Components/dxToast/Configuration/#displayTime) properties passed as arguments.
+<!--split-->
 
 You can specify one of the four predefined types of notifications, depending on the mood of the message:
 
diff --git a/apps/demos/Demos/Toast/Stack/description.md b/apps/demos/Demos/Toast/Stack/description.md
index 2779d231951b..27fefd66ffc9 100644
--- a/apps/demos/Demos/Toast/Stack/description.md
+++ b/apps/demos/Demos/Toast/Stack/description.md
@@ -1,7 +1,7 @@
 The DevExtreme Toast components can stack multiple notifications. Use the [notify(message, stack)](/Documentation/ApiReference/Common/Utils/ui/#notifymessage_stack) or [notify(options, stack)](/Documentation/ApiReference/Common/Utils/ui/#notifyoptions_stack) method to display stacked messages.
-<!--split-->
 
 These methods use a **stack** object that has the following structure: *{position, direction}*.
+<!--split-->
 
 ## Specify Position
 
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.html b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.html
index c6883fb3ac45..936bdc441629 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.html
+++ b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.html
@@ -10,13 +10,21 @@
     <dx-toolbar #toolbar [multiline]="true">
       <dxi-item location="before" widget="dxButton">
         <div *dxTemplate>
-          <dx-button icon="undo" (onClick)="onButtonClick('Undo')"></dx-button>
+          <dx-button
+            icon="undo"
+            [stylingMode]="stylingMode"
+            (onClick)="onButtonClick('Undo')"
+          ></dx-button>
         </div>
       </dxi-item>
 
       <dxi-item location="before" widget="dxButton">
         <div *dxTemplate>
-          <dx-button icon="redo" (onClick)="onButtonClick('Redo')"></dx-button>
+          <dx-button
+            icon="redo"
+            [stylingMode]="stylingMode"
+            (onClick)="onButtonClick('Redo')"
+          ></dx-button>
         </div>
       </dxi-item>
 
@@ -37,6 +45,7 @@
             displayExpr="text"
             keyExpr="size"
             itemTemplate="fontSizeTemplate"
+            [stylingMode]="stylingMode"
             [items]="fontSizes"
             [selectedItemKey]="fontSizes[2].size"
             [useSelectMode]="true"
@@ -56,6 +65,7 @@
             icon="indent"
             displayExpr="text"
             keyExpr="lineHeight"
+            [stylingMode]="stylingMode"
             [items]="lineHeights"
             [useSelectMode]="true"
             [selectedItemKey]="lineHeight"
@@ -176,6 +186,7 @@
           <dx-button
             icon="link"
             text="Link"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Link')"
           ></dx-button>
         </div>
@@ -191,6 +202,7 @@
           <dx-button
             icon="image"
             text="Add image"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Add Image')"
           ></dx-button>
         </div>
@@ -216,6 +228,7 @@
           <dx-button
             icon="clearformat"
             text="Clear formating"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Clear Formating')"
           ></dx-button>
         </div>
@@ -231,6 +244,7 @@
           <dx-button
             icon="codeblock"
             text="Code block"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Code Block')"
           ></dx-button>
         </div>
@@ -246,6 +260,7 @@
           <dx-button
             icon="blockquote"
             text="Blockquote"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Blockquote')"
           ></dx-button>
         </div>
@@ -266,6 +281,7 @@
           <dx-button
             icon="attach"
             text="Attach"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('Attach')"
           ></dx-button>
         </div>
@@ -276,6 +292,7 @@
           <dx-button
             icon="help"
             text="About"
+            [stylingMode]="stylingMode"
             (onClick)="onButtonClick('About')"
           ></dx-button>
         </div>
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
index 5ed704d33b80..3dc587e3368f 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Toolbar/Adaptability/Angular/app/app.component.ts
@@ -11,6 +11,7 @@ import {
   DxButtonGroupModule,
   DxCheckBoxModule,
 } from 'devextreme-angular';
+import themes from 'devextreme/ui/themes';
 import notify from 'devextreme/ui/notify';
 import {
   FontFamily,
@@ -36,6 +37,8 @@ if (!/localhost/.test(document.location.host)) {
 })
 
 export class AppComponent {
+  stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
+
   fontSizes: FontSize[] = this.service.getFontSizes();
 
   lineHeights: LineHeight[] = this.service.getLineHeights();
diff --git a/apps/demos/Demos/Toolbar/Adaptability/React/App.tsx b/apps/demos/Demos/Toolbar/Adaptability/React/App.tsx
index 686688d713e0..8d9dbf5fad7f 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/React/App.tsx
+++ b/apps/demos/Demos/Toolbar/Adaptability/React/App.tsx
@@ -6,6 +6,7 @@ import Resizable from 'devextreme-react/resizable';
 import CheckBox from 'devextreme-react/check-box';
 import DropDownButton, { DropDownButtonTypes } from 'devextreme-react/drop-down-button';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
+import themes from 'devextreme/ui/themes';
 import notify from 'devextreme/ui/notify';
 import 'devextreme/ui/select_box';
 import {
@@ -21,6 +22,7 @@ import {
   textStyleInputAttr,
 } from './data.ts';
 
+const stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
 const lineHeightDefault = lineHeights[1].lineHeight;
 const textAlignDefault = [textAlignItems[0].alignment];
 const fontSizeDefault = fontSizes[2].size;
@@ -177,11 +179,19 @@ function App() {
         >
           <Toolbar multiline={multiline}>
             <Item location="before">
-              <Button icon="undo" onClick={onUndoButtonClick}></Button>
+              <Button
+                icon="undo"
+                stylingMode={stylingMode}
+                onClick={onUndoButtonClick}
+              ></Button>
             </Item>
 
             <Item location="before">
-              <Button icon="redo" onClick={onRedoButtonClick}></Button>
+              <Button
+                icon="redo"
+                stylingMode={stylingMode}
+                onClick={onRedoButtonClick}
+              ></Button>
             </Item>
 
             <Item
@@ -198,6 +208,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="size"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={fontSizes}
                 selectedItemKey={fontSize}
                 itemRender={renderFontSize}
@@ -212,6 +223,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="lineHeight"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={lineHeights}
                 selectedItemKey={lineHeight}
                 onSelectionChanged={onLineHeightChanged}
@@ -303,6 +315,7 @@ function App() {
               <Button
                 icon="link"
                 text="Link"
+                stylingMode={stylingMode}
                 onClick={onLinkButtonClick}
               ></Button>
             </Item>
@@ -316,6 +329,7 @@ function App() {
               <Button
                 icon="image"
                 text="Add image"
+                stylingMode={stylingMode}
                 onClick={onAddImageButtonClick}
               ></Button>
             </Item>
@@ -337,6 +351,7 @@ function App() {
               <Button
                 icon="clearformat"
                 text="Clear formating"
+                stylingMode={stylingMode}
                 onClick={onClearButtonClick}
               ></Button>
             </Item>
@@ -350,6 +365,7 @@ function App() {
               <Button
                 icon="codeblock"
                 text="Code block"
+                stylingMode={stylingMode}
                 onClick={onCodeBlockButtonClick}
               ></Button>
             </Item>
@@ -363,6 +379,7 @@ function App() {
               <Button
                 icon="blockquote"
                 text="Blockquote"
+                stylingMode={stylingMode}
                 onClick={onQuoteButtonClick}
               ></Button>
             </Item>
@@ -379,6 +396,7 @@ function App() {
               <Button
                 icon="attach"
                 text="Attach"
+                stylingMode={stylingMode}
                 onClick={onAttachButtonClick}
               ></Button>
             </Item>
@@ -387,6 +405,7 @@ function App() {
               <Button
                 icon="help"
                 text="About"
+                stylingMode={stylingMode}
                 onClick={onAboutButtonClick}
               ></Button>
             </Item>
diff --git a/apps/demos/Demos/Toolbar/Adaptability/ReactJs/App.js b/apps/demos/Demos/Toolbar/Adaptability/ReactJs/App.js
index 93c6d48a85bc..e60dfdb7ef3e 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/ReactJs/App.js
+++ b/apps/demos/Demos/Toolbar/Adaptability/ReactJs/App.js
@@ -6,6 +6,7 @@ import Resizable from 'devextreme-react/resizable';
 import CheckBox from 'devextreme-react/check-box';
 import DropDownButton from 'devextreme-react/drop-down-button';
 import SelectBox from 'devextreme-react/select-box';
+import themes from 'devextreme/ui/themes';
 import notify from 'devextreme/ui/notify';
 import 'devextreme/ui/select_box';
 import {
@@ -21,6 +22,7 @@ import {
   textStyleInputAttr,
 } from './data.js';
 
+const stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
 const lineHeightDefault = lineHeights[1].lineHeight;
 const textAlignDefault = [textAlignItems[0].alignment];
 const fontSizeDefault = fontSizes[2].size;
@@ -149,6 +151,7 @@ function App() {
             <Item location="before">
               <Button
                 icon="undo"
+                stylingMode={stylingMode}
                 onClick={onUndoButtonClick}
               ></Button>
             </Item>
@@ -156,6 +159,7 @@ function App() {
             <Item location="before">
               <Button
                 icon="redo"
+                stylingMode={stylingMode}
                 onClick={onRedoButtonClick}
               ></Button>
             </Item>
@@ -177,6 +181,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="size"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={fontSizes}
                 selectedItemKey={fontSize}
                 itemRender={renderFontSize}
@@ -194,6 +199,7 @@ function App() {
                 displayExpr="text"
                 keyExpr="lineHeight"
                 useSelectMode={true}
+                stylingMode={stylingMode}
                 items={lineHeights}
                 selectedItemKey={lineHeight}
                 onSelectionChanged={onLineHeightChanged}
@@ -291,6 +297,7 @@ function App() {
               <Button
                 icon="link"
                 text="Link"
+                stylingMode={stylingMode}
                 onClick={onLinkButtonClick}
               ></Button>
             </Item>
@@ -304,6 +311,7 @@ function App() {
               <Button
                 icon="image"
                 text="Add image"
+                stylingMode={stylingMode}
                 onClick={onAddImageButtonClick}
               ></Button>
             </Item>
@@ -325,6 +333,7 @@ function App() {
               <Button
                 icon="clearformat"
                 text="Clear formating"
+                stylingMode={stylingMode}
                 onClick={onClearButtonClick}
               ></Button>
             </Item>
@@ -338,6 +347,7 @@ function App() {
               <Button
                 icon="codeblock"
                 text="Code block"
+                stylingMode={stylingMode}
                 onClick={onCodeBlockButtonClick}
               ></Button>
             </Item>
@@ -351,6 +361,7 @@ function App() {
               <Button
                 icon="blockquote"
                 text="Blockquote"
+                stylingMode={stylingMode}
                 onClick={onQuoteButtonClick}
               ></Button>
             </Item>
@@ -371,6 +382,7 @@ function App() {
               <Button
                 icon="attach"
                 text="Attach"
+                stylingMode={stylingMode}
                 onClick={onAttachButtonClick}
               ></Button>
             </Item>
@@ -383,6 +395,7 @@ function App() {
               <Button
                 icon="help"
                 text="About"
+                stylingMode={stylingMode}
                 onClick={onAboutButtonClick}
               ></Button>
             </Item>
diff --git a/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue b/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue
index 80cd4d535242..34ccaef16f06 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue
+++ b/apps/demos/Demos/Toolbar/Adaptability/Vue/App.vue
@@ -16,6 +16,7 @@
           >
             <DxButton
               icon="undo"
+              :styling-mode="stylingMode"
               :on-click="onUndoButtonClick"
             />
           </DxItem>
@@ -26,6 +27,7 @@
           >
             <DxButton
               icon="redo"
+              :styling-mode="stylingMode"
               :on-click="onRedoButtonClick"
             />
           </DxItem>
@@ -46,6 +48,7 @@
               display-expr="text"
               key-expr="size"
               item-template="fontSizeTemplate"
+              :styling-mode="stylingMode"
               :use-select-mode="true"
               :items="fontSizes"
               :selected-item-key="fontSize"
@@ -68,6 +71,7 @@
               icon="indent"
               display-expr="text"
               key-expr="lineHeight"
+              :styling-mode="stylingMode"
               :use-select-mode="true"
               :items="lineHeights"
               :selected-item-key="lineHeight"
@@ -165,6 +169,7 @@
             <DxButton
               icon="link"
               text="Link"
+              :styling-mode="stylingMode"
               :on-click="onLinkButtonClick"
             />
           </DxItem>
@@ -178,6 +183,7 @@
             <DxButton
               icon="image"
               text="Add image"
+              :styling-mode="stylingMode"
               :on-click="onAddImageButtonClick"
             />
           </DxItem>
@@ -198,6 +204,7 @@
             <DxButton
               icon="clearformat"
               text="Clear formating"
+              :styling-mode="stylingMode"
               :on-click="onClearButtonClick"
             />
           </DxItem>
@@ -211,6 +218,7 @@
             <DxButton
               icon="codeblock"
               text="Code block"
+              :styling-mode="stylingMode"
               :on-click="onCodeBlockButtonClick"
             />
           </DxItem>
@@ -224,6 +232,7 @@
             <DxButton
               icon="blockquote"
               text="Blockquote"
+              :styling-mode="stylingMode"
               :on-click="onQuoteButtonClick"
             />
           </DxItem>
@@ -243,6 +252,7 @@
             <DxButton
               icon="attach"
               text="Attach"
+              :styling-mode="stylingMode"
               :on-click="onAttachButtonClick"
             />
           </DxItem>
@@ -255,6 +265,7 @@
             <DxButton
               icon="help"
               text="About"
+              :styling-mode="stylingMode"
               :on-click="onAboutButtonClick"
             />
           </DxItem>
@@ -311,6 +322,7 @@ import DxButtonGroup from 'devextreme-vue/button-group';
 import DxResizable from 'devextreme-vue/resizable';
 import DxDropDownButton from 'devextreme-vue/drop-down-button';
 import DxSelectBox from 'devextreme-vue/select-box';
+import themes from 'devextreme/ui/themes';
 import notify from 'devextreme/ui/notify';
 import {
   fontSizes,
@@ -324,6 +336,7 @@ import {
 } from './data.ts';
 import 'devextreme/ui/select_box';
 
+const stylingMode = !themes.current().startsWith('generic') ? 'text' : undefined;
 const lineHeightDefault = lineHeights[1].lineHeight;
 const textAlignDefault = [textAlignItems[0].alignment];
 const fontSizeDefault = fontSizes[2].size;
@@ -451,4 +464,8 @@ function onFontFamilyClick() {
   height: 1px;
   border-bottom: 1px solid #ddd;
 }
+
+.dx-button-content {
+  display: flex;
+}
 </style>
diff --git a/apps/demos/Demos/Toolbar/Adaptability/description.md b/apps/demos/Demos/Toolbar/Adaptability/description.md
index 2b2b259fe0be..26c3a5075637 100644
--- a/apps/demos/Demos/Toolbar/Adaptability/description.md
+++ b/apps/demos/Demos/Toolbar/Adaptability/description.md
@@ -1,7 +1,7 @@
 This demo demonstrates how the DevExtreme Toolbar component can adapt itself to different screen widths.
-<!--split-->
 
-If you would like to learn more about our feature-complete Toolbar component, please refer to the following tutorial: [Getting Started with Toolbar](/Documentation/Guide/UI_Components/Toolbar/Getting_Started_with_Toolbar/). 
+If you would like to learn more about our feature-complete Toolbar component, please refer to the following tutorial: [Getting Started with Toolbar](/Documentation/Guide/UI_Components/Toolbar/Getting_Started_with_Toolbar/).
+<!--split-->
 
 In this demo, you can drag our Toolbar container's resizing handle to visualize resize operations and view our rendering implementation on different screens. When used in single-line mode (default), our Toolbar does not wrap content and displays an overflow menu for items that do not fit within the container. Use the [locateInMenu](/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/#locateInMenu) property to control whether items appear in the overflow menu.
 
diff --git a/apps/demos/Demos/TreeList/Adaptability/description.md b/apps/demos/Demos/TreeList/Adaptability/description.md
index 316b2964bf8c..8fd238c60187 100644
--- a/apps/demos/Demos/TreeList/Adaptability/description.md
+++ b/apps/demos/Demos/TreeList/Adaptability/description.md
@@ -1,6 +1,6 @@
 The TreeList automatically adapts its layout to screens with different sizes. In this demo, you can switch between horizontal and vertical screen orientations. If columns do not fit the selected orientation, the TreeList hides them one by one, starting with the rightmost column. Information from the hidden columns is still available in adaptive detail rows.
-<!--split-->
 
 To enable this feature, set the [columnHidingEnabled](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#columnHidingEnabled) property to **true**.
+<!--split-->
 
-The TreeList hides columns based on their hiding priorities. Columns with lower priority values are hidden first. You can use the **columns[]**.[hidingPriority](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#hidingPriority) property to specify custom hiding priorities for those columns that you want to hide. Other columns will never be hidden.
+The TreeList hides columns based on their hiding priorities. Columns with lower priority values are hidden first. You can use the **columns[]**.[hidingPriority](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#hidingPriority) property to specify custom hiding priorities for those columns that you want to hide. Other columns will never be hidden.
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/ColumnFixing/description.md b/apps/demos/Demos/TreeList/ColumnFixing/description.md
index 0325e8307316..2d2e626a4cca 100644
--- a/apps/demos/Demos/TreeList/ColumnFixing/description.md
+++ b/apps/demos/Demos/TreeList/ColumnFixing/description.md
@@ -1,6 +1,6 @@
 A horizontal scrollbar appears when the total width of all columns exceeds the TreeList component's width. The component allows users to fix individual columns at the right or left border so that they are always visible. To enable this feature, set the **columnFixing**.[enabled](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columnFixing/#enabled) property to **true**.
-<!--split-->
 
 To fix or unfix a column, users should right-click the column's header and select the corresponding operation in the context menu. To prevent users from fixing or unfixing a column, set its [allowFixing](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowFixing) property to **false**.
+<!--split-->
 
-To fix a column programmatically, set its [fixed](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixed) property to **true**. The default position is the TreeList's left, but you can set the column's [fixedPosition](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixedPosition) property to *"right"*.
+To fix a column programmatically, set its [fixed](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixed) property to **true**. The default position is the TreeList's left, but you can set the column's [fixedPosition](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixedPosition) property to *"right"*.
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/description.md b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/description.md
index 3da28cbeaf93..1f5cf8ef0b12 100644
--- a/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/description.md
+++ b/apps/demos/Demos/TreeList/CustomizeKeyboardNavigation/description.md
@@ -1,5 +1,4 @@
-The following properties customize keyboard navigation.
-<!--split-->
+The following properties customize keyboard navigation:
  
 - [enterKeyAction](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/keyboardNavigation/#enterKeyAction)    
 Specifies the TreeList's actions when a user presses Enter key: 
@@ -17,3 +16,4 @@ Specifies the direction in which to move focus when a user presses Enter:
 Specifies whether to start entering a new cell value on a key press.
 
 In this demo, you can use the controls under the TreeList to change any of these properties.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/FilterModes/description.md b/apps/demos/Demos/TreeList/FilterModes/description.md
index d4cd1e69a066..08d0e6c93d69 100644
--- a/apps/demos/Demos/TreeList/FilterModes/description.md
+++ b/apps/demos/Demos/TreeList/FilterModes/description.md
@@ -1,5 +1,4 @@
 Filter and search results depend on the [filterMode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#filterMode) property.
-<!--split-->
 
 The TreeList supports the following modes:
  
@@ -10,4 +9,5 @@ The TreeList supports the following modes:
   The results include rows that meet the filter condition and their ancestors.
 
 - *"fullBranch"*    
-  The results include rows that meet the filter condition and their ancestors and descendants.
\ No newline at end of file
+  The results include rows that meet the filter condition and their ancestors and descendants.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/FilterPanel/description.md b/apps/demos/Demos/TreeList/FilterPanel/description.md
index 7ec392770378..c7b80ff7007b 100644
--- a/apps/demos/Demos/TreeList/FilterPanel/description.md
+++ b/apps/demos/Demos/TreeList/FilterPanel/description.md
@@ -1,8 +1,8 @@
 The [filterPanel](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/filterPanel/) displays the combined filter in the bottom of the TreeList. This filter is stored in the [filterValue](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#filterValue) property and consists of conditions that a user applied in the following UI elements: [filter row](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/filterRow/), [header filter](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/headerFilter/), [filterBuilder](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#filterBuilder). Users can deselect the checkbox in the filter panel to temporarily deactivate the current filter.
-<!--split-->
 
 To display the filter panel, set the **filterPanel**.[visible](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/filterPanel/#visible) property to **true**. 
 
 A click on the combined filter calls the integrated filter builder. You can configure it in the [filterBuilder](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#filterBuilder) object.
+<!--split-->
 
-TreeList uses the DevExtreme [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) component to display the integrated filter builder. The Popup's default configuration is defined automatically, but you can change it in the [filterBuilderPopup](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#filterBuilderPopup) object.
+TreeList uses the DevExtreme [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) component to display the integrated filter builder. The Popup's default configuration is defined automatically, but you can change it in the [filterBuilderPopup](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#filterBuilderPopup) object.
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/FocusedRow/description.md b/apps/demos/Demos/TreeList/FocusedRow/description.md
index 138db954e924..063058861ad7 100644
--- a/apps/demos/Demos/TreeList/FocusedRow/description.md
+++ b/apps/demos/Demos/TreeList/FocusedRow/description.md
@@ -1,8 +1,8 @@
 The TreeList component can highlight the focused row. To enable this feature, set the [focusedRowEnabled](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#focusedRowEnabled) property to **true**.
-<!--split-->
 
 To focus a row programmatically, specify the [focusedRowKey](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#focusedRowKey) property. The TreeList automatically scrolls to the focused row. You can set the [autoNavigateToFocusedRow](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#autoNavigateToFocusedRow) property to **false** to deactivate this behavior. In the UI, users can click a row to focus it. The focused row is saved in the TreeList's [state](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/stateStoring/).
 
 You can use the [onFocusedRowChanging](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#onFocusedRowChanging) and [onFocusedRowChanged](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#onFocusedRowChanged) properties to specify a custom function that is executed before or after a row is focused.
+<!--split-->
 
-In this demo, the row with the `45` key is focused initially. You can specify the `focusedRowKey` property via the input field below the TreeList. The **onFocusedRowChanged** function is used to display additional information below the component when the focused row changes.
+In this demo, the row with the `45` key is focused initially. You can specify the `focusedRowKey` property via the input field below the TreeList. The **onFocusedRowChanged** function is used to display additional information below the component when the focused row changes.
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/FormEditing/description.md b/apps/demos/Demos/TreeList/FormEditing/description.md
index 5b9ae35b97e7..688653a67d53 100644
--- a/apps/demos/Demos/TreeList/FormEditing/description.md
+++ b/apps/demos/Demos/TreeList/FormEditing/description.md
@@ -1,9 +1,9 @@
 The TreeList can use the [Form](/Documentation/ApiReference/UI_Components/dxForm/) component to arrange cell editors when users modify a row. The Form allows users to edit values from [visible and hidden](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#visible) columns.
-<!--split-->
 
 To enable form edit mode, configure the following properties:
 - Set **editing**.[mode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#mode) to *"form"*
 - Assign **true** to the [editing](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/) object's [allowAdding](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowAdding), [allowUpdating](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowUpdating), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowDeleting) properties.
+<!--split-->
 
 A column's default editor is defined automatically based on this column's [dataType](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#dataType). To customize this editor or replace it with another editor, use the column's [formItem](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#formItem) object. For information on settings that you can define in the **formItem** object, refer to the [SimpleItem](/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/) help topic.
 
@@ -17,4 +17,4 @@ Populates form editors of a new row with default values. In this demo, **onInitN
 - [onEditorPreparing](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#onEditorPreparing)         
 Customizes form editors. In this demo, this handler forbids users to edit the `Head` value of John Heart.
 
-Refer to the following help topic to see the full list of the events that edit operations raise: [Editing Events](/Documentation/Guide/UI_Components/TreeList/Editing/#Events).
+Refer to the following help topic to see the full list of the events that edit operations raise: [Editing Events](/Documentation/Guide/UI_Components/TreeList/Editing/#Events).
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/KeyboardNavigation/description.md b/apps/demos/Demos/TreeList/KeyboardNavigation/description.md
index bcdc8574fc3b..ca84bb3d4a8b 100644
--- a/apps/demos/Demos/TreeList/KeyboardNavigation/description.md
+++ b/apps/demos/Demos/TreeList/KeyboardNavigation/description.md
@@ -1,5 +1,4 @@
-In this demo, you can use the following keys and key combinations to interact with the TreeList.
-<!--split-->
+In this demo, you can use the following keys and key combinations to interact with the TreeList:
 
 - **Enter**             
 Execute an action on a focused element.
@@ -12,3 +11,4 @@ Navigate between a column header, filter row, data area, filter panel, and pager
 
 - **Ctrl** + **&larr;** or **Ctrl** + **&rarr;**             
 Expand/collapse the focused row.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/MultipleRowSelection/description.md b/apps/demos/Demos/TreeList/MultipleRowSelection/description.md
index c1465e77ee4d..d43a0d612b75 100644
--- a/apps/demos/Demos/TreeList/MultipleRowSelection/description.md
+++ b/apps/demos/Demos/TreeList/MultipleRowSelection/description.md
@@ -1,8 +1,8 @@
 This demo enables multiple selection [mode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/selection/#mode). This mode allows users to press keyboard shortcuts or click checkboxes to select multiple rows.
-<!--split-->
 
 The checkbox in the leftmost column header selects all rows. You can set the [allowSelectAll](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/selection/#allowSelectAll) property to **false** to disable the checkbox.
 
 Multiple selection mode is non-recursive (when a row is selected, nested rows remain unselected). If users should select rows recursively, set the **selection**.[recursive](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/selection/#recursive) property to **true**. In this demo, you can use the checkbox under the TreeList component to toggle this property.
+<!--split-->
 
-TreeList includes an API to select multiple rows. For details, refer to the following article: [Selection API](/Documentation/Guide/UI_Components/TreeList/Selection/#API).
+TreeList includes an API to select multiple rows. For details, refer to the following article: [Selection API](/Documentation/Guide/UI_Components/TreeList/Selection/#API).
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/MultipleSorting/description.md b/apps/demos/Demos/TreeList/MultipleSorting/description.md
index 535587cb9f4a..c5868145ff7b 100644
--- a/apps/demos/Demos/TreeList/MultipleSorting/description.md
+++ b/apps/demos/Demos/TreeList/MultipleSorting/description.md
@@ -1,11 +1,11 @@
 The TreeList component can sort values by a single or multiple columns. Use the **sorting**.[mode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/sorting/#mode) property to specify the sort mode.
-<!--split-->
 
 - **Single sort mode**       
 A user can click the column header to sort by this column and click it again to change the sort order. An arrow icon in the column's header indicates the sort order.
 
 - **Multiple sort mode**         
 A user can hold the **Shift** key and click column headers in the order the user wants to apply sorting. A number in the column's header indicates the sort index. To cancel a column's sort settings, a user should hold the **Ctrl** key and click the column header.
+<!--split-->
 
 A user can also apply or cancel sort settings in the column header's context menu. To disallow a user to sort by a particular column, set the column's [allowSorting](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowSorting) property to **false**.
 
diff --git a/apps/demos/Demos/TreeList/Overview/Angular/description.md b/apps/demos/Demos/TreeList/Overview/Angular/description.md
index 39be13322d81..5aa7c56de760 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/description.md
+++ b/apps/demos/Demos/TreeList/Overview/Angular/description.md
@@ -1,4 +1,4 @@
 DevExtreme Angular Tree List is a client-side control for displaying hierarchical data. You can use it as an Angular component. It is so flexible that you do not need to feed it hierarchical data structures. Even with a collection of linked plain objects, the Tree List can still build a tree hierarchy. It supports native Angular features as well: AOT compilation, declarative configuration, TypeScript compile-time checking, and more.
-<!--split-->
 
-To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
\ No newline at end of file
+To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/Overview/React/description.md b/apps/demos/Demos/TreeList/Overview/React/description.md
index 1583b4fee6c6..c18bef9f0777 100644
--- a/apps/demos/Demos/TreeList/Overview/React/description.md
+++ b/apps/demos/Demos/TreeList/Overview/React/description.md
@@ -1,4 +1,4 @@
 DevExtreme React Tree List is a UI component that displays hierarchical data in a table. Its main features include robust data layer, multiple editing modes, client-side data validation, numerous filtering and searching properties, and many more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
-To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
\ No newline at end of file
+To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/description.md b/apps/demos/Demos/TreeList/Overview/ReactJs/description.md
index 1583b4fee6c6..c18bef9f0777 100644
--- a/apps/demos/Demos/TreeList/Overview/ReactJs/description.md
+++ b/apps/demos/Demos/TreeList/Overview/ReactJs/description.md
@@ -1,4 +1,4 @@
 DevExtreme React Tree List is a UI component that displays hierarchical data in a table. Its main features include robust data layer, multiple editing modes, client-side data validation, numerous filtering and searching properties, and many more. [Learn more about DevExtreme React components](/Documentation/Guide/React_Components/DevExtreme_React_Components/).
-<!--split-->
 
-To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
\ No newline at end of file
+To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/Overview/jQuery/description.md b/apps/demos/Demos/TreeList/Overview/jQuery/description.md
index 710c067fc1dd..89eec05cdf56 100644
--- a/apps/demos/Demos/TreeList/Overview/jQuery/description.md
+++ b/apps/demos/Demos/TreeList/Overview/jQuery/description.md
@@ -1,4 +1,4 @@
 DevExtreme JavaScript TreeList control is a cross-breed of a tree view and data grid. This control is available as a jQuery plugin and can be bound to data from local arrays, JSON files, Web API and OData services, or custom remote services. This demo shows a slightly customized TreeList with selection, filtering, and column rearranging enabled. Move to other demos to explore more TreeList features, like sorting, data editing, adaptability, etc.
-<!--split-->
 
-To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
\ No newline at end of file
+To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: [Getting Started with TreeList](/Documentation/Guide/UI_Components/TreeList/Getting_Started_with_TreeList/).
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/PopupEditing/description.md b/apps/demos/Demos/TreeList/PopupEditing/description.md
index 4455937c3c7c..b81bfd024126 100644
--- a/apps/demos/Demos/TreeList/PopupEditing/description.md
+++ b/apps/demos/Demos/TreeList/PopupEditing/description.md
@@ -1,8 +1,8 @@
 TreeList can display a popup edit form. The form can include any fields from the bound data source, regardless of whether the corresponding column is visible in the grid (see the `Head` column).
-<!--split-->
 
 To enable this behavior in your application, do the following:
 - Set **editing**.[mode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#mode) to *"popup"*.
 - Set the [editing](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/) object's [allowUpdating](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowUpdating), [allowAdding](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowAdding), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowDeleting) properties to **true**.
+<!--split-->
 
 TreeList uses the DevExtreme [Form](/Documentation/ApiReference/UI_Components/dxForm/) and [Popup](/Documentation/ApiReference/UI_Components/dxPopup/) components to display the popup form. Their default configurations are defined automatically. If these configurations do not meet your requirements, you can redefine them in the **editing** object's [form](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#form) and [popup](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#popup) properties. For more information about this edit mode's limitations, refer to the descriptions of these properties.
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/Reordering/description.md b/apps/demos/Demos/TreeList/Reordering/description.md
index 99c98caf46e4..5e96056c12c1 100644
--- a/apps/demos/Demos/TreeList/Reordering/description.md
+++ b/apps/demos/Demos/TreeList/Reordering/description.md
@@ -1,4 +1,4 @@
 TreeList columns have the same order as fields in data objects. You can use the [columns](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/) array to specify a different order. To reorder a column at runtime, change its [visibleIndex](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#visibleIndex) property.
-<!--split-->
 
 Users can drag and drop column headers to reorder columns. To enable this feature, set the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#allowColumnReordering) property to **true**. If you do not want users to drag a specific column, disable its [allowReordering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowReordering) property. In this demo, users cannot drag the Full Name column.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/RowEditing/description.md b/apps/demos/Demos/TreeList/RowEditing/description.md
index 635e4b6e5912..3312ee24832a 100644
--- a/apps/demos/Demos/TreeList/RowEditing/description.md
+++ b/apps/demos/Demos/TreeList/RowEditing/description.md
@@ -1,7 +1,7 @@
 The TreeList allows users to edit data in multiple modes. This demo shows the *"row"* edit mode. To edit a row, click its "Edit" button. Only one row can be in the edit state at a time.
-<!--split-->
 
 To enable row edit mode, set the [mode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#mode) property to *"row"* and enable the [editing](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#mode) object's [allowUpdating](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowUpdating), [allowAdding](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowAdding), and [allowDeleting](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/editing/#allowDeleting) properties to allow edit operations.
+<!--split-->
 
 Buttons for allowed edit operations are displayed in an edit column. To customize it programmatically, declare a column of the `buttons` [type](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#type) and specify the available buttons. In this demo, the `buttons` column is used to hide the "Add" button in each row. See the following help topic for more details on edit column customization: [Customize the Edit Column](/Documentation/Guide/UI_Components/TreeList/Columns/Column_Types/Command_Columns/#Customize_the_Edit_Column).
 
diff --git a/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/description.md b/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/description.md
index ea7831897b8f..f3dabc67d114 100644
--- a/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/description.md
+++ b/apps/demos/Demos/TreeList/SimpleArrayHierarchicalStructure/description.md
@@ -1,5 +1,4 @@
-To bind the TreeList to a hierarchical array, do the following.
-<!--split-->
+To bind the TreeList to a hierarchical array, do the following:
 
 1. Assign the array to the [dataSource](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#dataSource) property.
 
@@ -8,3 +7,4 @@ To bind the TreeList to a hierarchical array, do the following.
 3. Use the [itemsExpr](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#itemsExpr) property to specify the data field that contains nested items.
 
 4. If each data item has a Boolean field that specifies whether this data item nests other items, assign the field's name to the [hasItemsExpr](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#hasItemsExpr) property. The TreeList uses this information to render the expand button. This is required only if the UI component is bound to a remote data source.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/description.md b/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/description.md
index 1dd80418bad1..120ea6dce514 100644
--- a/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/description.md
+++ b/apps/demos/Demos/TreeList/SimpleArrayPlainStructure/description.md
@@ -1,5 +1,4 @@
-To bind the TreeList to an array that contains plain-structured data objects, do the following.
-<!--split-->
+To bind the TreeList to an array that contains plain-structured data objects, do the following:
 
 1. Assign the array to the [dataSource](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#dataSource) property.
 
@@ -8,5 +7,6 @@ To bind the TreeList to an array that contains plain-structured data objects, do
 3. Specify the root node's key in the [rootValue](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#rootValue) property if it is not 0.
 
 4. If each data item has a Boolean field that specifies whether this data item nests other items, assign the field's name to the [hasItemsExpr](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#hasItemsExpr) property. The TreeList uses this information to render the expand button. This is required only if the UI component is bound to a remote data source.
+<!--split-->
 
-The TreeList builds a tree from plain data objects based on the specified properties.
+The TreeList builds a tree from plain data objects based on the specified properties.
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/UsingFilterRow/description.md b/apps/demos/Demos/TreeList/UsingFilterRow/description.md
index 3e79b0c4bb49..dc00612e6ea7 100644
--- a/apps/demos/Demos/TreeList/UsingFilterRow/description.md
+++ b/apps/demos/Demos/TreeList/UsingFilterRow/description.md
@@ -1,5 +1,4 @@
 The filter row allows users to enter a value for each column and filter grid data by those values. To display the filter row, set the **filterRow**.[visible](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/filterRow/#visible) property to **true**. If you need to disable a filter row cell for a specific column, set the column's [allowFiltering](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowFiltering) property to **false**.
-<!--split-->
 
 Depending on a column's [dataType](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#dataType), its filter row cell contains different editors:
 
@@ -25,9 +24,10 @@ Depending on a column's [dataType](/Documentation/ApiReference/UI_Components/dxT
         <td>Date and time picker</td>
     </tr> 
 </table>
+<!--split-->
 
 In this demo, the Hire Date column's filter row cell contains a date picker. Other filter row cells contain text boxes.
 
 The TreeList supports a specific set of [filterOperations](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#filterOperations) for each data type. Users can click a magnifying glass icon in each filter row cell to specify the [selectedFilterOperation](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#selectedFilterOperation).
 
-A column's filter value is stored in the [filterValue](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#filterValue) property. You can use this property to set the filter value in code.
+A column's filter value is stored in the [filterValue](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#filterValue) property. You can use this property to set the filter value in code.
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeList/UsingSearchPanel/description.md b/apps/demos/Demos/TreeList/UsingSearchPanel/description.md
index 63f7753d6209..5ae663322cd2 100644
--- a/apps/demos/Demos/TreeList/UsingSearchPanel/description.md
+++ b/apps/demos/Demos/TreeList/UsingSearchPanel/description.md
@@ -1,7 +1,7 @@
 If you want users to search data, display the [searchPanel](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/searchPanel/). Set its [visible](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/searchPanel/#visible) property to **true**.
-<!--split-->
 
-The TreeList searches in all columns, regardless of whether they are [visible](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#visible) or hidden. To exclude hidden columns from search, enable the **searchPanel**.[searchVisibleColumnsOnly](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/searchPanel/#searchVisibleColumnsOnly) property. You can also exclude any specific column. To do this, set its [allowSearch](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowSearch) property to **false**
+The TreeList searches in all columns, regardless of whether they are [visible](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#visible) or hidden. To exclude hidden columns from search, enable the **searchPanel**.[searchVisibleColumnsOnly](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/searchPanel/#searchVisibleColumnsOnly) property. You can also exclude any specific column. To do this, set its [allowSearch](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowSearch) property to **false**.
+<!--split-->
 
 Numeric, date, and Boolean values match only if they are equal to the search query. String values match if they contain the query. Search for strings is case-insensitive.
 
diff --git a/apps/demos/Demos/TreeList/WebAPIService/description.md b/apps/demos/Demos/TreeList/WebAPIService/description.md
index 25f2333cfcf5..cccceccbfc98 100644
--- a/apps/demos/Demos/TreeList/WebAPIService/description.md
+++ b/apps/demos/Demos/TreeList/WebAPIService/description.md
@@ -1,7 +1,7 @@
 To access a Web API service from the client, use the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/client-side-with-jquery.md#api-reference" target="_blank">createStore</a> method from the <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data#devextreme-aspnet-data" target="_blank">DevExtreme.AspNet.Data</a> extension. This extension also allows you to process data for DevExtreme components <a href="https://github.com/DevExpress/DevExtreme.AspNet.Data/blob/master/docs/server-side-configuration.md" target="_blank">on the server</a>. The server-side implementation is available under the `TreeListTasksController.cs` tab in the [ASP.NET MVC](https://demos.devexpress.com/ASPNetMvc/Demo/TreeList/WebAPIService) and [ASP.NET Core](https://demos.devexpress.com/ASPNetCore/Demo/TreeList/WebAPIService/) versions of this demo.
-<!--split-->
  
 To notify the TreeList that data is processed on the server, set the [remoteOperations](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/remoteOperations/) property to **true**.
+<!--split-->
 
 ### A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
 
diff --git a/apps/demos/Demos/TreeView/ContextMenuIntegration/description.md b/apps/demos/Demos/TreeView/ContextMenuIntegration/description.md
index 30ef44dccef9..8fcd113ee345 100644
--- a/apps/demos/Demos/TreeView/ContextMenuIntegration/description.md
+++ b/apps/demos/Demos/TreeView/ContextMenuIntegration/description.md
@@ -1,4 +1,4 @@
 To display a DevExtreme [ContextMenu](/Demos/WidgetsGallery/Demo/ContextMenu/Basics/) when users right-click TreeView nodes, specify the nodes as the menu's target elements. To do this, set the menu's [target](/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration/#target) property to a CSS selector. Since all TreeView nodes use the `dx-treeview-item` class, you can use this class' selector, as shown in this demo.
-<!--split-->
 
-You can control each command's enabled state depending on the node where users invoked the context menu. Implement the TreeView's [onItemContextMenu](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#onItemContextMenu) function; in it, set the [disabled](/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration/items/#disabled) property to **true** for required commands.
\ No newline at end of file
+You can control each command's enabled state depending on the node where users invoked the context menu. Implement the TreeView's [onItemContextMenu](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#onItemContextMenu) function; in it, set the [disabled](/Documentation/ApiReference/UI_Components/dxContextMenu/Configuration/items/#disabled) property to **true** for required commands.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeView/LoadDataOnDemand/description.md b/apps/demos/Demos/TreeView/LoadDataOnDemand/description.md
index f9eeafaca18f..bf9945eb1688 100644
--- a/apps/demos/Demos/TreeView/LoadDataOnDemand/description.md
+++ b/apps/demos/Demos/TreeView/LoadDataOnDemand/description.md
@@ -1,4 +1,4 @@
 You can use the [createChildren](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#createChildren) function to specify custom logic to load data. This function is called each time a user expands a node that was not expanded before. The node's identifier is passed to the function as an argument. Send this identifier to the data service that should return data for child nodes.
-<!--split-->
 
 As an alternative, you can enable [virtual mode](/Demos/WidgetsGallery/Demo/TreeView/VirtualMode/) to use the default load logic.
+<!--split-->
\ No newline at end of file
diff --git a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/description.md b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/description.md
index 7900313ea519..89e24a7dd239 100644
--- a/apps/demos/Demos/TreeView/TreeViewWithSearchBar/description.md
+++ b/apps/demos/Demos/TreeView/TreeViewWithSearchBar/description.md
@@ -1,11 +1,11 @@
 To add a search bar to the TreeView and customize the search functionality, do the following:
 
 - Set the [searchEnabled](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#searchEnabled) property to **true**.
-<!--split-->
 
 - Use the [searchMode](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#searchMode) property to specify whether items should contain (default), start with, or match the search string. In this example, you can switch between search modes in the drop-down menu.
 
-- Configure the [searchExpr](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#searchExpr) property to specify custom search fields. The default search field is [text](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/items/#text). 
+- Configure the [searchExpr](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#searchExpr) property to specify custom search fields. The default search field is [text](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/items/#text).
+<!--split-->
 
 The TreeView uses the TextBox component as a search bar. To customize it, specify [TextBox properties](/Documentation/ApiReference/UI_Components/dxTextBox/Configuration/) in the [searchEditorOptions](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#searchEditorOptions) object.
 
diff --git a/apps/demos/Demos/TreeView/VirtualMode/description.md b/apps/demos/Demos/TreeView/VirtualMode/description.md
index 7fb8885379f8..4e891f828f4c 100644
--- a/apps/demos/Demos/TreeView/VirtualMode/description.md
+++ b/apps/demos/Demos/TreeView/VirtualMode/description.md
@@ -1,7 +1,7 @@
 In virtual mode, the TreeView loads a node's children when the node is expanded for the first time. This enhances performance on large datasets.
-<!--split-->
 
 To enable this feature, set the [virtualModeEnabled](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#virtualModeEnabled) property to **true**. Note that this mode is only available when the TreeView's [dataStructure](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/#dataStructure) is plain.
+<!--split-->
 
 When the data source is remote, the TreeView requests data for each expanded node. To prevent this for nodes that do not nest others, set the [hasItems](/Documentation/ApiReference/UI_Components/dxTreeView/Configuration/items/#hasItems) field to **false** for the corresponding data objects.
 
diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/description.md b/apps/demos/Demos/VectorMap/ColorsCustomization/description.md
index 964c79c68a69..a1e16ecf758a 100644
--- a/apps/demos/Demos/VectorMap/ColorsCustomization/description.md
+++ b/apps/demos/Demos/VectorMap/ColorsCustomization/description.md
@@ -1,6 +1,4 @@
-This demo shows how to&nbsp;color different map elements. The map represented here indicates the top ten largest countries in&nbsp;the world by&nbsp;means of&nbsp;colors. These colors are assigned to&nbsp;the map areas using the **customize** callback function of&nbsp;the **layers** object. Moreover, when one of&nbsp;the areas is&nbsp;selected or&nbsp;hovered over, its color changes to&nbsp;those specified by&nbsp;the **selectedColor** and **hoveredColor** properties.
+This demo shows how to color different map elements. The map represented here indicates the top ten largest countries in the world by means of colors. These colors are assigned to the map areas using the **customize** callback function of the **layers** object. Moreover, when one of the areas is selected or hovered over, its color changes to those specified by the **selectedColor** and **hoveredColor** properties.
 <!--split-->
 
-
-
-Tooltips for the map areas representing the largest countries are customized as&nbsp;well. Using the **tooltip**&nbsp;| **customizeTooltip** callback function, they are colored identical to&nbsp;the areas themselves and display the total area of&nbsp;the country.
\ No newline at end of file
+Tooltips for the map areas representing the largest countries are customized as well. Using the **tooltip** | **customizeTooltip** callback function, they are colored identical to the areas themselves and display the total area of the country.
\ No newline at end of file
diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/description.md b/apps/demos/Demos/VectorMap/CustomAnnotations/description.md
index dc86f96bac8e..ec1f46166423 100644
--- a/apps/demos/Demos/VectorMap/CustomAnnotations/description.md
+++ b/apps/demos/Demos/VectorMap/CustomAnnotations/description.md
@@ -1,10 +1,10 @@
 Annotations are containers for images, text blocks, and custom content. By using annotations, you can display additional information to your end users and improve the readability of data visualized within your app.
-<!--split-->
 
 To create annotations, populate the VectorMap's [annotations](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/annotations/) array. Each object in the array configures an individual annotation. To specify settings for all annotations, use the [commonAnnotationSettings](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/commonAnnotationSettings/) object. Individual settings take precedence over common settings.
+<!--split-->
 
 You can set each annotation [type](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/annotations/#type) property to *"text"*, *"image"*, or *"custom"*. In this demo, annotation type has been set to *"custom"*.
 
 Custom annotations require that you specify your own display [template](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/annotations/#template) in SVG format. As you can see in the demo code, you can access annotation data within template markup.
 
-For more information on annotation settings, refer to the [annotations[]](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/annotations/) help topic.
+For more information on annotation settings, refer to the [annotations[]](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/annotations/) help topic.
\ No newline at end of file
diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/description.md b/apps/demos/Demos/VectorMap/DynamicViewport/description.md
index 4d11caf72251..c6909d65d91e 100644
--- a/apps/demos/Demos/VectorMap/DynamicViewport/description.md
+++ b/apps/demos/Demos/VectorMap/DynamicViewport/description.md
@@ -1,6 +1,6 @@
 This demo illustrates how to change the map's viewport. Use the drop-down menu under the map to choose a continent and change the visible area so that the chosen continent is displayed optimally.
-<!--split-->
 
 To implement this functionality, call the [viewport(viewportCoordinates)](/Documentation/ApiReference/UI_Components/dxVectorMap/Methods/#viewportviewportCoordinates) method every time the drop-down box value changes. You can also implement the [onCenterChanged](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/#onCenterChanged) and [onZoomFactorChanged](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/#onZoomFactorChanged) functions to display the map center's coordinates and the current zoom factor in text boxes under the map.
+<!--split-->
 
 To show or hide the [control bar](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/controlBar/), enable or disable the [panVisible](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/controlBar/#panVisible) and [zoomVisible](/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/controlBar/#zoomVisible) properties. You can toggle switches under the map to see how these settings affect the control bar. 
\ No newline at end of file
diff --git a/apps/demos/Demos/VectorMap/ImageMarkers/Vue/App.vue b/apps/demos/Demos/VectorMap/ImageMarkers/Vue/App.vue
index 46ca6d37a319..67c4c413ca8e 100644
--- a/apps/demos/Demos/VectorMap/ImageMarkers/Vue/App.vue
+++ b/apps/demos/Demos/VectorMap/ImageMarkers/Vue/App.vue
@@ -21,7 +21,7 @@
         <DxFont :size="14"/>
       </DxLabel>
     </DxLayer>
-    <dx-loading-indicator :show="true"/>
+    <DxLoadingIndicator :show="true"/>
   </DxVectorMap>
 </template>
 <script setup lang="ts">
@@ -31,6 +31,7 @@ import {
   DxLabel,
   DxLayer,
   DxFont,
+  DxLoadingIndicator
 } from 'devextreme-vue/vector-map';
 import { weatherData } from './data.ts';
 
diff --git a/apps/demos/menuMeta.json b/apps/demos/menuMeta.json
index 2b0e16dd5687..fd9aeff95527 100644
--- a/apps/demos/menuMeta.json
+++ b/apps/demos/menuMeta.json
@@ -3821,7 +3821,6 @@
             "Title": "Scrolling",
             "Name": "Scrolling",
             "Widget": "Menu",
-            "Badge": "New",
             "DemoType": "Web"
           }
         ]
@@ -4170,7 +4169,6 @@
             "Title": "Overview",
             "Name": "Overview",
             "Widget": "Splitter",
-            "Badge": "New",
             "DemoType": "Web"
           }
         ]
@@ -4727,8 +4725,7 @@
           {
             "Title": "Grouped Fields",
             "Name": "GroupedFields",
-            "Widget": "Form",
-            "Badge": "Updated"
+            "Widget": "Form"
           },
           {
             "Title": "Columns Adaptability",
@@ -5194,7 +5191,6 @@
           {
             "Title": "Overview",
             "Name": "Overview",
-            "Badge": "Updated",
             "DocUrl": "",
             "Widget": "DropDownButton",
             "DemoType": "Web",
@@ -5224,7 +5220,6 @@
             "Title": "Scrolling",
             "Name": "Scrolling",
             "Widget": "ContextMenu",
-            "Badge": "New",
             "DemoType": "Web"
           },
           {
diff --git a/apps/demos/package.json b/apps/demos/package.json
index 787350ce17b6..8a0b762c204c 100644
--- a/apps/demos/package.json
+++ b/apps/demos/package.json
@@ -1,6 +1,6 @@
 {
     "name": "devextreme-demos",
-    "version": "24.1.3",
+    "version": "24.2.0",
     "description": "",
     "repository": {
         "type": "git",
@@ -8,11 +8,11 @@
     },
     "author": "Developer Express Inc.",
     "peerDependencies": {
-        "devextreme": "~24.1.3",
-        "devextreme-angular": "~24.1.3",
-        "devextreme-dist": "~24.1.3",
-        "devextreme-react": "~24.1.3",
-        "devextreme-vue": "~24.1.3"
+        "devextreme": "~24.2.0",
+        "devextreme-angular": "~24.2.0",
+        "devextreme-dist": "~24.2.0",
+        "devextreme-react": "~24.2.0",
+        "devextreme-vue": "~24.2.0"
     },
     "dependencies": {
         "@angular/common": "~16.2.12",
diff --git a/apps/demos/testing/common.test.js b/apps/demos/testing/common.test.js
index 63183cf0adde..1010ee2f0963 100644
--- a/apps/demos/testing/common.test.js
+++ b/apps/demos/testing/common.test.js
@@ -94,9 +94,6 @@ const SKIPPED_TESTS = {
       { demo: 'Overview', themes: [THEME.material] },
       { demo: 'ChartIntegration', themes: [THEME.material] },
     ],
-    Toolbar: [
-      { demo: 'Adaptability', themes: [THEME.fluent, THEME.material] },
-    ],
     TreeList: [
       { demo: 'BatchEditing', themes: [THEME.material] },
       { demo: 'RowEditing', themes: [THEME.material] },
@@ -143,9 +140,6 @@ const SKIPPED_TESTS = {
       { demo: 'Overview', themes: [THEME.fluent, THEME.material] },
       { demo: 'GroupByDate', themes: [THEME.fluent, THEME.material] },
     ],
-    Toolbar: [
-      { demo: 'Adaptability', themes: [THEME.fluent, THEME.material] },
-    ],
     List: [
       { demo: 'ListWithSearchBar', themes: [THEME.material] },
       { demo: 'ItemDragging', themes: [THEME.fluent, THEME.material] },
@@ -197,12 +191,6 @@ const SKIPPED_TESTS = {
       { demo: 'DeferredSelection', themes: [THEME.material] },
       { demo: 'CellEditingAndEditingAPI', themes: [THEME.material] },
     ],
-    TileView: [
-      { demo: 'Directions', themes: [THEME.material] },
-    ],
-    Toolbar: [
-      { demo: 'Adaptability', themes: [THEME.fluent, THEME.material] },
-    ],
     TreeList: [
       { demo: 'Overview', themes: [THEME.material] },
     ],
diff --git a/apps/demos/testing/etalons/FileManager-BindingToFileSystem.png b/apps/demos/testing/etalons/FileManager-BindingToFileSystem.png
index fac46fb244c1..cf46d3a19439 100644
Binary files a/apps/demos/testing/etalons/FileManager-BindingToFileSystem.png and b/apps/demos/testing/etalons/FileManager-BindingToFileSystem.png differ
diff --git a/apps/demos/testing/known-warnings.json b/apps/demos/testing/known-warnings.json
index f4fb190f027e..97a7c082666d 100644
--- a/apps/demos/testing/known-warnings.json
+++ b/apps/demos/testing/known-warnings.json
@@ -1,13 +1,6 @@
 [
   "The specified credentials are invalid. You can sign up for a free developer account at http://www.bingmapsportal.com",
-  "[Vue warn]: Do not use built-in or reserved HTML elements as component id: title",
-  "[Vue warn]: Property \"",
-  "[Vue warn]: Failed to resolve component: ",
-  "Warning: forwardRef render functions accept exactly two parameters: props and ref.",
-  "Warning: %s: `ref` is not a prop.",
-  "W0001 -",
   "W0019 -",
   "W0022 -",
-  "W1011 -",
   "W2108 -"
 ]
diff --git a/apps/demos/utils/bundle/index.js b/apps/demos/utils/bundle/index.js
index 940bef0f9b8e..4e8f7184674d 100644
--- a/apps/demos/utils/bundle/index.js
+++ b/apps/demos/utils/bundle/index.js
@@ -9,6 +9,7 @@ const url = require('url');
 // https://stackoverflow.com/questions/42412965/how-to-load-named-exports-with-systemjs/47108328
 const prepareModulesToNamedImport = () => {
   const modules = [
+    'time_zone_utils.js',
     'localization.js',
     'viz/export.js',
     'viz/core/export.js',
@@ -22,9 +23,8 @@ const prepareModulesToNamedImport = () => {
   ];
 
   const paths = [
-    '../npm-scripts/npm-devextreme/cjs', // un-used / legacy?
-    'node_modules/devextreme/cjs',       // 24.1+ migrated from devextreme-demos, kept as is / likely un-used, but works ok in mono repo
-    '../../node_modules/devextreme/cjs', // 24.1+ wg / individual em modules are not discovered
+    '../npm-scripts/npm-devextreme/cjs',
+    'node_modules/devextreme/cjs',
   ];
 
   const esModuleExport = 'exports.__esModule = true;';
diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.js b/apps/demos/utils/visual-tests/matrix-test-helper.js
index 018c889bdedf..c46b1b24485a 100644
--- a/apps/demos/utils/visual-tests/matrix-test-helper.js
+++ b/apps/demos/utils/visual-tests/matrix-test-helper.js
@@ -213,9 +213,6 @@ const SKIPPED_TESTS = {
     Scheduler: [
       'CustomDragAndDrop',
     ],
-    Toolbar: [
-      { demo: 'Adaptability', themes: [THEME.fluent, THEME.material] },
-    ],
   },
   Vue: {
     Charts: [
@@ -242,12 +239,6 @@ const SKIPPED_TESTS = {
     Drawer: [
       { demo: 'TopOrBottomPosition', themes: [THEME.material] },
     ],
-    TabPanel: [
-      { demo: 'Overview', themes: [THEME.material] },
-    ],
-    Toolbar: [
-      { demo: 'Adaptability', themes: [THEME.fluent, THEME.material] },
-    ],
   },
   React: {
     Charts: [
@@ -270,9 +261,6 @@ const SKIPPED_TESTS = {
       { demo: 'Overview', themes: [THEME.fluent, THEME.material] },
       { demo: 'Templates', themes: [THEME.fluent, THEME.material] },
     ],
-    Toolbar: [
-      { demo: 'Adaptability', themes: [THEME.fluent, THEME.material] },
-    ],
   },
 };
 
diff --git a/apps/react-storybook/package.json b/apps/react-storybook/package.json
index cb489ac9bb16..ed615b567e87 100644
--- a/apps/react-storybook/package.json
+++ b/apps/react-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-react-storybook",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,8 +11,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "devextreme": "~24.1.3",
-    "devextreme-react": "~24.1.3"
+    "devextreme": "~24.2.0",
+    "devextreme-react": "~24.2.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.9",
diff --git a/apps/react/package.json b/apps/react/package.json
index 9a463f97fe5b..7472df37b3f3 100644
--- a/apps/react/package.json
+++ b/apps/react/package.json
@@ -2,15 +2,15 @@
   "author": "Developer Express Inc.",
   "name": "devextreme-react-playground",
   "private": true,
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "DevExtreme React UI and Visualization Components Sandbox",
   "repository": {
     "type": "git",
     "url": "https://github.com/DevExpress/devextreme-react.git"
   },
   "dependencies": {
-    "devextreme": "~24.1.3",
-    "devextreme-react": "~24.1.3",
+    "devextreme": "~24.2.0",
+    "devextreme-react": "~24.2.0",
     "react": "~18.0.0",
     "react-dom": "~18.0.0"
   },
diff --git a/apps/vue/package.json b/apps/vue/package.json
index 809fb7f8a14d..fb1effe1ba7d 100644
--- a/apps/vue/package.json
+++ b/apps/vue/package.json
@@ -2,7 +2,7 @@
   "name": "devextreme-vue-playground",
   "description": "DevExtreme Vue UI and Visualization Components",
   "private": true,
-  "version": "24.1.3",
+  "version": "24.2.0",
   "author": "Developer Express Inc.",
   "license": "MIT",
   "repository": {
@@ -10,8 +10,8 @@
     "url": "https://github.com/DevExpress/devextreme-vue.git"
   },
   "dependencies": {
-    "devextreme": "~24.1.3",
-    "devextreme-vue": "~24.1.3",
+    "devextreme": "~24.2.0",
+    "devextreme-vue": "~24.2.0",
     "vue": "3.2.47"
   },
   "devDependencies": {
diff --git a/e2e/bundlers/package.json b/e2e/bundlers/package.json
index 94e9ce83b53d..af7ddc3e6cba 100644
--- a/e2e/bundlers/package.json
+++ b/e2e/bundlers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-modules-test",
-  "version": "1.0.0",
+  "version": "24.2.0",
   "devDependencies": {
     "@rollup/plugin-alias": "3.1.9",
     "@rollup/plugin-commonjs": "19.0.2",
diff --git a/e2e/compilation-cases/package.json b/e2e/compilation-cases/package.json
index b5aef66c7939..61268a69c386 100644
--- a/e2e/compilation-cases/package.json
+++ b/e2e/compilation-cases/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "devextreme-compilation-cases",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "author": "Developer Express Inc.",
   "scripts": {
     "test": "tsc --noEmit"
diff --git a/e2e/testcafe-devextreme/package.json b/e2e/testcafe-devextreme/package.json
index 7976bd77d6e0..5d9b9255f366 100644
--- a/e2e/testcafe-devextreme/package.json
+++ b/e2e/testcafe-devextreme/package.json
@@ -1,13 +1,13 @@
 {
   "name": "devextreme-testcafe-tests",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "scripts": {
     "test": "node ./runner.js",
     "lint": "eslint --ext .js,.ts .",
     "update-failed-etalons": "node update_failed_etalons.mjs"
   },
   "devDependencies": {
-    "devextreme": "~24.1.3",
+    "devextreme": "~24.2.0",
     "testcafe": "2.5.0"
   }
 }
diff --git a/e2e/testcafe-devextreme/tests/container.html b/e2e/testcafe-devextreme/tests/container.html
index 4efb4e886e8c..7ca423929c01 100644
--- a/e2e/testcafe-devextreme/tests/container.html
+++ b/e2e/testcafe-devextreme/tests/container.html
@@ -19,6 +19,7 @@
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-quill.min.js"></script>
     <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@2.8.2/js/dx.aspnet.data.js"></script>
     <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
 </head>
 <body class="dx-surface">
diff --git a/e2e/testcafe-devextreme/tests/containerAspNet.html b/e2e/testcafe-devextreme/tests/containerAspNet.html
deleted file mode 100644
index fdf72072d66d..000000000000
--- a/e2e/testcafe-devextreme/tests/containerAspNet.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>TestCafe Tests Container</title>
-
-    <link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="true">
-    <link rel="dx-theme" data-theme="generic.light.compact" href="../../../packages/devextreme/artifacts/css/dx.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="generic.dark" href="../../../packages/devextreme/artifacts/css/dx.dark.css" data-active="false">
-    <link rel="dx-theme" data-theme="generic.contrast" href="../../../packages/devextreme/artifacts/css/dx.contrast.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.material.blue.dark.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.dark.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.saas.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.light.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.saas.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.dark.css" data-active="false">
-
-    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
-    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
-    <script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@2.8.2/js/dx.aspnet.data.js"></script>
-</head>
-<body class="dx-surface">
-    <div id="parentContainer">
-        <div id="container">
-        </div>
-        <div id="otherContainer">
-        </div>
-    </div>
-</body>
-</html>
diff --git a/e2e/testcafe-devextreme/tests/containerQuill.html b/e2e/testcafe-devextreme/tests/containerQuill.html
deleted file mode 100644
index 011df68a8197..000000000000
--- a/e2e/testcafe-devextreme/tests/containerQuill.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>TestCafe Tests Container</title>
-
-    <link rel="dx-theme" data-theme="generic.light" href="../../../packages/devextreme/artifacts/css/dx.light.css" data-active="true">
-    <link rel="dx-theme" data-theme="generic.light.compact" href="../../../packages/devextreme/artifacts/css/dx.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="generic.dark" href="../../../packages/devextreme/artifacts/css/dx.dark.css" data-active="false">
-    <link rel="dx-theme" data-theme="generic.contrast" href="../../../packages/devextreme/artifacts/css/dx.contrast.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.light" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.material.blue.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="material.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.material.blue.dark.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.blue.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.blue.light.compact" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.light.compact.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.blue.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.blue.dark.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.saas.light" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.light.css" data-active="false">
-    <link rel="dx-theme" data-theme="fluent.saas.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.dark.css" data-active="false">
-
-    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
-    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-quill.min.js"></script>
-    <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
-</head>
-<body class="dx-surface">
-    <div id="parentContainer">
-        <div id="container">
-        </div>
-        <div id="otherContainer">
-        </div>
-    </div>
-</body>
-</html>
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/columnChooser.ts b/e2e/testcafe-devextreme/tests/dataGrid/columnChooser.ts
index 67a974f3f8a7..97a262475621 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/columnChooser.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/columnChooser.ts
@@ -136,3 +136,51 @@ test('Column chooser should support string height and width', async (t) => {
     width: '330px',
   },
 }));
+
+// T1219785
+test('Check the behavior of pressing the Esc button when dragging a column from the column chooser', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t
+    .click(dataGrid.getColumnChooserButton());
+
+  await takeScreenshot('T1219785-column-chooser-1.png', dataGrid.element);
+
+  await dataGrid.getColumnChooser().focusList();
+  await dataGrid.moveColumnChooserColumn(0, -25, -25, true);
+  await dataGrid.moveColumnChooserColumn(0, -50, -50);
+
+  await takeScreenshot('T1219785-column-chooser-2.png', dataGrid.element);
+
+  // act
+  await t.pressKey('esc');
+  await dataGrid.moveColumnChooserColumn(0, -75, -75);
+
+  await takeScreenshot('T1219785-column-chooser-3.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(20, 3),
+  height: 400,
+  showBorders: true,
+  columns: [{
+    dataField: 'field_0',
+    dataType: 'string',
+  }, {
+    dataField: 'field_1',
+    dataType: 'string',
+  }, {
+    dataField: 'field_2',
+    dataType: 'string',
+    visible: false,
+  }],
+  columnChooser: {
+    enabled: true,
+    mode: 'dragAndDrop',
+  },
+}));
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/editing/T1154721_editingCellFocus.ts b/e2e/testcafe-devextreme/tests/dataGrid/editing/T1154721_editingCellFocus.ts
index aca21034ac7f..50454f46bf48 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/editing/T1154721_editingCellFocus.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/editing/T1154721_editingCellFocus.ts
@@ -4,7 +4,7 @@ import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
 
 fixture`Editing - cell focus`
-  .page(url(__dirname, '../../containerAspNet.html'));
+  .page(url(__dirname, '../../container.html'));
 
 const apiRequestMock = RequestMock()
   .onRequestTo(/\/api\/data/)
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-1.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-1.png
new file mode 100644
index 000000000000..71ba916219bf
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-1.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-2.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-2.png
new file mode 100644
index 000000000000..ef4b167f13db
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-2.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-3.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-3.png
new file mode 100644
index 000000000000..c448142ce6fb
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1219785-column-chooser-3.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_0.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_0.png
new file mode 100644
index 000000000000..02bf5be6b37a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_0.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_1.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_1.png
new file mode 100644
index 000000000000..8353a3b99234
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_1.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_2.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_2.png
new file mode 100644
index 000000000000..02bf5be6b37a
Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1221369_fixed-summary-with-virtual-cols_2.png differ
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/grouping/T1162057_oneGroupOnDifferentPages.ts b/e2e/testcafe-devextreme/tests/dataGrid/grouping/T1162057_oneGroupOnDifferentPages.ts
index 1bbcab7ba82a..be3b572205d3 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/grouping/T1162057_oneGroupOnDifferentPages.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/grouping/T1162057_oneGroupOnDifferentPages.ts
@@ -6,7 +6,7 @@ import url from '../../../helpers/getPageUrl';
 // import { safeSizeTest } from '../../../helpers/safeSizeTest';
 
 fixture`Grouping Panel - One group on different pages`
-  .page(url(__dirname, '../../containerAspNet.html'));
+  .page(url(__dirname, '../../container.html'));
 
 const GRID_SELECTOR = '#container';
 
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/editOnKeyPress.screenshots.ts b/e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/editOnKeyPress.ts
similarity index 50%
rename from e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/editOnKeyPress.screenshots.ts
rename to e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/editOnKeyPress.ts
index 5d335d07a6e8..839bfba67b81 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/editOnKeyPress.screenshots.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/keyboardNavigation/editOnKeyPress.ts
@@ -1,5 +1,6 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { ClientFunction } from 'testcafe';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import { makeRowsViewTemplatesAsync } from '../helpers/asyncTemplates';
@@ -62,3 +63,75 @@ const DATA_GRID_SELECTOR = '#container';
     await makeRowsViewTemplatesAsync(DATA_GRID_SELECTOR);
   });
 });
+
+test('Focused cell should not flick (T1206435)', async (t) => {
+  type TestWindow = (typeof window) & {
+    counter?: number;
+  };
+
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const firstCell = dataGrid.getDataCell(0, 0).element;
+  const secondCell = dataGrid.getDataCell(1, 0).element;
+  const getFocusEventCount = ClientFunction(
+    () => (window as TestWindow).counter,
+  );
+
+  await ClientFunction(() => {
+    const testWindow = window as TestWindow;
+    testWindow.counter = 0;
+    (secondCell() as any as HTMLElement).addEventListener('focusin', () => {
+      testWindow.counter! += 1;
+    });
+  }, {
+    dependencies: { secondCell },
+  })();
+
+  await t.click(firstCell);
+
+  await t.pressKey('M');
+  await t.pressKey('enter');
+
+  await t.expect(secondCell.focused).ok();
+
+  const focusEventCount = await getFocusEventCount();
+  await t.expect(focusEventCount).eql(1);
+
+  await ClientFunction(() => {
+    delete (window as TestWindow).counter;
+  })();
+}).before(async () => {
+  await createWidget('dxDataGrid', () => {
+    const data = [
+      { value: 'data' },
+      { value: 'data' },
+    ];
+    return {
+      dataSource: new (window as any).DevExpress.data.CustomStore({
+        load() {
+          return Promise.resolve(data);
+        },
+        update() {
+          return new Promise<void>((res) => {
+            setTimeout(() => {
+              res();
+            }, 100);
+          });
+        },
+      }),
+      keyboardNavigation: {
+        enabled: true,
+        editOnKeyPress: true,
+        enterKeyAction: 'moveFocus',
+        enterKeyDirection: 'column',
+      },
+      editing: {
+        mode: 'cell',
+        allowUpdating: true,
+        allowAdding: true,
+        startEditAction: 'dblClick',
+        refreshMode: 'reshape',
+      },
+      repaintChangesOnly: true,
+    };
+  });
+});
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts b/e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts
index 29f9bd18b16c..6cabf57d93a0 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts
@@ -1139,7 +1139,7 @@ safeSizeTest('The page should not be changed when hiding/showing the grid view a
 })());
 
 fixture`Remote Scrolling`
-  .page(url(__dirname, '../containerAspNet.html'));
+  .page(url(__dirname, '../container.html'));
 
 test.meta({ unstable: true })('Scroll to the bottom after expand several group', async (t) => {
   const dataGrid = new DataGrid('#container');
diff --git a/e2e/testcafe-devextreme/tests/dataGrid/virtualColumns.ts b/e2e/testcafe-devextreme/tests/dataGrid/virtualColumns.ts
index 9edc0d66ba55..359e5ad7e18b 100644
--- a/e2e/testcafe-devextreme/tests/dataGrid/virtualColumns.ts
+++ b/e2e/testcafe-devextreme/tests/dataGrid/virtualColumns.ts
@@ -288,3 +288,63 @@ test('Columns should be rendered correctly after reinit of columns controller',
     columnRenderingMode: 'virtual',
   },
 }));
+
+test('Group row should have right colspan with summary, virtual columns and fixed columns (T1221369)', async (t) => {
+  const grid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await takeScreenshot('T1221369_fixed-summary-with-virtual-cols_0.png', grid.element);
+
+  // NOTE: There is an issue with Scrollable
+  // So, we should scroll two times to reach maximum right scroll position
+  await grid.scrollTo(t, { x: 10000 });
+  await grid.scrollTo(t, { x: 10000 });
+
+  await takeScreenshot('T1221369_fixed-summary-with-virtual-cols_1.png', grid.element);
+
+  await grid.scrollTo(t, { x: 0 });
+
+  await takeScreenshot('T1221369_fixed-summary-with-virtual-cols_2.png', grid.element);
+
+  await t.expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const generatedColumns = generateColumns(20);
+  const columns = [
+    {
+      ...generatedColumns[0],
+      groupIndex: 0,
+    },
+    {
+      ...generatedColumns[1],
+      fixed: true,
+    },
+    {
+      ...generatedColumns[2],
+      fixed: true,
+    },
+    ...generatedColumns.splice(3),
+  ];
+  const data = generateData(10, 20);
+
+  await createWidget('dxDataGrid', {
+    dataSource: data,
+    width: 400,
+    height: 400,
+    columns,
+    columnFixing: {
+      enabled: true,
+    },
+    columnMinWidth: 100,
+    scrolling: {
+      columnRenderingMode: 'virtual',
+    },
+    summary: {
+      groupItems: [{
+        column: columns[2].dataField,
+        summaryType: 'count',
+        alignByColumn: true,
+      }],
+    },
+  });
+});
diff --git a/e2e/testcafe-devextreme/tests/form/common.ts b/e2e/testcafe-devextreme/tests/form/common.ts
index e59301db356f..7393960332e3 100644
--- a/e2e/testcafe-devextreme/tests/form/common.ts
+++ b/e2e/testcafe-devextreme/tests/form/common.ts
@@ -9,7 +9,7 @@ import { appendElementTo, insertStylesheetRulesToPage, removeStylesheetRulesFrom
 const DATERANGEBOX_CLASS = 'dx-daterangebox';
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 test('Color of the mark (T882067)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
diff --git a/e2e/testcafe-devextreme/tests/form/form.buttonItem.ts b/e2e/testcafe-devextreme/tests/form/form.buttonItem.ts
index 15e276b42557..80016fec2f1b 100644
--- a/e2e/testcafe-devextreme/tests/form/form.buttonItem.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.buttonItem.ts
@@ -4,7 +4,7 @@ import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 const testName = 'ButtonItem';
 test(testName, async (t) => {
diff --git a/e2e/testcafe-devextreme/tests/form/form.emptyItem.ts b/e2e/testcafe-devextreme/tests/form/form.emptyItem.ts
index 2581a75668dc..a1b7d34454b7 100644
--- a/e2e/testcafe-devextreme/tests/form/form.emptyItem.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.emptyItem.ts
@@ -4,7 +4,7 @@ import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 const testName = 'EmptyItem';
 test(testName, async (t) => {
diff --git a/e2e/testcafe-devextreme/tests/form/form.groupItem.ts b/e2e/testcafe-devextreme/tests/form/form.groupItem.ts
index ca6aa60cdba6..59603573d34e 100644
--- a/e2e/testcafe-devextreme/tests/form/form.groupItem.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.groupItem.ts
@@ -4,7 +4,7 @@ import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 const testName = 'GroupItem';
 
diff --git a/e2e/testcafe-devextreme/tests/form/form.labelMode.ts b/e2e/testcafe-devextreme/tests/form/form.labelMode.ts
index 817eb80ac44a..818b8d94fbd0 100644
--- a/e2e/testcafe-devextreme/tests/form/form.labelMode.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.labelMode.ts
@@ -4,7 +4,7 @@ import { createWidget } from '../../helpers/createWidget';
 import { isMaterialBased, testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 ['left', 'right', 'top'].forEach((formLabelLocation) => {
   ['outside', 'floating', 'hidden', 'static'].forEach((formLabelMode) => {
diff --git a/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts b/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts
index 90f535d58b42..c937f62a1915 100644
--- a/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.simpleItem.colSpan.ts
@@ -6,7 +6,7 @@ import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 const labelLocations = ['left', 'right', 'top'];
 
diff --git a/e2e/testcafe-devextreme/tests/form/form.simpleItem.labelMode.ts b/e2e/testcafe-devextreme/tests/form/form.simpleItem.labelMode.ts
index 2e657f274726..de90004b1c46 100644
--- a/e2e/testcafe-devextreme/tests/form/form.simpleItem.labelMode.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.simpleItem.labelMode.ts
@@ -7,7 +7,7 @@ import { createWidget } from '../../helpers/createWidget';
 const waitFont = ClientFunction(() => (window as any).DevExpress.ui.themes.waitWebFont('Item123somevalu*op ', 400));
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 [false, true].forEach((rtlEnabled) => {
   ['outside', 'static', 'floating'].forEach((labelMode) => {
diff --git a/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts b/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts
index 55af539b5953..d3836a0774d7 100644
--- a/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.simpleItem.ts
@@ -7,7 +7,7 @@ import { testScreenshot } from '../../helpers/themeUtils';
 const waitFont = ClientFunction(() => (window as any).DevExpress.ui.themes.waitWebFont('Item123somevalu*op ', 400));
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 [false, true].forEach((rtlEnabled) => {
   ['left', 'right', 'top'].forEach((labelLocation) => {
diff --git a/e2e/testcafe-devextreme/tests/form/form.tabbedItem.ts b/e2e/testcafe-devextreme/tests/form/form.tabbedItem.ts
index d6d49bcbb5d0..f13e62654add 100644
--- a/e2e/testcafe-devextreme/tests/form/form.tabbedItem.ts
+++ b/e2e/testcafe-devextreme/tests/form/form.tabbedItem.ts
@@ -4,7 +4,7 @@ import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Form`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 const testName = 'TabbedItem';
 test(testName, async (t) => {
diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/common.ts b/e2e/testcafe-devextreme/tests/htmlEditor/common.ts
index 9a181e7dfb49..52fdf95a1615 100644
--- a/e2e/testcafe-devextreme/tests/htmlEditor/common.ts
+++ b/e2e/testcafe-devextreme/tests/htmlEditor/common.ts
@@ -5,7 +5,7 @@ import url from '../../helpers/getPageUrl';
 import { testScreenshot } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`HtmlEditor`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 [false, true].forEach((toolbar) => {
   const selector = toolbar ? '#otherContainer' : '#container';
diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageFromDevice.ts b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageFromDevice.ts
index a162cf0921ae..8ba8c9ed0880 100644
--- a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageFromDevice.ts
+++ b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageFromDevice.ts
@@ -8,7 +8,7 @@ const TEST_IMAGE_PATH_1 = './images/test-image-1.png';
 const TEST_IMAGE_PATH_2 = './images/test-image-2.png';
 
 fixture`HtmlEditor - upload image from device`
-  .page(url(__dirname, '../../../containerQuill.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 test('Image from device should be inserted', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageUrl.ts b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageUrl.ts
index 20a035e71ee7..b97ff2171a1d 100644
--- a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageUrl.ts
+++ b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/addImageUrl.ts
@@ -6,7 +6,7 @@ import { BASE64_IMAGE_1, BASE64_IMAGE_2 } from './images/base64';
 import { isMaterial, testScreenshot } from '../../../../helpers/themeUtils';
 
 fixture.disablePageReloads`HtmlEditor - add image url`
-  .page(url(__dirname, '../../../containerQuill.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 const ADD_IMAGE_POPUP_CONTENT_SELECTOR = '.dx-htmleditor-add-image-popup .dx-overlay-content';
 
diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/common.ts b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/common.ts
index f023bd712296..21584b01a561 100644
--- a/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/common.ts
+++ b/e2e/testcafe-devextreme/tests/htmlEditor/dialogs/addImage/common.ts
@@ -8,7 +8,7 @@ import { testScreenshot } from '../../../../helpers/themeUtils';
 const TEST_IMAGE_PATH_1 = './images/test-image-1.png';
 
 fixture.disablePageReloads`HtmlEditor - common`
-  .page(url(__dirname, '../../../containerQuill.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 const ADD_IMAGE_POPUP_CONTENT_SELECTOR = '.dx-htmleditor-add-image-popup .dx-overlay-content';
 
diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/format.ts b/e2e/testcafe-devextreme/tests/htmlEditor/format.ts
index 7f2bf8e70495..3993fde1f76d 100644
--- a/e2e/testcafe-devextreme/tests/htmlEditor/format.ts
+++ b/e2e/testcafe-devextreme/tests/htmlEditor/format.ts
@@ -3,7 +3,7 @@ import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
 
 fixture.disablePageReloads`HtmlEditor - formats`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 test('HtmlEditor should keep actual format after "enter" key pressed (T922236)', async (t) => {
   const selectBox = new SelectBox('.dx-font-format');
diff --git a/e2e/testcafe-devextreme/tests/htmlEditor/list.ts b/e2e/testcafe-devextreme/tests/htmlEditor/list.ts
index 0cd5fdb9ee57..3a2ad546c762 100644
--- a/e2e/testcafe-devextreme/tests/htmlEditor/list.ts
+++ b/e2e/testcafe-devextreme/tests/htmlEditor/list.ts
@@ -25,7 +25,7 @@ const orderedListMarkup = `
 `;
 
 fixture.disablePageReloads`HtmlEditor - lists`
-  .page(url(__dirname, '../containerQuill.html'));
+  .page(url(__dirname, '../container.html'));
 
 test('ordered list numbering sequence should reset for each list item (T1220554)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
diff --git a/e2e/testcafe-devextreme/tests/pivotGrid/sort/localSort_T1150523.ts b/e2e/testcafe-devextreme/tests/pivotGrid/sort/localSort_T1150523.ts
index e536fe5c8d83..c14f60bac24d 100644
--- a/e2e/testcafe-devextreme/tests/pivotGrid/sort/localSort_T1150523.ts
+++ b/e2e/testcafe-devextreme/tests/pivotGrid/sort/localSort_T1150523.ts
@@ -7,7 +7,7 @@ import { isMaterial } from '../../../helpers/themeUtils';
 const testFixture = () => (isMaterial() ? fixture.skip : fixture);
 
 testFixture()`pivotGrid_sort`
-  .page(url(__dirname, '../../containerAspNet.html'));
+  .page(url(__dirname, '../../container.html'));
 
 const requestLogger = RequestLogger(/\/api\/data/);
 const apiRequestMock = RequestMock()
diff --git a/package-lock.json b/package-lock.json
index bc0a761a4b06..fe09eb66d6f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "devextreme-monorepo",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "devextreme-monorepo",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "MIT",
       "workspaces": [
         "apps/*",
@@ -41,7 +41,7 @@
         "@types/yargs": "^17.0.32",
         "cheerio": "1.0.0-rc.10",
         "codelyzer": "^6.0.2",
-        "devextreme-internal-tools": "14.0.0-beta.5",
+        "devextreme-internal-tools": "14.0.0-beta.6",
         "eslint": "8.57.0",
         "eslint-config-airbnb-base": "15.0.0",
         "eslint-config-airbnb-typescript": "17.1.0",
@@ -81,7 +81,7 @@
     },
     "apps/angular": {
       "name": "devextreme-angular-playground",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "~16.2.12",
@@ -94,8 +94,8 @@
         "@angular/platform-browser-dynamic": "~16.2.12",
         "@angular/router": "~16.2.12",
         "core-js": "^2.6.12",
-        "devextreme": "~24.1.3",
-        "devextreme-angular": "~24.1.3",
+        "devextreme": "~24.2.0",
+        "devextreme-angular": "~24.2.0",
         "rxjs": "^6.6.7",
         "tslib": "^2.6.1",
         "zone.js": "0.13.0"
@@ -1810,7 +1810,7 @@
     },
     "apps/demos": {
       "name": "devextreme-demos",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "SEE LICENSE IN README.md",
       "dependencies": {
         "@angular/cli": "~16.2.12",
@@ -1905,11 +1905,11 @@
         "ts-node": "10.9.2"
       },
       "peerDependencies": {
-        "devextreme": "~24.1.3",
-        "devextreme-angular": "~24.1.3",
-        "devextreme-dist": "~24.1.3",
-        "devextreme-react": "~24.1.3",
-        "devextreme-vue": "~24.1.3"
+        "devextreme": "~24.2.0",
+        "devextreme-angular": "~24.2.0",
+        "devextreme-dist": "~24.2.0",
+        "devextreme-react": "~24.2.0",
+        "devextreme-vue": "~24.2.0"
       }
     },
     "apps/demos/node_modules/@angular-devkit/core": {
@@ -3703,11 +3703,11 @@
     },
     "apps/react": {
       "name": "devextreme-react-playground",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "MIT",
       "dependencies": {
-        "devextreme": "~24.1.3",
-        "devextreme-react": "~24.1.3",
+        "devextreme": "~24.2.0",
+        "devextreme-react": "~24.2.0",
         "react": "~18.0.0",
         "react-dom": "~18.0.0"
       },
@@ -3726,11 +3726,11 @@
     },
     "apps/react-storybook": {
       "name": "devextreme-react-storybook",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "ISC",
       "dependencies": {
-        "devextreme": "~24.1.3",
-        "devextreme-react": "~24.1.3"
+        "devextreme": "~24.2.0",
+        "devextreme-react": "~24.2.0"
       },
       "devDependencies": {
         "@storybook/addon-essentials": "^7.6.9",
@@ -4581,11 +4581,11 @@
     },
     "apps/vue": {
       "name": "devextreme-vue-playground",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "MIT",
       "dependencies": {
-        "devextreme": "~24.1.3",
-        "devextreme-vue": "~24.1.3",
+        "devextreme": "~24.2.0",
+        "devextreme-vue": "~24.2.0",
         "vue": "3.2.47"
       },
       "devDependencies": {
@@ -5791,7 +5791,7 @@
     },
     "e2e/bundlers": {
       "name": "devextreme-modules-test",
-      "version": "1.0.0",
+      "version": "24.2.0",
       "devDependencies": {
         "@rollup/plugin-alias": "3.1.9",
         "@rollup/plugin-commonjs": "19.0.2",
@@ -6056,7 +6056,7 @@
     },
     "e2e/compilation-cases": {
       "name": "devextreme-compilation-cases",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "devDependencies": {
         "@angular/common": "^11.2.14",
         "@types/jquery": "3.5.29",
@@ -6123,9 +6123,9 @@
     },
     "e2e/testcafe-devextreme": {
       "name": "devextreme-testcafe-tests",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "devDependencies": {
-        "devextreme": "~24.1.3",
+        "devextreme": "~24.2.0",
         "testcafe": "2.5.0"
       }
     },
@@ -28736,9 +28736,9 @@
       "link": true
     },
     "node_modules/devextreme-internal-tools": {
-      "version": "14.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/devextreme-internal-tools/-/devextreme-internal-tools-14.0.0-beta.5.tgz",
-      "integrity": "sha512-HuswhGy8ZwCNmafGw5M+DlUvTSloNR2QK006Kvy7kOBdw814O81XG8lw4XlUJN5SZ6hq+Mi8ls1NLLoQtpbbDQ==",
+      "version": "14.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/devextreme-internal-tools/-/devextreme-internal-tools-14.0.0-beta.6.tgz",
+      "integrity": "sha512-9f3U1jWL0RdegUvo2mciVA4EOI9aCsPaKMk9VByRYIUGL6iQLPnlSkjpnn4Yd4CIuuoYpKEH1vNIyKC3HCffcQ==",
       "dev": true,
       "dependencies": {
         "dasherize": "2.0.0",
@@ -65642,7 +65642,7 @@
     },
     "packages/devextreme": {
       "name": "devextreme-main",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "hasInstallScript": true,
       "license": "SEE LICENSE IN README.md",
       "dependencies": {
@@ -65785,7 +65785,7 @@
       }
     },
     "packages/devextreme-angular": {
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "MIT",
       "dependencies": {
         "@angular-devkit/schematics": "16.2.14",
@@ -65833,7 +65833,7 @@
         "@angular/common": ">=16.0.0",
         "@angular/core": ">=16.0.0",
         "@angular/forms": ">=16.0.0",
-        "devextreme": "~24.1.3"
+        "devextreme": "~24.2.0"
       }
     },
     "packages/devextreme-angular/node_modules/@angular-devkit/core": {
@@ -67768,7 +67768,7 @@
       }
     },
     "packages/devextreme-monorepo-tools": {
-      "version": "24.1.3",
+      "version": "24.2.0",
       "devDependencies": {
         "ts-jest": "^29.1.2"
       }
@@ -67882,7 +67882,7 @@
       }
     },
     "packages/devextreme-react": {
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "MIT",
       "dependencies": {
         "prop-types": "^15.8.1"
@@ -67904,7 +67904,7 @@
         "typescript": "~4.9"
       },
       "peerDependencies": {
-        "devextreme": "~24.1.3",
+        "devextreme": "~24.2.0",
         "react": "^16.2.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.2.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -68166,7 +68166,7 @@
       }
     },
     "packages/devextreme-themebuilder": {
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "SEE LICENSE IN README.md",
       "dependencies": {
         "autoprefixer": "^10.4.7",
@@ -68382,7 +68382,7 @@
       }
     },
     "packages/devextreme-vue": {
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "MIT",
       "devDependencies": {
         "@vue/compiler-sfc": "^3.0.0",
@@ -68399,7 +68399,7 @@
         "vue-router": "^4.0.16"
       },
       "peerDependencies": {
-        "devextreme": "~24.1.3",
+        "devextreme": "~24.2.0",
         "vue": "^3.0.0"
       }
     },
@@ -68698,7 +68698,7 @@
       }
     },
     "packages/devextreme/artifacts/npm/devextreme": {
-      "version": "24.1.3",
+      "version": "24.2.0",
       "license": "SEE LICENSE IN README.md",
       "dependencies": {
         "@babel/runtime": "^7.12.1",
@@ -68719,7 +68719,7 @@
       }
     },
     "packages/devextreme/artifacts/npm/devextreme-dist": {
-      "version": "24.1.3"
+      "version": "24.2.0"
     },
     "packages/devextreme/js/__internal/.eslint-tmp-local-plugin": {
       "name": "eslint-plugin-forbidden-imports",
@@ -68961,7 +68961,7 @@
     },
     "packages/testcafe-models": {
       "name": "devextreme-testcafe-models",
-      "version": "24.1.3",
+      "version": "24.2.0",
       "peerDependencies": {
         "testcafe": "*"
       }
diff --git a/package.json b/package.json
index c43facec9d41..a07898d70f8a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-monorepo",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "license": "MIT",
   "author": "Developer Express Inc.",
   "scripts": {
@@ -54,7 +54,7 @@
     "@types/yargs": "^17.0.32",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "^6.0.2",
-    "devextreme-internal-tools": "14.0.0-beta.5",
+    "devextreme-internal-tools": "14.0.0-beta.6",
     "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
diff --git a/packages/devextreme-angular/package.json b/packages/devextreme-angular/package.json
index 63176be6d47f..54a626c7675a 100644
--- a/packages/devextreme-angular/package.json
+++ b/packages/devextreme-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-angular",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "Angular UI and visualization components based on DevExtreme widgets",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "@angular/common": ">=16.0.0",
     "@angular/core": ">=16.0.0",
     "@angular/forms": ">=16.0.0",
-    "devextreme": "~24.1.3"
+    "devextreme": "~24.2.0"
   },
   "devDependencies": {
     "@webcomponents/custom-elements": "^1.6.0",
diff --git a/packages/devextreme-monorepo-tools/package.json b/packages/devextreme-monorepo-tools/package.json
index 8dda91307ad3..500fe4e7b529 100644
--- a/packages/devextreme-monorepo-tools/package.json
+++ b/packages/devextreme-monorepo-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-monorepo-tools",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "devDependencies": {
     "ts-jest": "^29.1.2"
   }
diff --git a/packages/devextreme-react/package.json b/packages/devextreme-react/package.json
index ab449f24fafe..b5e0e9ab70df 100644
--- a/packages/devextreme-react/package.json
+++ b/packages/devextreme-react/package.json
@@ -1,7 +1,7 @@
 {
   "author": "Developer Express Inc.",
   "name": "devextreme-react",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "DevExtreme React UI and Visualization Components",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "devextreme": "~24.1.3",
+    "devextreme": "~24.2.0",
     "react": "^16.2.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.2.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
diff --git a/packages/devextreme-react/src/core/__tests__/component.test.tsx b/packages/devextreme-react/src/core/__tests__/component.test.tsx
index 81b8a0c4ad7b..089270491d90 100644
--- a/packages/devextreme-react/src/core/__tests__/component.test.tsx
+++ b/packages/devextreme-react/src/core/__tests__/component.test.tsx
@@ -6,7 +6,9 @@ import * as ReactDOM from 'react-dom';
 import {
   fireOptionChange,
   TestComponent,
+  TestComponentRef,
   TestPortalComponent,
+  TestRestoreTreeComponent,
   Widget,
   WidgetClass,
 } from './test-component';
@@ -147,6 +149,31 @@ describe('rendering', () => {
   
       expect(didRenderToDetachedBranch).toBeFalsy();
     });
+
+    it('does not restore the parent tree if its child elements are still attached', () => {
+      testingLib.configure({ reactStrictMode: true });
+
+      const TreeComponentRef = React.createRef<{ restoreTree?: () => void }>();
+      const ParentComponentRef = React.createRef<TestComponentRef>();
+
+      const component = (
+        <TestComponent ref={ParentComponentRef}>
+          <span>Span Element</span>
+          <TestRestoreTreeComponent ref={TreeComponentRef} />
+        </TestComponent>
+      );
+
+      testingLib.render(component);
+
+      const element = ParentComponentRef.current!.instance().element()!;
+      const appendFn = jest.spyOn(element, 'append');
+
+      testingLib.act(() => {
+        TreeComponentRef.current?.restoreTree?.();
+      });
+
+      expect(appendFn).toHaveBeenCalledTimes(0);
+    });
   });
 
   it('renders portal component without children correctly', () => {
diff --git a/packages/devextreme-react/src/core/__tests__/test-component.tsx b/packages/devextreme-react/src/core/__tests__/test-component.tsx
index 03ef7856cf6d..b5b63ca4a8a5 100644
--- a/packages/devextreme-react/src/core/__tests__/test-component.tsx
+++ b/packages/devextreme-react/src/core/__tests__/test-component.tsx
@@ -6,11 +6,14 @@ import {
   memo,
   useImperativeHandle,
   useCallback,
+  useContext,
   useRef,
   forwardRef,
   ReactElement,
 } from 'react';
 
+import { RestoreTreeContext } from '../helpers';
+
 const eventHandlers: { [index: string]: ((e?: any) => void)[] } = {};
 
 const Widget = {
@@ -97,6 +100,18 @@ const TestPortalComponent = memo(forwardRef<TestComponentRef, any>(function Test
   );
 })) as <P = any>(props: P, ref: React.ForwardedRef<ComponentRef>) => ReactElement<any> | null;
 
+const TestRestoreTreeComponent = forwardRef((_, ref: React.ForwardedRef<{ restoreTree?: () => void }>) => {
+  const restoreParentLink = useContext(RestoreTreeContext);
+
+  useImperativeHandle(ref, () => {
+    return {
+      restoreTree: restoreParentLink
+    };
+  }, [restoreParentLink]);
+
+  return <div>Context Component</div>;
+});
+
 function fireOptionChange(fullName: string, value: unknown): void {
   eventHandlers.optionChanged?.forEach((e) => e({
     name: fullName.split('.')[0],
@@ -108,6 +123,7 @@ function fireOptionChange(fullName: string, value: unknown): void {
 export {
   TestComponent,
   TestPortalComponent,
+  TestRestoreTreeComponent,
   TestComponentRef,
   Widget,
   WidgetClass,
diff --git a/packages/devextreme-react/src/core/component-base.tsx b/packages/devextreme-react/src/core/component-base.tsx
index 99cb8fded199..dc221bed1a29 100644
--- a/packages/devextreme-react/src/core/component-base.tsx
+++ b/packages/devextreme-react/src/core/component-base.tsx
@@ -86,7 +86,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
     const prevPropsRef = useRef<P & ComponentBaseProps>();
 
     const restoreTree = useCallback(() => {
-      if (childNodes.current?.length && element.current) {
+      if (childElementsDetached.current && childNodes.current?.length && element.current) {
         element.current.append(...childNodes.current);
         childElementsDetached.current = false;
       }
diff --git a/packages/devextreme-themebuilder/package.json b/packages/devextreme-themebuilder/package.json
index 230261aee6d8..63ea41b2b9a1 100644
--- a/packages/devextreme-themebuilder/package.json
+++ b/packages/devextreme-themebuilder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-themebuilder",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "DevExtreme ThemeBuilder",
   "keywords": [
     "devextreme",
diff --git a/packages/devextreme-vue/package.json b/packages/devextreme-vue/package.json
index c0a13acf64df..4d3147bae012 100644
--- a/packages/devextreme-vue/package.json
+++ b/packages/devextreme-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-vue",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "DevExtreme Vue UI and Visualization Components",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   "author": "Developer Express Inc.",
   "license": "MIT",
   "peerDependencies": {
-    "devextreme": "~24.1.3",
+    "devextreme": "~24.2.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {
diff --git a/packages/devextreme/artifacts/npm/devextreme-dist/package.json b/packages/devextreme/artifacts/npm/devextreme-dist/package.json
index 0c75f03ee64f..2127b02e27b0 100644
--- a/packages/devextreme/artifacts/npm/devextreme-dist/package.json
+++ b/packages/devextreme/artifacts/npm/devextreme-dist/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-dist",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "HTML5 JavaScript Component Suite for Responsive Web Development",
   "keywords": [
     "html5",
diff --git a/packages/devextreme/artifacts/npm/devextreme/package.json b/packages/devextreme/artifacts/npm/devextreme/package.json
index ee63ab21eee0..b4c2e58c0d19 100644
--- a/packages/devextreme/artifacts/npm/devextreme/package.json
+++ b/packages/devextreme/artifacts/npm/devextreme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "HTML5 JavaScript Component Suite for Responsive Web Development",
   "keywords": [
     "html5",
diff --git a/packages/devextreme/js/__internal/core/license/license_validation.test.ts b/packages/devextreme/js/__internal/core/license/license_validation.test.ts
index 1c5bd8853347..aa4478366369 100644
--- a/packages/devextreme/js/__internal/core/license/license_validation.test.ts
+++ b/packages/devextreme/js/__internal/core/license/license_validation.test.ts
@@ -7,7 +7,7 @@ import {
   setLicenseCheckSkipCondition,
   validateLicense,
 } from './license_validation';
-import * as trialPanel from './trial_panel';
+import * as trialPanel from './trial_panel.client';
 
 jest.mock('./key', () => ({
   PUBLIC_KEY: {
diff --git a/packages/devextreme/js/__internal/core/license/license_validation.ts b/packages/devextreme/js/__internal/core/license/license_validation.ts
index fd1981bb7ce0..755d9826c80e 100644
--- a/packages/devextreme/js/__internal/core/license/license_validation.ts
+++ b/packages/devextreme/js/__internal/core/license/license_validation.ts
@@ -13,8 +13,7 @@ import { INTERNAL_USAGE_ID, PUBLIC_KEY } from './key';
 import { pad } from './pkcs1';
 import { compareSignatures } from './rsa_bigint';
 import { sha1 } from './sha1';
-import type { CustomTrialPanelStyles } from './trial_panel';
-import { registerCustomComponents, renderTrialPanel } from './trial_panel';
+import { showTrialPanel } from './trial_panel';
 import type {
   License,
   LicenseCheckParams,
@@ -158,22 +157,6 @@ function getLicenseCheckParams({
   }
 }
 
-export function showTrialPanel(
-  buyNowUrl: string,
-  version: string,
-  customStyles?: CustomTrialPanelStyles,
-): void {
-  if (typeof customElements !== 'undefined') {
-    renderTrialPanel(buyNowUrl, version, customStyles);
-  }
-}
-
-export function registerTrialPanelComponents(customStyles?: CustomTrialPanelStyles): void {
-  if (typeof customElements !== 'undefined') {
-    registerCustomComponents(customStyles);
-  }
-}
-
 export function validateLicense(licenseKey: string, versionStr: string = fullVersion): void {
   if (validationPerformed) {
     return;
diff --git a/packages/devextreme/js/__internal/core/license/license_validation_internal.ts b/packages/devextreme/js/__internal/core/license/license_validation_internal.ts
index dbcdbdaebe3c..df552c7a8878 100644
--- a/packages/devextreme/js/__internal/core/license/license_validation_internal.ts
+++ b/packages/devextreme/js/__internal/core/license/license_validation_internal.ts
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import type { CustomTrialPanelStyles } from './trial_panel';
 import type { Token } from './types';
 
 // @ts-expect-error - only for internal usage
@@ -7,14 +6,6 @@ export function parseLicenseKey(encodedKey: string | undefined): Token {}
 
 export function validateLicense(licenseKey: string, version?: string): void {}
 
-export function showTrialPanel(
-  buyNowUrl: string,
-  version: string,
-  customStyles?: CustomTrialPanelStyles,
-): void {}
-
-export function registerTrialPanelComponents(customStyles?: CustomTrialPanelStyles): void {}
-
 // @ts-expect-error - only for internal usage
 export function peekValidationPerformed(): boolean {}
 
diff --git a/packages/devextreme/js/__internal/core/license/trial_panel.client.ts b/packages/devextreme/js/__internal/core/license/trial_panel.client.ts
new file mode 100644
index 000000000000..60a81e1e0184
--- /dev/null
+++ b/packages/devextreme/js/__internal/core/license/trial_panel.client.ts
@@ -0,0 +1,291 @@
+/* eslint-disable max-classes-per-file */
+/* eslint no-restricted-imports: ["error", { "patterns": ["*"] }] */
+export const BASE_Z_INDEX = 1500;
+
+export interface StylesMap {
+  [key: string]: string;
+}
+
+export interface CustomTrialPanelStyles {
+  containerStyles?: StylesMap;
+  textStyles?: StylesMap;
+  linkStyles?: StylesMap;
+  contentStyles?: StylesMap;
+  buttonStyles?: StylesMap;
+}
+
+export const isClient = (): boolean => typeof HTMLElement !== 'undefined';
+
+const SafeHTMLElement = isClient()
+  ? HTMLElement
+  // eslint-disable-next-line max-len
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-extraneous-class
+  : class {} as any as typeof HTMLElement;
+
+const DATA_PERMANENT_ATTRIBUTE = 'data-permanent';
+const componentNames = {
+  trigger: 'dx-license-trigger',
+  panel: 'dx-license',
+};
+const attributeNames = {
+  buyNow: 'buy-now',
+  version: 'version',
+};
+const commonStyles = {
+  opacity: '1',
+  visibility: 'visible',
+  'clip-path': 'none',
+  filter: 'none',
+};
+const contentStyles = {
+  ...commonStyles,
+  width: '100%',
+  height: 'auto',
+  'line-height': 'normal',
+  display: 'block',
+  'z-index': `${BASE_Z_INDEX}`,
+  position: 'static',
+  transform: 'translate(0px, 0px)',
+  'background-color': '#FF7200',
+  border: 'none',
+  margin: 'auto',
+  'box-sizing': 'border-box',
+  'text-align': 'center',
+};
+const containerStyles = {
+  ...contentStyles,
+  display: 'flex',
+  'align-items': 'center',
+  'flex-direction': 'row',
+  position: 'relative',
+  top: '0px',
+  left: '0px',
+  padding: '0.5rem',
+};
+const buttonStyles = {
+  width: '1rem',
+  cursor: 'pointer',
+  height: '1rem',
+};
+
+const textStyles = {
+  ...commonStyles,
+  display: 'inline',
+  position: 'static',
+  padding: '0px',
+  margin: '0px',
+  color: 'white',
+  'font-family': '\'Segoe UI\',\'Open Sans Condensed\',-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif',
+  'font-size': '0.875rem',
+  'font-wight': '600',
+};
+
+function createImportantStyles(defaultStyles: StylesMap, customStyles?: StylesMap): string {
+  const styles = customStyles ? { ...defaultStyles, ...customStyles } : defaultStyles;
+
+  return Object.keys(styles)
+    .reduce(
+      (cssString, currentKey) => `${cssString}${[currentKey, `${styles[currentKey]} !important;`].join(': ')}`,
+      '',
+    );
+}
+
+class DxLicense extends SafeHTMLElement {
+  public static customStyles: CustomTrialPanelStyles | undefined = undefined;
+
+  private _observer: MutationObserver | null = null;
+
+  private _inReassign = false;
+
+  private _hidden = false;
+
+  private readonly _spanStyles: string;
+
+  private readonly _linkStyles: string;
+
+  private readonly _containerStyles: string;
+
+  private readonly _contentStyles: string;
+
+  private readonly _buttonStyles: string;
+
+  constructor() {
+    super();
+
+    this._spanStyles = createImportantStyles(textStyles, DxLicense.customStyles?.textStyles);
+    this._linkStyles = createImportantStyles(textStyles, DxLicense.customStyles?.linkStyles);
+
+    this._containerStyles = createImportantStyles(
+      containerStyles,
+      DxLicense.customStyles?.containerStyles,
+    );
+
+    this._contentStyles = createImportantStyles(
+      contentStyles,
+      DxLicense.customStyles?.contentStyles,
+    );
+
+    this._buttonStyles = createImportantStyles(
+      buttonStyles,
+      DxLicense.customStyles?.contentStyles,
+    );
+  }
+
+  private _createSpan(text: string): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.innerText = text;
+    span.style.cssText = this._spanStyles;
+    return span;
+  }
+
+  private _createLink(text: string, href: string): HTMLAnchorElement {
+    const link = document.createElement('a');
+    link.innerText = text;
+    link.style.cssText = this._linkStyles;
+    link.href = href;
+    link.target = '_blank';
+    return link;
+  }
+
+  private _createButton(): HTMLDivElement {
+    const button = document.createElement('div');
+    button.style.cssText = this._buttonStyles;
+
+    const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+    polygon.setAttribute('points', '13.4 12.7 8.7 8 13.4 3.4 12.6 2.6 8 7.3 3.4 2.6 2.6 3.4 7.3 8 2.6 12.6 3.4 13.4 8 8.7 12.7 13.4 13.4 12.7');
+    polygon.style.cssText = createImportantStyles({
+      fill: '#fff',
+      opacity: '.5',
+      'stroke-width': '0px',
+    });
+
+    svg.setAttribute('id', 'Layer_1');
+    svg.setAttribute('data-name', 'Layer 1');
+    svg.setAttribute('version', '1.1');
+    svg.setAttribute('viewBox', '0 0 16 16');
+    svg.style.cssText = createImportantStyles({
+      'vertical-align': 'baseline',
+    });
+
+    svg.appendChild(polygon);
+    button.appendChild(svg);
+
+    button.onclick = (): void => {
+      this._hidden = true;
+      this.style.cssText = createImportantStyles({
+        display: 'none',
+      });
+    };
+    return button;
+  }
+
+  private _createContentContainer(): HTMLElement {
+    const contentContainer = document.createElement('div');
+    contentContainer.style.cssText = this._contentStyles;
+    contentContainer.append(
+      this._createSpan('For evaluation purposes only. Redistribution not authorized. Please '),
+      this._createLink('purchase a license', this.getAttribute(attributeNames.buyNow) as string),
+      this._createSpan(` to continue use of DevExpress product libraries (v${this.getAttribute(attributeNames.version)}).`),
+    );
+    return contentContainer;
+  }
+
+  private _reassignComponent(): void {
+    this.innerHTML = '';
+    this.style.cssText = this._containerStyles;
+    this.append(
+      this._createContentContainer(),
+      this._createButton(),
+    );
+  }
+
+  public connectedCallback(): void {
+    this._reassignComponent();
+    if (!this._observer) {
+      this._observer = new MutationObserver(() => {
+        if (this._hidden) {
+          this._observer?.disconnect();
+          return;
+        }
+        if (this._inReassign) {
+          this._inReassign = false;
+        } else {
+          this._inReassign = true;
+          this._reassignComponent();
+        }
+      });
+      this._observer.observe(this, {
+        childList: true,
+        attributes: true,
+        // eslint-disable-next-line spellcheck/spell-checker
+        subtree: true,
+      });
+    }
+  }
+
+  public disconnectedCallback(): void {
+    setTimeout(() => {
+      const licensePanel = document.getElementsByTagName(componentNames.panel);
+      if (!licensePanel.length) {
+        document.body.prepend(this);
+      }
+    }, 100);
+  }
+}
+class DxLicenseTrigger extends SafeHTMLElement {
+  public connectedCallback(): void {
+    this.style.cssText = createImportantStyles({
+      display: 'none',
+    });
+
+    const licensePanel = document.getElementsByTagName(componentNames.panel);
+    if (!licensePanel.length) {
+      const license = document.createElement(componentNames.panel);
+
+      license.setAttribute(
+        attributeNames.version,
+        this.getAttribute(attributeNames.version) as string,
+      );
+
+      license.setAttribute(
+        attributeNames.buyNow,
+        this.getAttribute(attributeNames.buyNow) as string,
+      );
+
+      license.setAttribute(DATA_PERMANENT_ATTRIBUTE, 'true');
+
+      document.body.prepend(license);
+    }
+  }
+}
+
+export function registerCustomComponents(customStyles?: CustomTrialPanelStyles): void {
+  if (!customElements.get(componentNames.trigger)) {
+    DxLicense.customStyles = customStyles;
+    customElements.define(
+      componentNames.trigger,
+      DxLicenseTrigger,
+    );
+    customElements.define(
+      componentNames.panel,
+      DxLicense,
+    );
+  }
+}
+
+export function renderTrialPanel(
+  buyNowUrl: string,
+  version: string,
+  customStyles?: CustomTrialPanelStyles,
+): void {
+  registerCustomComponents(customStyles);
+
+  const trialPanelTrigger = document.createElement(componentNames.trigger);
+
+  trialPanelTrigger.setAttribute(attributeNames.buyNow, buyNowUrl);
+  trialPanelTrigger.setAttribute(attributeNames.version, version);
+
+  document.body.appendChild(trialPanelTrigger);
+}
diff --git a/packages/devextreme/js/__internal/core/license/trial_panel.ts b/packages/devextreme/js/__internal/core/license/trial_panel.ts
index d209b88e88d7..de01bfa4de55 100644
--- a/packages/devextreme/js/__internal/core/license/trial_panel.ts
+++ b/packages/devextreme/js/__internal/core/license/trial_panel.ts
@@ -1,288 +1,22 @@
-/* eslint-disable max-classes-per-file */
-/* eslint no-restricted-imports: ["error", { "patterns": ["*"] }] */
-export const BASE_Z_INDEX = 1500;
-
-export interface StylesMap {
-  [key: string]: string;
-}
-
-export interface CustomTrialPanelStyles {
-  containerStyles?: StylesMap;
-  textStyles?: StylesMap;
-  linkStyles?: StylesMap;
-  contentStyles?: StylesMap;
-  buttonStyles?: StylesMap;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-extraneous-class
-const SafeHTMLElement = typeof HTMLElement !== 'undefined' ? HTMLElement : class {};
-
-const DATA_PERMANENT_ATTRIBUTE = 'data-permanent';
-const componentNames = {
-  trigger: 'dx-license-trigger',
-  panel: 'dx-license',
-};
-const attributeNames = {
-  buyNow: 'buy-now',
-  version: 'version',
-};
-const commonStyles = {
-  opacity: '1',
-  visibility: 'visible',
-  'clip-path': 'none',
-  filter: 'none',
-};
-const contentStyles = {
-  ...commonStyles,
-  width: '100%',
-  height: 'auto',
-  'line-height': 'normal',
-  display: 'block',
-  'z-index': `${BASE_Z_INDEX}`,
-  position: 'static',
-  transform: 'translate(0px, 0px)',
-  'background-color': '#FF7200',
-  border: 'none',
-  margin: 'auto',
-  'box-sizing': 'border-box',
-  'text-align': 'center',
-};
-const containerStyles = {
-  ...contentStyles,
-  display: 'flex',
-  'align-items': 'center',
-  'flex-direction': 'row',
-  position: 'relative',
-  top: '0px',
-  left: '0px',
-  padding: '0.5rem',
-};
-const buttonStyles = {
-  width: '1rem',
-  cursor: 'pointer',
-  height: '1rem',
-};
-
-const textStyles = {
-  ...commonStyles,
-  display: 'inline',
-  position: 'static',
-  padding: '0px',
-  margin: '0px',
-  color: 'white',
-  'font-family': '\'Segoe UI\',\'Open Sans Condensed\',-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif',
-  'font-size': '0.875rem',
-  'font-wight': '600',
-};
-
-class DxLicense extends SafeHTMLElement {
-  public static customStyles: CustomTrialPanelStyles | undefined = undefined;
-
-  private readonly that = this as unknown as HTMLElement;
-
-  private _observer: MutationObserver | null = null;
-
-  private _inReassign = false;
-
-  private _hidden = false;
-
-  private readonly _spanStyles: string;
-
-  private readonly _linkStyles: string;
-
-  private readonly _containerStyles: string;
-
-  private readonly _contentStyles: string;
-
-  private readonly _buttonStyles: string;
-
-  constructor() {
-    super();
-
-    this._spanStyles = this._createImportantStyles(textStyles, DxLicense.customStyles?.textStyles);
-    this._linkStyles = this._createImportantStyles(textStyles, DxLicense.customStyles?.linkStyles);
-
-    this._containerStyles = this._createImportantStyles(
-      containerStyles,
-      DxLicense.customStyles?.containerStyles,
-    );
-
-    this._contentStyles = this._createImportantStyles(
-      contentStyles,
-      DxLicense.customStyles?.contentStyles,
-    );
-
-    this._buttonStyles = this._createImportantStyles(
-      buttonStyles,
-      DxLicense.customStyles?.contentStyles,
-    );
-  }
-
-  private _createImportantStyles(defaultStyles: StylesMap, customStyles?: StylesMap): string {
-    const styles = customStyles ? { ...defaultStyles, ...customStyles } : defaultStyles;
-
-    return Object.keys(styles)
-      .reduce(
-        (cssString, currentKey) => `${cssString}${[currentKey, `${styles[currentKey]} !important;`].join(': ')}`,
-        '',
-      );
-  }
-
-  private _createSpan(text: string): HTMLSpanElement {
-    const span = document.createElement('span');
-    span.innerText = text;
-    span.style.cssText = this._spanStyles;
-    return span;
-  }
-
-  private _createLink(text: string, href: string): HTMLAnchorElement {
-    const link = document.createElement('a');
-    link.innerText = text;
-    link.style.cssText = this._linkStyles;
-    link.href = href;
-    link.target = '_blank';
-    return link;
-  }
-
-  private _createButton(): HTMLDivElement {
-    const button = document.createElement('div');
-    button.style.cssText = this._buttonStyles;
-
-    const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-
-    polygon.setAttribute('points', '13.4 12.7 8.7 8 13.4 3.4 12.6 2.6 8 7.3 3.4 2.6 2.6 3.4 7.3 8 2.6 12.6 3.4 13.4 8 8.7 12.7 13.4 13.4 12.7');
-    polygon.style.cssText = this._createImportantStyles({
-      fill: '#fff',
-      opacity: '.5',
-      'stroke-width': '0px',
-    });
-
-    svg.setAttribute('id', 'Layer_1');
-    svg.setAttribute('data-name', 'Layer 1');
-    svg.setAttribute('version', '1.1');
-    svg.setAttribute('viewBox', '0 0 16 16');
-    svg.style.cssText = this._createImportantStyles({
-      'vertical-align': 'baseline',
-    });
-
-    svg.appendChild(polygon);
-    button.appendChild(svg);
-
-    button.onclick = (): void => {
-      this._hidden = true;
-      this.that.style.cssText = this._createImportantStyles({
-        display: 'none',
-      });
-    };
-    return button;
-  }
-
-  private _createContentContainer(): HTMLElement {
-    const contentContainer = document.createElement('div');
-    contentContainer.style.cssText = this._contentStyles;
-    contentContainer.append(
-      this._createSpan('For evaluation purposes only. Redistribution not authorized. Please '),
-      this._createLink('purchase a license', this.that.getAttribute(attributeNames.buyNow) as string),
-      this._createSpan(` to continue use of DevExpress product libraries (v${this.that.getAttribute(attributeNames.version)}).`),
-    );
-    return contentContainer;
-  }
-
-  private _reassignComponent(): void {
-    this.that.innerHTML = '';
-    this.that.style.cssText = this._containerStyles;
-    this.that.append(
-      this._createContentContainer(),
-      this._createButton(),
-    );
-  }
-
-  public connectedCallback(): void {
-    this._reassignComponent();
-    if (!this._observer) {
-      this._observer = new MutationObserver(() => {
-        if (this._hidden) {
-          this._observer?.disconnect();
-          return;
-        }
-        if (this._inReassign) {
-          this._inReassign = false;
-        } else {
-          this._inReassign = true;
-          this._reassignComponent();
-        }
-      });
-      this._observer.observe(this.that, {
-        childList: true,
-        attributes: true,
-        // eslint-disable-next-line spellcheck/spell-checker
-        subtree: true,
-      });
-    }
-  }
-
-  public disconnectedCallback(): void {
-    setTimeout(() => {
-      const licensePanel = document.getElementsByTagName(componentNames.panel);
-      if (!licensePanel.length) {
-        document.body.prepend(this.that);
-      }
-    }, 100);
-  }
-}
-class DxLicenseTrigger extends SafeHTMLElement {
-  private readonly that = this as unknown as HTMLElement;
-
-  public connectedCallback(): void {
-    this.that.style.display = 'none';
-
-    const licensePanel = document.getElementsByTagName(componentNames.panel);
-    if (!licensePanel.length) {
-      const license = document.createElement(componentNames.panel);
-
-      license.setAttribute(
-        attributeNames.version,
-        this.that.getAttribute(attributeNames.version) as string,
-      );
-
-      license.setAttribute(
-        attributeNames.buyNow,
-        this.that.getAttribute(attributeNames.buyNow) as string,
-      );
-
-      license.setAttribute(DATA_PERMANENT_ATTRIBUTE, 'true');
-
-      document.body.prepend(license);
-    }
-  }
-}
-
-export function registerCustomComponents(customStyles?: CustomTrialPanelStyles): void {
-  if (!customElements.get(componentNames.trigger)) {
-    DxLicense.customStyles = customStyles;
-    customElements.define(
-      componentNames.trigger,
-      DxLicenseTrigger as unknown as CustomElementConstructor,
-    );
-    customElements.define(
-      componentNames.panel,
-      DxLicense as unknown as CustomElementConstructor,
-    );
-  }
-}
-
-export function renderTrialPanel(
+import {
+  type CustomTrialPanelStyles,
+  isClient,
+  registerCustomComponents,
+  renderTrialPanel,
+} from './trial_panel.client';
+
+export function showTrialPanel(
   buyNowUrl: string,
   version: string,
   customStyles?: CustomTrialPanelStyles,
 ): void {
-  registerCustomComponents(customStyles);
-
-  const trialPanelTrigger = document.createElement(componentNames.trigger);
-
-  trialPanelTrigger.setAttribute(attributeNames.buyNow, buyNowUrl);
-  trialPanelTrigger.setAttribute(attributeNames.version, version);
+  if (isClient()) {
+    renderTrialPanel(buyNowUrl, version, customStyles);
+  }
+}
 
-  document.body.appendChild(trialPanelTrigger);
+export function registerTrialPanelComponents(customStyles?: CustomTrialPanelStyles): void {
+  if (isClient()) {
+    registerCustomComponents(customStyles);
+  }
 }
diff --git a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts
index 6cd28578b731..c101645afb3c 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts
@@ -303,7 +303,6 @@ export class ColumnChooserView extends ColumnsView {
     return {
       noDataText: columnChooserOptions.emptyPanelText,
       activeStateEnabled: false,
-      focusStateEnabled: false,
       hoverStateEnabled: false,
       itemTemplate(data, index, item) {
         $(item)
diff --git a/packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts b/packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts
index a885964e3c0d..3e7b58289e37 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts
@@ -114,19 +114,19 @@ const baseFixedColumns = <T extends ModuleType<ColumnsView>>(Base: T) => class B
     }
   }
 
-  private _partialUpdateFixedTable(fixedColumns) {
+  private _partialUpdateFixedTable(fixedColumns, rows) {
     const fixedTableElement = this._fixedTableElement;
     const $rows = this._getRowElementsCore(fixedTableElement);
     const $colgroup = fixedTableElement.children('colgroup');
 
     $colgroup.replaceWith(this._createColGroup(fixedColumns));
 
-    for (let i = 0; i < $rows.length; i++) {
-      this._partialUpdateFixedRow($($rows[i]), fixedColumns);
+    for (let i = 0; i < rows.length; i++) {
+      this._partialUpdateFixedRow($($rows[i]), fixedColumns, rows[i]);
     }
   }
 
-  private _partialUpdateFixedRow($row, fixedColumns) {
+  private _partialUpdateFixedRow($row, fixedColumns, row) {
     const cellElements = $row.get(0).childNodes;
     const transparentColumnIndex = getTransparentColumnIndex(fixedColumns);
     const transparentColumn = fixedColumns[transparentColumnIndex];
@@ -144,11 +144,23 @@ const baseFixedColumns = <T extends ModuleType<ColumnsView>>(Base: T) => class B
     if ($row.hasClass(GROUP_ROW_CLASS)) {
       // @ts-expect-error RowsView's method
       groupCellOptions = this._getGroupCellOptions({
-        row: $row.data('options'),
+        row,
         columns: this._columnsController.getVisibleColumns(),
       });
 
-      colspan = groupCellOptions.colspan - Math.max(0, cellElements.length - (groupCellOptions.columnIndex + 2));
+      const hasSummary = row.summaryCells.length > 0;
+      if (hasSummary) {
+        // @ts-expect-error RowsView's method
+        const alignByColumnCellCount = this._getAlignByColumnCellCount(groupCellOptions.colspan, {
+          columns: this._columnsController.getVisibleColumns(),
+          row,
+          isFixed: true,
+        });
+
+        colspan = groupCellOptions.colspan - alignByColumnCellCount;
+      } else {
+        colspan = groupCellOptions.colspan - Math.max(0, cellElements.length - (groupCellOptions.columnIndex + 2));
+      }
     }
 
     for (let j = 0; j < cellElements.length; j++) {
@@ -180,7 +192,7 @@ const baseFixedColumns = <T extends ModuleType<ColumnsView>>(Base: T) => class B
       this._isFixedTableRendering = true;
 
       if (needPartialUpdate && this.option('scrolling.legacyMode') !== true) {
-        this._partialUpdateFixedTable(fixedColumns);
+        this._partialUpdateFixedTable(fixedColumns, options?.change?.items);
         this._isFixedTableRendering = false;
       } else {
         const columnIndices = change?.columnIndices;
@@ -301,14 +313,14 @@ const baseFixedColumns = <T extends ModuleType<ColumnsView>>(Base: T) => class B
         if (options.row.summaryCells && options.row.summaryCells.length) {
           const columns = this._columnsController.getVisibleColumns();
           // @ts-expect-error DataGrid's method
-          const alignByFixedColumnCellCount = this._getAlignByColumnCellCount
-            // @ts-expect-error DataGrid's method
-            ? this._getAlignByColumnCellCount(column.colspan, {
+          const alignByFixedColumnCellCount = this._getAlignByColumnCellCount?.(
+            column.colspan,
+            {
               columns,
               row: options.row,
               isFixed: true,
-            })
-            : 0;
+            },
+          ) ?? 0;
 
           if (alignByFixedColumnCellCount > 0) {
             const transparentColumnIndex = getTransparentColumnIndex(this._columnsController.getFixedColumns());
diff --git a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
index bdb76a786fed..1acd10f617b2 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts
@@ -549,9 +549,11 @@ export class KeyboardNavigationController extends modules.ViewController {
   }
 
   private _closeEditCell() {
+    const d = Deferred();
     setTimeout(() => {
-      this._editingController.closeEditCell();
+      this._editingController.closeEditCell().always(d.resolve);
     });
+    return d;
   }
 
   /**
@@ -1055,12 +1057,13 @@ export class KeyboardNavigationController extends modules.ViewController {
     const allowEditingOnEnterKey = this._allowEditingOnEnterKey();
 
     if (isEditing || (!allowEditingOnEnterKey && direction)) {
-      this._handleEnterKeyEditingCell(eventArgs.originalEvent);
-      if (direction === 'next' || direction === 'previous') {
-        this._targetCellTabHandler(eventArgs, direction);
-      } else if (direction === 'upArrow' || direction === 'downArrow') {
-        this._navigateNextCell(eventArgs.originalEvent, direction);
-      }
+      this._handleEnterKeyEditingCell(eventArgs.originalEvent).done(() => {
+        if (direction === 'next' || direction === 'previous') {
+          this._targetCellTabHandler(eventArgs, direction);
+        } else if (direction === 'upArrow' || direction === 'downArrow') {
+          this._navigateNextCell(eventArgs.originalEvent, direction);
+        }
+      });
     } else if (allowEditingOnEnterKey) {
       this._startEditing(eventArgs);
     }
@@ -1083,6 +1086,7 @@ export class KeyboardNavigationController extends modules.ViewController {
   }
 
   private _handleEnterKeyEditingCell(event) {
+    const d = Deferred();
     const { target } = event;
     const $cell = this._getCellElementFromTarget(target);
     const isRowEditMode = this._isRowEditMode();
@@ -1094,13 +1098,16 @@ export class KeyboardNavigationController extends modules.ViewController {
       setTimeout(
         this._editingController.saveEditData.bind(this._editingController),
       );
+      d.resolve();
     } else {
       // @ts-expect-error
       eventsEngine.trigger($(target), 'change');
-      this._closeEditCell();
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      this._closeEditCell().always(d.resolve);
 
       event.preventDefault();
     }
+    return d;
   }
 
   /**
diff --git a/packages/devextreme/js/core/trial_panel.js b/packages/devextreme/js/core/trial_panel.js
index c32c9cd7d680..991c6ee3b854 100644
--- a/packages/devextreme/js/core/trial_panel.js
+++ b/packages/devextreme/js/core/trial_panel.js
@@ -1,4 +1,4 @@
-import { registerTrialPanelComponents, showTrialPanel } from '../__internal/core/license/license_validation';
+import { registerTrialPanelComponents, showTrialPanel } from '../__internal/core/license/trial_panel';
 
 export default {
     registerTrialPanelComponents,
diff --git a/packages/devextreme/js/core/version.js b/packages/devextreme/js/core/version.js
index 8e29a8be29be..6d2cd9f2ed16 100644
--- a/packages/devextreme/js/core/version.js
+++ b/packages/devextreme/js/core/version.js
@@ -1,2 +1,2 @@
-export const version = '24.1.3';
-export const fullVersion = '24.1.3';
+export const version = '24.2.0';
+export const fullVersion = '24.2.0';
diff --git a/packages/devextreme/package.json b/packages/devextreme/package.json
index 249bd8fbd0dc..f13d22d56a68 100644
--- a/packages/devextreme/package.json
+++ b/packages/devextreme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-main",
-  "version": "24.1.3",
+  "version": "24.2.0",
   "description": "HTML5 JavaScript Component Suite for Responsive Web Development",
   "keywords": [
     "html5",
diff --git a/packages/devextreme/ports.json b/packages/devextreme/ports.json
index 1b762e33b264..729287722a58 100644
--- a/packages/devextreme/ports.json
+++ b/packages/devextreme/ports.json
@@ -1,4 +1,4 @@
 {
-  "qunit": "20030",
-  "vectormap-utils-tester": "20031"
+  "qunit": "20040",
+  "vectormap-utils-tester": "20041"
 }
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.customization.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.customization.tests.js
index ead0c7800fa3..1bcf160b6b9c 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.customization.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.customization.tests.js
@@ -1066,7 +1066,7 @@ QUnit.module('Customize keyboard navigation', {
         assert.equal($editor.find('.dx-texteditor-input').val(), 'D', 'input value');
 
         // act
-        this.triggerKeyDown('enter');
+        this.triggerKeyDown('enter', false, false, $editor.find('input'));
         this.clock.tick(10);
 
         $editor = $('.dx-texteditor').eq(0);
@@ -1117,7 +1117,7 @@ QUnit.module('Customize keyboard navigation', {
         assert.equal($editor.find('.dx-texteditor-input').val(), 'D', 'input value');
 
         // act
-        this.triggerKeyDown('enter');
+        this.triggerKeyDown('enter', false, false, $editor.find('input'));
         this.clock.tick(10);
 
         $editor = $('.dx-texteditor').eq(0);
@@ -1169,7 +1169,7 @@ QUnit.module('Customize keyboard navigation', {
         assert.equal($editor.find('.dx-texteditor-input').val(), 'D', 'input value');
 
         // act
-        this.triggerKeyDown('enter');
+        this.triggerKeyDown('enter', false, false, $editor.find('input'));
         this.clock.tick(10);
 
         $editor = $('.dx-texteditor').eq(0);
@@ -1220,7 +1220,7 @@ QUnit.module('Customize keyboard navigation', {
         assert.equal($editor.find('.dx-texteditor-input').val(), 'D', 'input value');
 
         // act
-        this.triggerKeyDown('enter');
+        this.triggerKeyDown('enter', false, false, $editor.find('input'));
         this.clock.tick(10);
 
         $editor = $('.dx-texteditor').eq(0);
@@ -1272,7 +1272,7 @@ QUnit.module('Customize keyboard navigation', {
         assert.equal($editor.find('.dx-texteditor-input').val(), 'D', 'input value');
 
         // act
-        this.triggerKeyDown('enter');
+        this.triggerKeyDown('enter', false, false, $editor.find('input'));
         this.clock.tick(10);
 
         $editor = $('.dx-texteditor').eq(0);
@@ -2007,7 +2007,7 @@ QUnit.module('Customize keyboard navigation', {
         assert.ok(this.keyboardNavigationController._isFastEditingStarted(), 'Fast editing mode');
         assert.equal($input.val(), '#_1.00', 'input value');
 
-        this.triggerKeyDown('enter');
+        this.triggerKeyDown('enter', false, false, $input);
         this.clock.tick(10);
 
         // arrange, assert
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js
index 42a5c33fee92..3e054cd73df3 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js
@@ -6822,6 +6822,43 @@ QUnit.module('performance', () => {
         assert.ok($.isFunction(filter), 'filter is function');
     });
 
+    [false, true].forEach(changeAtRuntime => {
+        QUnit.test(`tag labels should be correctly displayed with valueExpr as function and hideSelectedItems enabled ${changeAtRuntime ? 'at runtime' : ''} (T1234032)`, function(assert) {
+            const dataSource = [
+                { id: 1, scheme: 'schema 1', name: 'item1' },
+                { id: 2, scheme: 'schema 2', name: 'item2' },
+                { id: 3, scheme: 'schema 3', name: 'item3' },
+            ];
+
+            const $tagBox = $('#tagBox').dxTagBox({
+                dataSource,
+                valueExpr(x) {
+                    return x && x.name + ' ' + x.scheme;
+                },
+                displayExpr: 'name',
+                hideSelectedItems: !changeAtRuntime,
+                opened: true,
+            });
+
+            const tagBox = $tagBox.dxTagBox('instance');
+            const $list = tagBox._list.$element();
+
+            tagBox.option('hideSelectedItems', true);
+
+            $($list.find(`.${LIST_ITEM_CLASS}`).eq(0)).trigger('dxclick');
+
+            tagBox.open();
+            $($list.find(`.${LIST_ITEM_CLASS}`).eq(0)).trigger('dxclick');
+
+            tagBox.open();
+            $($list.find(`.${LIST_ITEM_CLASS}`).eq(0)).trigger('dxclick');
+
+            const $tagContainer = $tagBox.find(`.${TAGBOX_TAG_CONTAINER_CLASS}`);
+
+            assert.strictEqual($.trim($tagContainer.text()), 'item1item2item3', 'label values are displayed correctly');
+        });
+    });
+
     QUnit.test('loadOptions.filter should be correct when user filter is also used', function(assert) {
         const load = sinon.stub().returns([{ id: 1, text: 'item 1' }, { id: 2, text: 'item 2' }]);
 
diff --git a/packages/testcafe-models/dataGrid/columnChooser.ts b/packages/testcafe-models/dataGrid/columnChooser.ts
index 3cd048cd39ac..6fc28eebca5d 100644
--- a/packages/testcafe-models/dataGrid/columnChooser.ts
+++ b/packages/testcafe-models/dataGrid/columnChooser.ts
@@ -1,4 +1,4 @@
-import { Selector } from 'testcafe';
+import { ClientFunction, Selector } from 'testcafe';
 // eslint-disable-next-line max-classes-per-file
 import FocusableElement from '../internal/focusable';
 
@@ -7,6 +7,8 @@ const CLASS = {
   overlayWrapper: 'dx-overlay-wrapper',
   columnChooser: 'dx-datagrid-column-chooser',
   checkboxIcon: 'dx-checkbox-icon',
+  treeViewItem: 'dx-treeview-item',
+  treeView: 'dx-treeview',
 };
 
 export default class ColumnChooser extends FocusableElement {
@@ -24,7 +26,25 @@ export default class ColumnChooser extends FocusableElement {
     this.isOpened = this.body.find(`.${CLASS.overlayWrapper}.${CLASS.columnChooser}`).exists;
   }
 
+  async focusList() {
+    const treeView = this.content.find(`.${CLASS.treeView}`);
+
+    await ClientFunction((container) => {
+      const $treeView = $(container());
+
+      $treeView.trigger('focus');
+    }, {
+      dependencies: {
+        treeView,
+      }
+    })(treeView);
+  }
+
   getCheckboxIcon(nth = 0): Selector {
     return this.content.find(`.${CLASS.checkboxIcon}`).nth(nth);
   }
+
+  getColumn(index = 0): Selector {
+    return this.content.find(`.${CLASS.treeViewItem}`).nth(index);
+  }
 }
diff --git a/packages/testcafe-models/dataGrid/index.ts b/packages/testcafe-models/dataGrid/index.ts
index aadec7af9e1b..d17cd93bfc74 100644
--- a/packages/testcafe-models/dataGrid/index.ts
+++ b/packages/testcafe-models/dataGrid/index.ts
@@ -649,6 +649,24 @@ export default class DataGrid extends Widget {
     )();
   }
 
+  moveColumnChooserColumn(columnIndex: number, x: number, y: number, isStart = false): Promise<void> {
+    const columnChooser = this.getColumnChooser();
+    const column = columnChooser.getColumn(columnIndex);
+
+    return ClientFunction(
+      (column) => {
+        const $column = $(column());
+
+        moveElement($column, x, y, isStart);
+      },
+      {
+        dependencies: {
+          column, x, y, isStart, moveElement,
+        },
+      },
+    )(column);
+  }
+
   hide(): Promise<void> {
     const { getInstance } = this;
 
diff --git a/packages/testcafe-models/package.json b/packages/testcafe-models/package.json
index f601281d9ca1..4d99ae6e14f5 100644
--- a/packages/testcafe-models/package.json
+++ b/packages/testcafe-models/package.json
@@ -3,5 +3,5 @@
   "peerDependencies": {
     "testcafe": "*"
   },
-  "version": "24.1.3"
+  "version": "24.2.0"
 }