Data Layer section overhaul (#6978)

concepts/70 Data Binding/5 Data Layer/0 Overview.md

@@ -1,8 +1,8 @@
 DevExtreme includes a data layer, which is a set of complementary components that enable you to read and write data. The core data layer objects are [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/') and [Stores](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/3%20What%20Are%20Stores.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/What_Are_Stores').
 
-The DataSource is intended to simplify working with data, whether it be an in-memory array, a local browser storage, remote service, or any custom storage. The DataSource is a stateful object that keeps sorting, grouping, filtering, and keeps data transformation properties and applies them each time data is loaded. It also provides [events](/api-reference/30%20Data%20Layer/DataSource/4%20Events '/Documentation/ApiReference/Data_Layer/DataSource/Events/') intended to handle changing data and the state.
+DataSource simplifies working with data, whether it be an in-memory array, a local browser storage, remote service, or any custom storage. DataSource is a stateful object that maintains sorting, grouping, filtering, and data transformation properties and applies them each time data is loaded. It also includes [events](/api-reference/30%20Data%20Layer/DataSource/4%20Events '/Documentation/ApiReference/Data_Layer/DataSource/Events/') intended to handle changing data and the state.
 
-The DataSource underlying data access logic is isolated in a Store. Unlike the DataSource, a Store is a stateless object implementing a universal interface for reading and modifying data. Each Store contains the same set of methods. For more information about Stores refer to the [What Are Stores](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/3%20What%20Are%20Stores.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/What_Are_Stores') section of this article.
+The DataSource's underlying data access logic is isolated in a Store. Unlike the DataSource, a Store is a stateless object that implements a universal interface to read and modify data. Each Store contains the same set of methods. For more information about Stores, refer to the [What Are Stores](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/3%20What%20Are%20Stores.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/What_Are_Stores') section of this article.
 
 The following picture illustrates how the DataSource and Stores interact.
 

concepts/70 Data Binding/5 Data Layer/05 Asynchrony.md

@@ -2,7 +2,7 @@
 
 ##### jQuery
 
-All Data transferring operations in the data layer are asynchronous, whether it be an access to a remote service or to local data. It is made to support the universal Store interface, regardless of the source of data you access. These operations return a <a href="http://api.jquery.com/Types/#Promise" target="_blank">jQuery.Promise</a>. Use this Promise to specify callbacks for successful operation completion and for operation failure.
+All data transfer operations in the data layer are asynchronous for both remote services and local data access. This setup supports the universal Store interface for any data source. The data transfer operations return a <a href="http://api.jquery.com/Types/#Promise" target="_blank">jQuery.Promise</a>. Use this Promise to specify callbacks for successful operation completion and operation failure.
 
     <!--JavaScript-->
     dataSource.load()
@@ -15,7 +15,7 @@ All Data transferring operations in the data layer are asynchronous, whether it
 
 ##### Angular
 
-All Data transferring operations in the data layer are asynchronous, whether it be an access to a remote service or to local data. It is made to support the universal Store interface, regardless of the source of data you access. These operations return a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">native Promise</a>. Use this Promise to specify callbacks for successful operation completion and for operation failure.
+All data transfer operations in the data layer are asynchronous for both remote services and local data access. This setup supports the universal Store interface for any data source. The data transfer operations return a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">native Promise</a>. Use this Promise to specify callbacks for successful operation completion and operation failure.
 
     <!--JavaScript-->
     dataSource.load()
@@ -28,7 +28,7 @@ All Data transferring operations in the data layer are asynchronous, whether it
 
 ##### Vue
 
-All Data transferring operations in the data layer are asynchronous, whether it be an access to a remote service or to local data. It is made to support the universal Store interface, regardless of the source of data you access. These operations return a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">native Promise</a>. Use this Promise to specify callbacks for successful operation completion and for operation failure.
+All data transfer operations in the data layer are asynchronous for both remote services and local data access. This setup supports the universal Store interface for any data source. The data transfer operations return a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">native Promise</a>. Use this Promise to specify callbacks for successful operation completion and operation failure.
 
     <!--JavaScript-->
     dataSource.load()
@@ -41,7 +41,7 @@ All Data transferring operations in the data layer are asynchronous, whether it
 
 ##### React
 
-All Data transferring operations in the data layer are asynchronous, whether it be an access to a remote service or to local data. It is made to support the universal Store interface, regardless of the source of data you access. These operations return a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">native Promise</a>. Use this Promise to specify callbacks for successful operation completion and for operation failure.
+All data transfer operations in the data layer are asynchronous for both remote services and local data access. This setup supports the universal Store interface for any data source. The data transfer operations return a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank">native Promise</a>. Use this Promise to specify callbacks for successful operation completion and operation failure.
 
     <!--JavaScript-->
     dataSource.load()

concepts/70 Data Binding/5 Data Layer/1 Creating DataSource/0 From Array.md

@@ -1,10 +1,10 @@
 Pass the required array to the DataSource constructor.
 
-    <!--JavaScript-->var dataSource = new DevExpress.data.DataSource(array);
+    <!--JavaScript-->const dataSource = new DevExpress.data.DataSource(array);
 
 If you need to specify other DataSource [configuration properties](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/'), use another form.
 
-    <!--JavaScript-->var dataSource = new DevExpress.data.DataSource({
+    <!--JavaScript-->const dataSource = new DevExpress.data.DataSource({
         // array of data
         store: array,
 

concepts/70 Data Binding/5 Data Layer/1 Creating DataSource/1 From url.md

@@ -1,10 +1,10 @@
 If you pass a string to the DataSource constructor, the DataSource will access the data returned by the AJAX request to the URL specified by this string.
 
-    <!--JavaScript-->var dataSource = new DevExpress.data.DataSource("http://www.example.com/dataservices/jsondata");
+    <!--JavaScript-->const dataSource = new DevExpress.data.DataSource("http://www.example.com/dataservices/jsondata");
 
-You may also use a JSONP callback parameter.
+You can also use a JSONP callback parameter.
 
-    <!--JavaScript-->var dataSource = new DevExpress.data.DataSource("http://www.example.com/dataservices/jsonpdata?callback=?");
+    <!--JavaScript-->const dataSource = new DevExpress.data.DataSource("http://www.example.com/dataservices/jsonpdata?callback=?");
 
 #####See Also#####
 - [Load Data in Raw Mode](/concepts/70%20Data%20Binding/51%20Data%20Source%20Examples/3%20Custom%20Sources/1%20Load%20Data%20in%20Raw%20Mode.md '/Documentation/Guide/Data_Binding/Data_Source_Examples/#Custom_Sources/Load_Data_in_Raw_Mode')

concepts/70 Data Binding/5 Data Layer/1 Creating DataSource/2 From Store.md

@@ -1,24 +1,24 @@
 Pass a Store instance to the DataSource constructor.
 
-    <!--JavaScript-->var store = new DevExpress.data.ArrayStore(data);
-    var dataSource = new DevExpress.data.DataSource(store);
+    <!--JavaScript-->const store = new DevExpress.data.ArrayStore(data);
+    const dataSource = new DevExpress.data.DataSource(store);
 
-If you need to specify other DataSource [properties](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/'), use the following code.
+If you need to specify other DataSource [properties](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/'), use the following code:
 
-    <!--JavaScript-->var store = new DevExpress.data.ArrayStore(array);
-    var dataSource = new DevExpress.data.DataSource({
+    <!--JavaScript-->const store = new DevExpress.data.ArrayStore(array);
+    const dataSource = new DevExpress.data.DataSource({
         sort: "name",
         pageSize: 10,
         store: store
     });
 
 In this example, the Store instance is passed to the [store](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/store '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#store') configuration property.
 
-A Store can be specified implicitly. Two possibilities are described above ([From Array](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/0%20From%20Array.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/From_Array') and [From Url](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/1%20From%20url.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/From_url')). In addition, you can use the following.
+A Store can be specified implicitly. Two methods are described above ([From Array](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/0%20From%20Array.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/From_Array') and [From Url](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/1%20From%20url.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/From_url')). You can also use the following methods:
 
 - Add the properties implementing the required data access logic to the DataSource configuration object. In this case, the [CustomStore](/api-reference/30%20Data%20Layer/CustomStore '/Documentation/ApiReference/Data_Layer/CustomStore/') will be automatically created within the DataSource. The properties should correspond to the [CustomStore configuration properties](/api-reference/30%20Data%20Layer/CustomStore/1%20Configuration '/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/').
 
-        <!--JavaScript-->var dataSource = new DevExpress.data.DataSource({
+        <!--JavaScript-->const dataSource = new DevExpress.data.DataSource({
             //DataSource configuration
             sort: "name",
             pageSize: 10,
@@ -32,9 +32,9 @@ A Store can be specified implicitly. Two possibilities are described above ([Fro
             ...
         });
 
-- Pass a Store configuration object. Besides the required Store configuration properties, this object should contain the **type** property that specifies which Store object will be created within the DataSource. 
+- Pass a Store configuration object. This object should include the required Store configuration properties and the **type** property. **type** specifies which Store object will be created within the DataSource. 
 
-        <!--JavaScript-->var dataSource = new DevExpress.data.DataSource({
+        <!--JavaScript-->const dataSource = new DevExpress.data.DataSource({
             store: {
                 type: "array",
                 data: array

concepts/70 Data Binding/5 Data Layer/1 Creating DataSource/Creating DataSource.md

@@ -1 +1 @@
-To create a [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/') instance, call the DataSource constructor and pass the required [configuration object](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/') to this constructor. This section covers the ways to associate the required data with the DataSource instance being created. You can use one of these properties to create a DataSource instance.
+To create a [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/') instance, call the DataSource constructor and pass the required [configuration object](/api-reference/30%Data%20Layer/DataSource/1%Configuration '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/'). This section explains how to link the required data with the new DataSource instance. Use one of the following properties to create the DataSource instance.

concepts/70 Data Binding/5 Data Layer/2 Reading Data/0 Paging.md

@@ -1,12 +1,12 @@
-By default, the DataSource loads items by pages. Page size is determined by the [pageSize](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/pageSize.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#pageSize') configuration property of the DataSource. 
+DataSource loads items by pages. The [pageSize](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/pageSize.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#pageSize') configuration property determines the page size.
 
     <!--JavaScript-->
-    var dataSource = new DevExpress.data.DataSource({
+    const dataSource = new DevExpress.data.DataSource({
         pageSize: 30,
         . . .
     });
 
-The current page index can be accessed and modified via the [pageIndex()](/api-reference/30%20Data%20Layer/DataSource/3%20Methods/pageIndex().md '/Documentation/ApiReference/Data_Layer/DataSource/Methods/#pageIndex') and [pageIndex(newIndex)](/api-reference/30%20Data%20Layer/DataSource/3%20Methods/pageIndex(newIndex).md '/Documentation/ApiReference/Data_Layer/DataSource/Methods/#pageIndexnewIndex') methods respectively. 
+Access and change the current page index with the [pageIndex()](/api-reference/30%20Data%20Layer/DataSource/3%20Methods/pageIndex().md '/Documentation/ApiReference/Data_Layer/DataSource/Methods/#pageIndex') and [pageIndex(newIndex)](/api-reference/30%20Data%20Layer/DataSource/3%20Methods/pageIndex(newIndex).md '/Documentation/ApiReference/Data_Layer/DataSource/Methods/#pageIndexnewIndex') methods.
 
     <!--JavaScript-->
     dataSource.pageIndex(1); // Switch to the next page
@@ -15,7 +15,7 @@ The current page index can be accessed and modified via the [pageIndex()](/api-r
 To disable paging, assign **false** to the [paginate](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/paginate.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#paginate') configuration property of the [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/').
 
     <!--JavaScript-->
-    var dataSource = new DevExpress.data.DataSource({
+    const dataSource = new DevExpress.data.DataSource({
         paginate: false,
         . . .
     });

concepts/70 Data Binding/5 Data Layer/2 Reading Data/1 Sorting.md

@@ -1,8 +1,8 @@
 [DataSources](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/') and [Stores](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/3%20What%20Are%20Stores.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/What_Are_Stores') use sort expressions to specify sorting conditions and direction.
 
-For an example, declare  a **Person** class.
+For example, declare a **Person** class:
 
-    <!--JavaScript-->var Person = function(firstName, lastName, city) {
+    <!--JavaScript-->const Person = function(firstName, lastName, city) {
         this.firstName = firstName;
         this.lastName = lastName;
         this.address = {
@@ -13,20 +13,20 @@ For an example, declare  a **Person** class.
         return this.firstName + " " + this.lastName;
     };
 
-After the **Person** class is created, declare a **data** array holding several instances of this class.
+Declare a **data** array with multiple instances of the **Person** class:
 
-    <!--JavaScript-->var data = [
+    <!--JavaScript-->const data = [
         new Person("John", "Smith", "San Francisco"),
         new Person("John", "Doe", "New York"),
         new Person("Xavier", "Gomez", "Denver"),
         new Person("Xavier", "Lee", "New Mexico")
     ];
 
-Create a simple [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/').
+Create [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/'):
 
-    <!--JavaScript-->var dataSource = new DevExpress.data.DataSource(data);
+    <!--JavaScript-->const dataSource = new DevExpress.data.DataSource(data);
 
-The sorting condition can be specified using the [sort](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/sort.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#sort') configuration property or the [sort(sortExpr)](/api-reference/30%20Data%20Layer/DataSource/3%20Methods/sort(sortExpr).md '/Documentation/ApiReference/Data_Layer/DataSource/Methods/#sortsortExpr') method of the DataSource. The value assigned to the property or passed to the method is a sorting expression, which can have one of the following formats.
+Specify the sorting condition with the [sort](/api-reference/30%20Data%20Layer/DataSource/1%20Configuration/sort.md '/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#sort') configuration property or the [sort(sortExpr)](/api-reference/30%20Data%20Layer/DataSource/3%20Methods/sort(sortExpr).md '/Documentation/ApiReference/Data_Layer/DataSource/Methods/#sortsortExpr') method of the DataSource. You can pass a sorting expression to the property/method in one of the following formats:
 
 - **A single expression**
 
@@ -35,7 +35,7 @@ The sorting condition can be specified using the [sort](/api-reference/30%20Data
             // 'result' contains the 'data' array items sorted by 'lastName'
         });
 
- To sort data in descending order, pass an object containing the **getter** (**field** or **selector** - they are equivalents) and **desc** properties to the sort method.
+ To sort data in descending order, pass an object containing the **getter** (**field** or **selector** - they are equivalents) and **desc** properties to the sort method:
 
         <!--JavaScript-->dataSource.sort({ getter: "lastName", desc: true });
         dataSource.load().done(function(result) {
@@ -66,7 +66,7 @@ The sorting condition can be specified using the [sort](/api-reference/30%20Data
             // 'result' contains the 'data' array items sorted by 'fullName' and then by 'address.city' in the descending order
         });
 
- You can pass an array of expressions instead of using several arguments.
+ You can pass an array of expressions instead of using multiple arguments.
 
         <!--JavaScript-->dataSource.sort([
             "firstName",
@@ -80,7 +80,7 @@ The sorting condition can be specified using the [sort](/api-reference/30%20Data
 
 [Stores](/concepts/70%20Data%20Binding/5%20Data%20Layer/1%20Creating%20DataSource/3%20What%20Are%20Stores.md '/Documentation/Guide/Data_Binding/Data_Layer/#Creating_DataSource/What_Are_Stores') support the same sort expression syntax as the [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/').
 
-    <!--JavaScript-->var arrayStore = new DevExpress.data.ArrayStore(data);
+    <!--JavaScript-->const arrayStore = new DevExpress.data.ArrayStore(data);
     arrayStore
         .load({
             sort: [