Merge pull request #33 from DHTMLX/next

[update] complete docs for v9.0

Author: mafanya23

docs/form/api/input/input_gettext_method.md

@@ -14,13 +14,18 @@ description: You can explore the getText method of the Input control of Form in
 A string with the text with the applied mask
 
 @example:
-const value = form.getItem("input").getText();
-// -> "100000.01"
+const input = form.getItem("input");
+input.setValue(1000.01);
+
+input.getValue(); // 1000.01 for the input type number
+input.getValue(); // "1000.01" for the input type string
+
+input.getText(); // "1,000.01" with the applied numberMask/patternMask
 
 @descr:
 The method is used with the [`numberMask`](form/work_with_form.md#numbermask) and [`patternMask`](form/work_with_form.md#patternmask) properties of the Input control. It allows getting the value with the applied mask. 
 
 @changelog:
 Added in v9.0
 
-**Related:** [Getting the text value of an input](form/work_with_form.md#getting-the-text-value-of-an-input)
+**Related:** [Getting the text value of an input](form/work_with_form.md#getting-the-text-value-of-an-input-or-a-textarea)

docs/form/api/textarea/textarea_gettext_method.md

@@ -0,0 +1,31 @@
+---
+sidebar_label: getText()
+title: JavaScript Form - getText Textarea Method 
+description: You can explore the getText method of the Textarea control of Form in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# getText()
+
+@short: returns the text value of the textarea with the applied mask
+
+@signature: {'getText(): string;'}
+
+@returns:
+A string with the text with the applied mask
+
+@example:
+const input = form.getItem("textarea");
+input.setValue(1000.01);
+
+input.getValue(); // 1000.01 for the input type number
+input.getValue(); // "1000.01" for the input type string
+
+input.getText(); // "1,000.01" with the applied numberMask/patternMask
+
+@descr:
+The method is used with the [`numberMask`](form/work_with_form.md#numbermask) and [`patternMask`](form/work_with_form.md#patternmask) properties of the Textarea control. It allows getting the value with the applied mask. 
+
+@changelog:
+Added in v9.0
+
+**Related:** [Getting the text value of a textarea](form/work_with_form.md#getting-the-text-value-of-an-input-or-a-textarea)

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/form/work_with_form.md

@@ -107,7 +107,7 @@ form.isVisible("input"); // -> returns true/false
 
 ## Using input masks
 
-The input masks are used to provide entering of values into the [**Input**](form/input.md) and [**Textarea**](form/textarea.md) Form controls in a predefined way. There are the [`numberMask`](#numbermask) and [`patternMask`](#patternmask) configuration options in the API of the Input and Textarea controls, and the [`getText()`](#getting-the-text-value-of-an-input) method in the Input control API which are used for working with input masks.
+The input masks are used to provide entering of values into the [**Input**](form/input.md) and [**Textarea**](form/textarea.md) Form controls in a predefined way. There are the [`numberMask`](#numbermask) and [`patternMask`](#patternmask) configuration options in the API of the Input and Textarea controls, and the [`getText()`](#getting-the-text-value-of-an-input-or-a-textarea) method in the Input control API which are used for working with input masks.
 
 ### numberMask
 
@@ -319,14 +319,19 @@ In the above example:
 
 **Related sample**: [Form. Pattern mask](https://snippet.dhtmlx.com/gu1ekt1z)
 
-### Getting the text value of an input 
+### Getting the text value of an input or a textarea
 
-When you need to get the value of an input with the applied mask, you can use the [`getText()`](form/api/input/input_gettext_method.md) method of the **Input** control.
-It returns the input value of the control as a string. The method is used with the `numberMask` and `patternMask` properties of the Input control. 
+When you need to get the value of an input or a textarea with the applied mask, you can use the [`getText()`](form/api/input/input_gettext_method.md) method of the **Input** control or the [`getText()`](form/api/textarea/textarea_gettext_method.md) method of the **Textarea** control.
+It returns the input value of the control as a string. The method is used with the `numberMask` and `patternMask` properties of the control. 
 
 ~~~jsx
-const value = form.getItem("input").getText();
-// -> "100000.01"
+const input = form.getItem("input");
+input.setValue(1000.01);
+
+input.getValue(); // 1000.01 for the input type number
+input.getValue(); // "1000.01" for the input type string
+
+input.getText(); // "1,000.01" with the applied numberMask/patternMask
 ~~~
 
 ## Validating form

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>
 ~~~