[update] data collection guides and related docs

Author: mafanya23

docs/data_collection/api/datacollection_group_method.md

@@ -43,8 +43,8 @@ group(order: TGroupOrder[], config?: IGroupConfig): void;
     <tbody>
         <tr>
             <td><b>order</b></td>
-            <td> (<i>array</i>) an array that defines the order and configuration for data grouping. Each element in the array can be:<ul><li>a string that represents a grouping field</li><li>a function `(i: IDataItem) => string` for dynamic defining of a group</li><li>an `IGroupOrder` object that has the following properties:<ul><li><b>`by: string | function`</b> - the field name or a function for user-defined grouping</li><li><b>`map?: object`</b> - optional, an object for data aggregation in a group, where the keys are field names, and the values can be:
-            <ul><li>a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the <a href="../../../helpers/data_calculation_functions/">`dhx.methods`</a> helper</li><li> a user-defined aggregation function `(i: IDataItem[]) => string | number`</li></ul></li><li><b>`summary?: string`</b> - optional, specifies where the total row is rendered - at the `top` or at the `bottom` of the group </li></ul></li></ul></td>
+            <td> (<i>array</i>) an array that defines the order and configuration for data grouping. Each element in the array can be:<ul><li>a string that represents a grouping field</li><li>a function `(item: IDataItem) => string` for dynamic defining of a group</li><li>an `IGroupOrder` object that has the following properties:<ul><li><b>`by: string | function`</b> - the field name or a function for user-defined grouping</li><li><b>`map?: object`</b> - optional, an object for data aggregation in a group, where the keys are field names, and the values can be:
+            <ul><li>a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the <a href="../../../helpers/data_calculation_functions/">`dhx.methods`</a> helper</li><li> a user-defined aggregation function `(item: IDataItem[]) => string | number`</li></ul></li><li><b>`summary?: string`</b> - optional, specifies where the total row is rendered - at the `top` or at the `bottom` of the group </li></ul></li></ul></td>
         </tr>
         <tr>
             <td><b>config</b></td>

docs/data_collection/api/datacollection_remove_method.md

@@ -16,7 +16,7 @@ description: You can explore the remove method of DataCollection in the document
 @example:
 component.data.remove("2");
 //or
-component.data.remove([ "2", "4" ]);
+component.data.remove(["2", "4"]);
 
 @descr:
 

docs/grid/data_loading.md

@@ -73,7 +73,7 @@ const grid = new dhx.Grid("grid_container", {
     columns: [
         // columns config
     ],
-    data: dataset
+    // more options
 });
 ~~~
 
@@ -91,7 +91,12 @@ There are two ways to load data into Grid after its initialization:
 To load data from an external file, make use of the **load()** method of [Data Collection](data_collection.md). It takes the URL of the file with data as a parameter:
 
 ~~~jsx
-const grid = new dhx.Grid("grid_container");
+const grid = new dhx.Grid("grid_container", {
+    columns: [
+        // columns config
+    ],
+    // more options
+});
 grid.data.load("../common/dataset.json");
 ~~~
 
