Add DataCollection guides

docs/data_collection/api/datacollection_add_method.md

@@ -12,14 +12,14 @@ description: You can explore the add method of DataCollection in the documentati
 
 @params:
 - `new_item: object | array` - the object of a new item or an array of item objects
-- `index: number` - optional, the index of the position starting from which new items will be added
+- `index?: number` - optional, the index of the position starting from which new items will be added
 
 @returns:
 Either item's id or an array with ids of items.
 
 @example:
 // adding a new item into the beginning of a data collection 
-component.data.add({"value": 57.44787660011765, "id": "u1565340894584"},0);
+component.data.add({ "value": 57.44787660011765, "id": "u1565340894584" }, 0);
 
 // adding an array of new items into a data collection
 component.data.add([

docs/data_collection/api/datacollection_changeid_method.md

@@ -12,8 +12,8 @@ description: You can explore the changeId method of DataCollection in the docume
 
 @params:
 - `id: string | number` - the old id of an item
-- `newId: string | number` - optional, the new id; auto-generated if not set
-- `silent: boolean` - true, to prevent changing the id; otherwise, false
+- `newId?: string | number` - optional, the new id; auto-generated if not set
+- `silent?: boolean` - optional, if set to *true*, the method will be called without triggering events; otherwise, *false*
 
 @example:
 component.data.changeId("1", "22");

docs/data_collection/api/datacollection_copy_method.md

@@ -13,13 +13,13 @@ description: You can explore the copy method of DataCollection in the documentat
 @params:
 - `id: (string | number) | (string | number)[]` - the id of an item or an array with ids of items to copy
 - `index: number` - the index to create a copy at
-- `target: object` - optional, the target data collection object
+- `target?: object` - optional, the target data collection object
 
 @returns:
 The item's id or an array with ids of items.
 
 @example:
-component.data.copy("4",5); // copies the item with id:4 to the position with index 5
+component.data.copy("4", 5); // copies the item with id:4 to the position with index 5
 
 @descr:
 

docs/data_collection/api/datacollection_filter_method.md

@@ -8,22 +8,30 @@ description: You can explore the filter method of DataCollection in the document
 
 @short: filters data items in a component
 
-@signature: {'filter(rule?: function | object, config?: object): string;'}
+@signature: {'filter(rule?: function | object, config?: object, silent?: boolean): string;'}
 
 @params:
-- `rule: function | object` - the filtering criteria
-    - If set as a *function*, filtering will be applied by the rule specified in the function. The function takes an object of a data item as a parameter and returns *true/false*
-    - If set as an *object*, the parameter has the following attributes:
-        - `by: string | number` - mandatory, the id of a data field 
-        - `match: string` - mandatory, a pattern to match
-        - `compare: function` - optional, a function for extended filtering that takes three parameters:
-            - `value` - the value to compare 
-            - `match` - a pattern to match
-            - `item` - a data item the values of which should be compared 
-- `config: object` - optional, defines the parameters of filtering. It may contain the following properties: 
-    - `id: string` - optional, the id of the filter
-    - `add: boolean` - optional, defines whether each next filtering will be applied to the already filtered data (<i>true</i>), or to the initial data (<i>false</i>, default)
-    - `permanent: boolean` - optional, *true* to make the current filter permanent. It will be applied even if the next filtering doesn't have the `add:true` property in its configuration object. Such a filter can be removed just with the [resetFilter()](data_collection/api/datacollection_resetfilter_method.md) method
+
+<table>
+    <tbody>
+        <tr>
+            <td><b>rule</b></td>
+            <td>(<i>function | object</i>) optional, the filtering criteria. It can be:<ul><li>a filtering function. It takes as a parameter a data item and returns <i>true/false</i></li><li>an object with the following attributes:<ul><li><b>`by?: string | number`</b> - optional, the id of a column</li><li><b>`match?: string`</b> - optional, a pattern to match </li><li><b>`compare?: function`</b> - optional, a function for extended filtering that takes the following parameters:<ul><li><b>`value`</b> - the value to compare </li><li><b>`match`</b> - a pattern to match </li><li><b>`item`</b> - a data item the values of which should be compared</li></ul></li></ul></li></ul></td>
+        </tr>
+        <tr>
+            <td><b>config</b></td>
+            <td>(<i>object</i>) optional, an object with the following properties:<ul><li><b>`id?: string`</b> - optional, the id of the filter</li><li><b>`add?: boolean`</b> - optional, defines whether each next filtering will be applied to the already filtered data (<i>true</i>), or to the initial data (<i>false</i>, default)</li><li><b>`permanent?: boolean`</b> - optional, <i>true</i> to make the current filter permanent. It will be applied even if the next filtering doesn't have the <b>`add:true`</b> property in its configuration object. Such a filter can be removed just with the <a href="../datacollection_resetfilter_method/">`resetFilter()`</a> method</li></ul></td>
+        </tr>
+        <tr>
+            <td><b>silent</b></td>
+            <td>(<i>boolean</i>) optional, if set to <i>true</i>, the method will be called without triggering events, <i>false</i> by default</td>
+        </tr>
+    </tbody>
+</table>
+
+:::info
+Note that after calling the method with the `silent:true` parameter, you may need to repaint the component with the `paint()` method.
+:::
 
 @returns:
 - `id: string` - the id of the filter

docs/data_collection/api/datacollection_find_method.md

@@ -16,21 +16,23 @@ description: You can explore the find method of DataCollection in the documentat
         - `by: string | function` - the search criterion (either the key of the item attribute or a search function)
         - `match: string` - the value of the item attribute
     - if set as a function, the search will be applied by the rule specified in the function. The function takes three parameters:
-        - `item` - (required) the object of an item
-        - `index` - (optional) the index of an item
-        - `array` - (optional) an array with items
+        - `item: object` - the object of an item
+        - `index?: number` - optional, the index of an item
+        - `array?: object[]` - optional, an array of items the method was called upon
 
 @returns:
-An object of the matching item.
+The object of the matching item.
 
 @example:
-//searching for an item by the function
-const item = component.data.find(function(item){
-    if(item.text==="Manager"||item.text==="Marketer"){return true}
+// searching for an item by the function
+const item = component.data.find(function (item) {
+    if (item.text === "Manager" || item.text === "Marketer") {
+        return true
+    }
 });
 
-//searching for an item by the attribute key
-const item = component.data.find({by:"text",match:"Manager"});
+// searching for an item by the attribute key
+const item = component.data.find({ by: "text", match: "Manager" });
 
 @descr:
 

docs/data_collection/api/datacollection_findall_method.md

@@ -16,21 +16,23 @@ description: You can explore the findAll method of DataCollection in the documen
         - `by: string | function` - the search criterion (either the key of the item attribute or a search function)
         - `match: string` - the value of the item attribute
     - if set as a function, the search will be applied by the rule specified in the function. The function takes three parameters:
-        - `item` - (required) the object of an item
-        - `index` - (optional) the index of an item
-        - `array` - (optional) an array with items
+        - `item: object` - the object of an item
+        - `index?: number` - optional, the index of an item
+        - `array?: object[]` - optional, an array of items the method was called upon
 
 @returns:
 An array of matching item objects.
 
 @example:
-//searching for items by the function
-const items = component.data.findAll(function(items){
-    if(items.text==="Manager"||items.text==="Marketer"){return true}
+// searching for items by the function
+const items = component.data.findAll(function (items) {
+    if (items.text === "Manager" || items.text === "Marketer") {
+        return true
+    }
 });
 
-//searching for items by the attribute key
-const items = component.data.findAll({by:"text",match:"Manager"});
+// searching for items by the attribute key
+const items = component.data.findAll({ by: "text", match: "Manager" });
 
 @descr:
 

docs/data_collection/api/datacollection_foreach_method.md

@@ -12,12 +12,12 @@ description: You can explore the forEach method of DataCollection in the documen
 
 @params:
 - `callback: function` - a function that will iterate over items of a data collection. The function is called with the following parameters:
-    - `item` - the object of an item
-    - `index` - the index of an item
-    - `array` - an array of items the method was called upon
+    - `item: object` - the object of an item
+    - `index?: number` - optional, the index of an item
+    - `array?: object[]` - optional, an array of items the method was called upon
 
 @example:
-component.data.forEach(function(item, index, array) {
+component.data.forEach(function (item, index, array) {
     console.log("This is an item of dataCollection: ", item);
     console.log("This is an index of the element: ", index);
     console.log("This is an array of the elements: ", array);

docs/data_collection/api/datacollection_getfilters_method.md

@@ -12,7 +12,7 @@ description: You can explore the getFilters method of DataCollection in the docu
 
 @params: 
 
-- `permanent: boolean` - optional, <i>false</i> by default. Allows getting the list of permanent filters
+- `permanent?: boolean` - optional, *false* by default. Allows getting the list of permanent filters
 
 @returns:
 - `filters: object` - an object with the applied filters, where the key is the id of a filter and the value is an object with the [`rule` and `config` properties](data_collection/api/datacollection_filter_method.md)

docs/data_collection/api/datacollection_getitem_method.md

@@ -26,7 +26,7 @@ const item = component.data.getItem(123);
 
 You can access the original properties of an item like this:
 
-~~~js
+~~~jsx
 const item = component.data.getItem(123);
 const text = item.text;
 ~~~

docs/data_collection/api/datacollection_getlength_method.md

@@ -14,7 +14,7 @@ description: You can explore the getLength method of DataCollection in the docum
 The number of elements of a data collection.
 
 @example:
-component.data.getLength();
+const dataLength = component.data.getLength();
 
 @descr:
 

docs/data_collection/api/datacollection_getsortingstates_method.md

@@ -27,7 +27,7 @@ An array of objects with the current parameters of sorting applied to the data.
 
 @example:
 const state = grid.data.getSortingStates(); 
-// -> [{by: "country", dir: "desc"}, {by: "population", dir: "desc"}]
+// -> [{ by: "country", dir: "desc" }, { by: "population", dir: "desc" }]
 
 @descr:
 The array returned by the method contains objects with the following properties:

docs/data_collection/api/datacollection_group_method.md

@@ -39,21 +39,19 @@ group(order: TGroupOrder[], config?: IGroupConfig): void;
 
 ## 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` 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
+<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>
 
 ## Examples
 

docs/data_collection/api/datacollection_isdataloaded_method.md

@@ -6,15 +6,17 @@ description: You can explore the isDataLoaded method of DataCollection in the do
 
 # isDataLoaded()
 
-{{pronote This functionality is available in the PRO edition only.}}
+:::tip pro version only
+The method works with the [Dynamic loading](helpers/lazydataproxy.md) functionality which is available in the PRO edition only.
+:::
 
 @short: checks whether the specified data range is loaded from the server
 
 @signature: {'isDataLoaded(from?: number, to?: number): boolean;'}
 
 @params:
-- `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
 
 @returns:
 `true`, if a range of data is loaded; otherwise, `false`.

docs/data_collection/api/datacollection_load_method.md

@@ -8,12 +8,12 @@ description: You can explore the load method of DataCollection in the documentat
 
 @short: loads data from an external file
 
-@signature: {'load?(url: string | DataProxy, driver?: object | string): Promise<any>;'}
+@signature: {'load(url: string | DataProxy, driver?: object | string): Promise<any>;'}
 
 @params:
 
 - `url: string | IDataProxy` - the URL of an external file or DataProxy with the URL configured
-- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default
+- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default
 
 @returns:
 A promise of data loading.
@@ -34,7 +34,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;
 });
 ~~~
@@ -43,7 +43,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

docs/data_collection/api/datacollection_map_method.md

@@ -6,22 +6,22 @@ description: You can explore the map method of DataCollection in the documentati
 
 # map()
 
-@short: iterates through all items of the component
+@short: iterates through all the items of the component
 
 @signature: {'map(callback: (item: object, index?: number, array?: object[]) => any): object[];'}
 
 @params:
 - `callback: function` - a function that will be called for each item of a component. The function is called with the following parameters:
-    - `item` - the object of an item
-    - `index` - the index of an item
-    - `array` - an array of items the method was called upon
+    - `item: object` - the object of an item
+    - `index?: number` - optional, the index of an item
+    - `array?: object[]` - optional, an array of items the method was called upon
 
 @returns:
 A new array of items where each item is the result of the callback function.
 
 @example:
 // getting the ids of all items of the component
-component.data.map(function(item, index, array){
+component.data.map(function (item, index, array) {
     return item.id;
 });
 

docs/data_collection/api/datacollection_maprange_method.md

@@ -14,15 +14,15 @@ description: You can explore the mapRange method of DataCollection in the docume
 - `from: number` - the initial position of an item in the range
 - `to: number` - the final position of an item in the range
 - `callback: function` - a function that will be called for each item from the specified range. The function is called with the following parameters:
-    - `item` - the object of an item
-    - `index` - the index of an item
-    - `array` - an array of items the method was called upon
+    - `item: object` - the object of an item
+    - `index?: number` - optional, the index of an item
+    - `array?: object[]` - optional, an array of items the method was called upon
 
 @returns:
 A new array of matching item objects.
 
 @example:
-const result = component.data.mapRange(0, 20, function(item, index, array) {
+const result = component.data.mapRange(0, 20, function (item, index, array) {
     console.log(item.id, index);
 });
 

docs/data_collection/api/datacollection_move_method.md

@@ -13,13 +13,13 @@ description: You can explore the move method of DataCollection in the documentat
 @params:
 - `id: string | string[]` - the ids of items to move
 - `index: number` - the index to move items to
-- `target: object` - optional, the target data collection object
+- `target?: object` - optional, the target data collection object
 
 @returns:
 Either the item's id or an array with ids of items.
 
 @example:
-component.data.move("4",5); // moves the item with id:4 to the position with index 5
+component.data.move("4", 5); // moves the item with id:4 to the position with index 5
 
 @descr:
 

docs/data_collection/api/datacollection_parse_method.md

@@ -12,7 +12,7 @@ description: You can explore the parse method of DataCollection in the documenta
 
 @params:
 - `data: array | string` - the data to load
-- `driver: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default
+- `driver?: object | string` - optional, DataDriver or type of data ("json", "csv", "xml"), "json" by default
 
 @example:
 const dataset = [