[update] complete grid and form docs for v9.0

Author: mafanya23

docs/form/features.md

@@ -103,6 +103,7 @@ In this section you will study how to send a Form to the server, how to disable
 | [Is disabled](../work_with_form/#checking-if-a-form-is-disabled)                  | Learn how to check whether a Form or its control is disabled ([Example](https://snippet.dhtmlx.com/lthu8p6p)) |
 | [Hiding / showing Form](../work_with_form/#hidingshowing-a-form)                  | Learn how to hide/show a Form                                                                                 |
 | [Checking visibility of a Form](../work_with_form/#checking-if-a-form-is-visible) | Learn how to check whether a Form or its control is visible                                                   |
+| [Using input masks](../work_with_form/#using-input-masks) | Learn how to use pattern and input masks to provide entering of values in a predefined way ([Example 1](https://snippet.dhtmlx.com/51wnauq3), [Example 2](https://snippet.dhtmlx.com/gu1ekt1z)) |                                
 | [Clearing Form](../work_with_form/#clearing-form)                                 | Learn how to clear the values and (or) validation of Form ([Example](https://snippet.dhtmlx.com/a64ih4ih))    |
 
 

docs/grid/api/grid_closable_config.md

@@ -12,6 +12,10 @@ description: You can explore the closable config of Grid in the documentation of
 The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
 :::
 
+:::note
+The `closable` property works only with the [`group`](grid/api/grid_group_config.md) panel.
+:::
+
 @signature: {'closable?: boolean;'}
 
 @default: true

docs/grid/api/grid_group_config.md

@@ -62,7 +62,7 @@ You can find the detailed description of the `group` object properties with exam
     - if set to *false*, the rows that don't suit the grouping criteria won't be rendered
 - `fields` - (optional) predefines an extended configuration for data grouping by certain columns, by setting the rules of aggregation and rendering of the results. The attributes of the `fields` object correspond to the ids of columns for which the aggregation rules and the order of results are being configured. The configuration of a column is defined by the `IGroupOrder` object that has the following properties:
     - `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 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 `((row: IRow[]) => string | number)`
     - `summary` - (optional) specifies where the total row is rendered - at the `top` or at the `bottom` of the group
 - `order` - (optional) defines the order of grouping by setting the sequence of columns for grouping. The elements of the `order` array can be: 

docs/grid/customization.md

@@ -145,22 +145,29 @@ You can easily set some styling to the text of footer cells by applying some inl
 
 <script>
     const grid = new dhx.Grid("grid_container", {
-        columns: [
-              {
-                width: 100, id: "a", header: [{ text: "#" }], footer: [
-                    { text: '<div class="custom_footer">Total</div>', colspan: 3 },
-                    { text: '<div class="custom_footer">Minimal value</div>', colspan: 3 }
-                ]
-              },
-              { width: 100, id: "b", header: [{ text: "Title" }] },
-              { width: 200, id: "c", header: [{ text: "Order" }] },
-              { width: 200, id: "d", header: [{ text: "Price" }], footer: [
-                      { content: "sum" }, { content: "min" }        
-                  ] 
-              }
-        ],
-        data: dataset
-    });
+    columns: [
+        {
+            width: 200, id: "country", header: [{ text: "Country" }],
+            footer: [
+                { text: '<div class="custom_footer">Total</div>' },
+                { text: '<div class="custom_footer">Minimal value</div>' },
+            ],
+            htmlEnable: true
+        },
+        {
+            width: 150, id: "population", header: [{ text: "Population" }],
+            footer: [
+                { text: ({ totalPopulation}) => `${totalPopulation}`},
+                { text: ({ minimalValue }) => `${minimalValue}`}
+            ],
+        },
+    ],
+    summary: { 
+        totalPopulation: ["population", "sum"],
+        minimalValue: ["population", "min"]
+    },
+    data: dataset
+});
 </script>
 ~~~
 

docs/grid/features.md

@@ -76,7 +76,8 @@ In this section you will learn how to specify the necessary data formats for a s
 | Topic                                                                               | Description                                                                                                                                                         |
 | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [Configuring data formats](../configuration/#formatting-columns)                    | Learn how to display values of cells in different formats (percent, currency, date and combination with templates) ([Example](https://snippet.dhtmlx.com/ox37nvdm)) |
-| [Date column and support of the Date() object](https://snippet.dhtmlx.com/ylbu791i) | The example shows how [to use the Date() object for specifying dates](../api/grid_data_config/)                                                                     |
+| [Date column and support of the Date() object](https://snippet.dhtmlx.com/ylbu791i) | The example shows how [to use the Date() object for specifying dates](../api/grid_data_config/) |
+| [Setting pattern and number masks](../configuration/#formatting-columns) | Learn how to specify input masks for the values of column cells ([Example](https://snippet.dhtmlx.com/45gjhciv))      |                                                                     
 
 
 
@@ -130,11 +131,11 @@ In this section you will get to know how to render custom statistics in the colu
 
 | Topic                                                      | Description                                    |
 | -----------------------------------------------------------| -----------------------------------------------|
-| [Defining the data calculation function](../helpers/data_calculation_functions/)                 | Learn how to define the default or create a custom statistical function for data calculation|
+| [Defining the data calculation function](../../helpers/data_calculation_functions/)                 | Learn how to define the default or create a custom statistical function for data calculation|
 | [Calculating a column summary](../configuration/#column-summary)                 | Learn how to form a summary list for a column ([Example](https://snippet.dhtmlx.com/jhjxjv2l))|
 | [Calculating a Grid summary](../configuration/#grid-summary)                 | Learn how to form a summary list for a Grid |
 | [Getting the summary object](../configuration/#getting-the-summary-object)                 | Learn how to get the summary object |
-| [Displaying custom statistics in the column header/footer text](../configuration/#headerfooter-text)     | Learn how to render custom statistics in the text of a column header/footer|
+| [Displaying custom statistics in the column header/footer text](../configuration/#headerfooter-text)     | Learn how to render custom statistics in the text of a column header/footer ([Example](https://snippet.dhtmlx.com/jhjxjv2l))|
 | [Displaying custom statistics in the column header/footer tooltip](../configuration/#column-headerfooter-tooltip)     | Learn how to render custom statistics in the tooltip of a column header/footer|
 | [Displaying custom statistics in the spans](../configuration/#spans)     | Learn how to render custom statistics in the spans|
 

docs/grid/usage.md

@@ -273,7 +273,7 @@ You can filter grid data by the specified criteria with the help of the `filter(
         </tr>
         <tr>
             <td><b>config</b></td>
-            <td>(<i>object</i>) optional, an object with the following properties:<ul><li><b>id</b> (<i>string</i>) - optional, the id of the filter</li><li><b>add</b> (<i>boolean</i>) 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</b> (<i>boolean</i>) - 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 resetFilter() method</li><li><b>smartFilter</b> (<i>boolean</i>) defines whether a filtering rule will be applied after adding and editing items of the collection. <b>Deprecated since v8.2</b> (check <a href="../../migration#81---82">Migration to newer versions</a>) and replaced with the <b>permanent</b> property (see above)</li></ul></td>
+            <td>(<i>object</i>) optional, an object with the following properties:<ul><li><b>id</b> (<i>string</i>) - optional, the id of the filter</li><li><b>add</b> (<i>boolean</i>) 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</b> (<i>boolean</i>) - 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 resetFilter() method</li></ul></td>
         </tr>
     </tbody>
 </table>