@@ -112,7 +117,12 @@ grid.data.load("/some/data").then(function(){
 To load data from a local data source, use the `parse()` method of [Data Collection](data_collection.md). Pass [a predefined data set](#preparing-data-set) as a parameter of this method:
 
 ~~~jsx
-const grid = new dhx.Grid("grid_container");
+const grid = new dhx.Grid("grid_container", {
+    columns: [
+        // columns config
+    ],
+    // more options
+});
 grid.data.parse(dataset);
 ~~~
 
@@ -126,7 +136,7 @@ Note that for loading data from a **CSV file** into a grid, you need to:
 Check the example below:
 
 ~~~jsx
-const grid = new dhx.Grid("grid", {
+const grid = new dhx.Grid("grid_container", {
     columns: [
         { width: 150, id: "country", header: [{ text: "Country" }] },
         { width: 150, id: "population", header: [{ text: "Population" }] },
@@ -148,7 +158,7 @@ grid.data.parse(csvData, csvDataDriver);
 
 ## Saving and restoring state
 
-To save the current state of a grid, use the **serialize()** method of [Data Collection](data_collection.md). It converts the data of a grid into an array of JSON objects.
+To save the current state of a grid, use the `serialize()` method of [Data Collection](data_collection.md). It converts the data of a grid into an array of JSON objects.
 Each JSON object contains the configuration of a separate row.
 
 ~~~jsx
@@ -159,7 +169,12 @@ Then you can parse the data stored in the saved state array to a different grid.
 
 ~~~jsx
 // creating a new grid
-const grid2 = new dhx.Grid(document.body);
+const grid2 = new dhx.Grid("grid_container", {
+    columns: [
+        // columns config
+    ],
+    // more options
+});
 // parsing the state of grid1 into grid2
 grid2.data.parse(state);
 ~~~
@@ -186,7 +201,12 @@ new dhx.LazyDataProxy("https://docs.dhtmlx.com/suite/backend/lazyload", {
 - load data into Grid via the `load()` method of Data Collection and pass `lazyDataProxy` as a parameter of this method:
 
 ~~~jsx
-const grid = new dhx.Grid("grid_container");
+const grid = new dhx.Grid("grid_container", {
+    columns: [
+        // columns config
+    ],
+    // more options
+});
 grid.data.load(lazyDataProxy);
 ~~~
 

docs/grid/usage.md

@@ -1021,12 +1021,12 @@ The method takes the following parameters:
 
 - `order` - an array that defines the order and configuration for data grouping. Each element in the array can be:
     - a string that represents a grouping field
-    - a function `(i: IDataItem) => string` for dynamic defining of a group
+    - a function `(item: IDataItem) => string` for dynamic defining of a group
     - an `IGroupOrder` object that has the following properties:
         - `by` - the field name or a function for user-defined grouping
         - `map` - (optional) an object for data aggregation in a group, where the keys are field names, and the values can be:
             - a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the [`dhx.methods`](helpers/data_calculation_functions.md) helper
-            - a user-defined aggregation function `(i: IDataItem[]) => string | number`
+            - a user-defined aggregation function `(item: IDataItem[]) => string | number`
         - `summary` - (optional) specifies where the total row is rendered - at the `top` or at the `bottom` of the group 
 - `config` - (optional) the configuration of data grouping
     - `showMissed` - (optional) specifies whether the elements that don't have the field for grouping should be displayed, *true* by default

docs/guides/datacollection/grouping_data.md

@@ -16,23 +16,21 @@ The DataCollection API can be used for working with [data grouping in Grid](grid
 
 ## Grouping data 
 
-The [`group()`](data_collection/api/datacollection_group_method.md) method of DataCollection groups data in a collection that has a plain tree-like structure according to the specified order and additional configuration. The method takes the following parameters:
-
-- `order` - an array that defines the order and configuration for data grouping. Each element in the array can be:
-	- a string that represents a grouping field
-	- a function `(i: IDataItem) => string` for dynamic defining of a group
-	- an `IGroupOrder` object that has the following properties:
-		- `by` - the field name or a function for user-defined grouping
-		- `map` - (optional) an object for data aggregation in a group, where the keys are field names, and the values can be:
-            - a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the [`dhx.methods`](helpers/data_calculation_functions.md) helper
-            - a user-defined aggregation function `(i: IDataItem[]) => string | number`
-        - `summary` - (optional) specifies where the total row is rendered - at the `top` or at the `bottom` of the group 
-- `config` - (optional) the configuration of data grouping
-    - `showMissed` - (optional) specifies whether the elements that don't have the field for grouping should be displayed, *true* by default
-        - if set to *true*, the rows that don't have values for grouping are rendered row by row after all the data
-        - if a *string* value is set, e.g. "Missed", the rows that don't have values for grouping are rendered as a separate group the name of which will have the specified string value. This group will be rendered as the last one
-        - if set to *false*, the rows that don't suit the grouping criteria won't be rendered
-    - `field` - (optional) the group field name, *"group"* by default
+The [`group()`](data_collection/api/datacollection_group_method.md) method of DataCollection groups data in a collection that has a flat tree structure according to the specified order and additional configuration. The method takes the following parameters:
+
+<table>
+    <tbody>
+        <tr>
+            <td><b>order</b></td>
+            <td> (<i>array</i>) an array that defines the order and configuration for data grouping. Each element in the array can be:<ul><li>a string that represents a grouping field</li><li>a function `(item: IDataItem) => string` for dynamic defining of a group</li><li>an `IGroupOrder` object that has the following properties:<ul><li><b>`by: string | function`</b> - the field name or a function for user-defined grouping</li><li><b>`map?: object`</b> - optional, an object for data aggregation in a group, where the keys are field names, and the values can be:
+            <ul><li>a tuple `[string, TAggregate]` that specifies the field and the aggregation type ("sum", "count", "min", "max", "avg") from the <a href="../../../helpers/data_calculation_functions/">`dhx.methods`</a> helper</li><li> a user-defined aggregation function `(item: IDataItem[]) => string | number`</li></ul></li><li><b>`summary?: string`</b> - optional, specifies where the total row is rendered - at the `top` or at the `bottom` of the group </li></ul></li></ul></td>
+        </tr>
+        <tr>
+            <td><b>config</b></td>
+            <td>(<i>object</i>) optional, the configuration of data grouping. The configuration object may include the following properties:<ul><li><b>`showMissed?: boolean | string`</b> - optional, specifies whether the elements that don't have the field for grouping should be displayed, *true* by default<ul><li>if set to *true*, the rows that don't have values for grouping are rendered row by row after all the data</li><li>if a *string* value is set, e.g. "Missed", the rows that don't have values for grouping are rendered as a separate group the name of which will have the specified string value. This group will be rendered as the last one</li><li>if set to *false*, the rows that don't suit the grouping criteria won't be rendered</li></ul></li><li><b>`field?: string`</b> - optional, the group field name, *"group"* by default</li></ul></td>
+        </tr>
+    </tbody>
+</table>
 
 There are several examples of grouping Grid data via the `group()` method of DataCollection:
 

docs/guides/datacollection/loading_data.md

@@ -6,7 +6,7 @@ description: You can learn how to load and save data with DataCollection in the
 
 # Loading and saving data
 
-You can load data into a component from an external file or from a local data source via the DataCollection API. It also allows saving the state of a component and sending it to a different component, as well as saving changes made in the data to the server side. 
+You can load data into a component from an external file, a local data source or the server side via the DataCollection API. It also allows saving the state of a component and sending it to a different component, as well as saving changes made in the data to the server side. 
 
 :::info
 Please note that if you specify the `id` fields in the loaded data collection, their values should be **unique**. You can also omit the `id` fields in the data collection. In this case they will be generated automatically.
@@ -27,7 +27,7 @@ The component will make an AJAX call and expect the remote URL to provide valid
 Data loading is asynchronous, so you need to wrap any after-loading code into a promise:
 
 ~~~jsx
-component.data.load(url).then(function(){
+component.data.load(url).then(function () {
     // do something after load
 });
 ~~~
@@ -36,7 +36,7 @@ or
 
 ~~~jsx
 component.data.load(url);
-component.data.loadData.then(function(){
+component.data.loadData.then(function () {
     // do something after load
 });
 // loadData executes a callback function after an asynchronous
@@ -74,6 +74,70 @@ dataview.data.parse(dataset);
 
 **Related sample**: [Data. Parse](https://snippet.dhtmlx.com/0zrxtmvi)
 
+## Dynamic loading
+
+:::tip pro version only
+This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package
+:::
+
+You can load data from the server into DHTMLX Grid or DHTMLX List dynamically. It means that data is loaded 
+partially, on demand, and only those records that are in the visible area are rendered. 
+
+To use this functionality, you should take the following steps:
+
+- initialize the `LazyDataProxy` helper as described in the [Dynamic Loading](helpers/lazydataproxy.md) article:
+
+~~~jsx
+new dhx.LazyDataProxy("https://docs.dhtmlx.com/suite/backend/lazyload", {
+    limit: 30,
+    prepare: 5,
+    delay: 150,
+    from: 0
+});
+~~~
+
+:::info
+To enable dynamic rendering of List items, switch on the `virtual` property of the component:
+
+~~~jsx
+const list = new dhx.List("list_container", {
+    virtual: true
+});
+~~~
+:::
+
+- load data into Grid or List via the `load()` method of Data Collection and pass `lazyDataProxy` as a parameter of this method:
+
+~~~jsx
+// for Grid
+const grid = new dhx.Grid("grid_container", {
+    columns: [
+        // columns config
+    ],
+    // more options
+});
+grid.data.load(lazyDataProxy);
+~~~
+
+**Related sample**: [External data lazy load](https://snippet.dhtmlx.com/grid_lazy_loading)
+
+~~~jsx
+// for List
+const list = new dhx.List("list_container");
+list.data.load(lazyDataProxy);
+~~~
+
+**Related sample**: [List. External data lazy loading](https://snippet.dhtmlx.com/list_lazy_loading)
+
+Read the related guides for detailed information:
+
+- [dynamic loading in Grid](grid/data_loading.md#dynamic-loading)
+- [dynamic loading in List](list/load_data.md#dynamic-loading) 
+
+:::info
+The `sort()` method of Data Collection will not work until all data are loaded into Grid/List. Note that for correct work of lazy loading, you should send all changes in Data Collection to the server at the proper time.
+:::
+
 ## Checking whether data is loaded
 
 You can check whether the specified data range is loaded from the server using the [`isDataLoaded()`](data_collection/api/datacollection_isdataloaded_method.md) method of [DataCollection](data_collection.md). 
@@ -84,8 +148,8 @@ The method works with the [Dynamic loading](helpers/lazydataproxy.md) functional
 
 The method takes the following parameters:
 
-- `from: number` - optional, the index of the first element of the data range to be checked
-- `to: number` - optional, the index of the last element of the data range to be checked
+- `from?: number` - optional, the index of the first element of the data range to be checked
+- `to?: number` - optional, the index of the last element of the data range to be checked
 
 and returns `true`, if a range of data is loaded; otherwise, `false`.
 
@@ -97,7 +161,7 @@ component.data.isDataLoaded();
 
 To save the current state of a component, use the [`serialize()`](data_collection/api/datacollection_serialize_method.md) method of Data Collection. The method is used to serialize data into the JSON, XML or CSV format. It takes the following parameter:
 
-- `driver: string` - optional, the format that the data will be serialized into ("json" (default), "csv", "xml")
+- `driver?: string` - optional, the format that the data will be serialized into ("json" (default), "csv", "xml")
 
 and returns serialized data for each item of the component either as an array of JSON objects or as a CSV/XML string.
 
@@ -113,12 +177,44 @@ After you've saved a component's state, you can send the data stored in the save
 
 ~~~jsx
 // creating a new grid
-const grid2 = new dhx.Grid(document.body);
+const grid2 = new dhx.Grid("grid_container", {
+    columns: [
+        // columns config
+    ],
+    // more options
+});
 // parsing the state of grid1 into grid2
 grid2.data.parse(state);
 ~~~
 
-## Saving data changes to the server side
+## Working with the server side
+
+To provide communication with the server side, you can use the [`DataProxy`](data_proxy.md) helper. Using this helper you can create a custom URL and assign it to a variable to simplify work with the server-side backend. For example:
+
+~~~jsx
+const proxy = new dhx.DataProxy("someUrl", {
+    // config options 
+});
+~~~
+
+The `dhx.DataProxy` helper takes two parameters:
+
+- `url: string` - the external URL
+- `params?: object` - optional, a set of custom parameters to be sent to the server with a request
+
+### Loading data from the server side
+
+You can apply a custom URL configured by the DataProxy helper to DataCollection while loading data with the [`load()`](data_collection/api/datacollection_load_method.md) method. As a parameter, pass the DataProxy with the configured URL:
+
+~~~jsx
+const dataCollection = new dhx.DataCollection();
+const proxy = new dhx.DataProxy("https://myCustomUrl.com");
+dataCollection.load(proxy);
+~~~
+
+The same as with [loading data from an external file](#loading-data-from-an-external-file), the component will make an AJAX call and expect the remote URL to provide valid JSON data.
+
+### Saving data changes to the server side
 
 You can save changes made in the data to the server side using the [`save()`](data_collection/api/datacollection_save_method.md) method of Data Collection. The method takes the following parameter:
 
@@ -144,15 +240,15 @@ Data saving is asynchronous, so you need to return a promise - the result of the
 ~~~jsx
 const data = new DataCollection();
 data.save(loader);
-return data.saveData.then(function(){
+return data.saveData.then(function () {
     // now your data is saved
 });
 ~~~
 
 Use the [`isSaved()`](data_collection/api/datacollection_issaved_method.md) method to check whether the changes are saved. The method returns *true*, if the changes are saved, otherwise, *false*.
 
 ~~~jsx
-grid.data.saveData.then(function(){
+grid.data.saveData.then(function () {
     console.log(grid.data.isSaved());
 });
 ~~~