[update] update and complete guides for v9.0

mafanya23 · mafanya23 · commit 76fb1f97c734 · 2024-11-29T17:09:41.000+03:00
diff --git a/docs/grid/features.md b/docs/grid/features.md
@@ -48,7 +48,7 @@ In this section you can find out how to initialize Grid, how to load data into t
 
 ### How to configure columns
 
-In this section you will know how to configure Grid columns on Grid initialization.
+In this section you will get to know how to configure Grid columns on Grid initialization.
 
 | Topic                                                        | Description                                                                                                        |
 | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
@@ -61,7 +61,7 @@ In this section you will know how to configure Grid columns on Grid initializati
 
 ### How to configure rows
 
-In this section you will know how to configure Grid rows on Grid initialization.
+In this section you will get to know how to configure Grid rows on Grid initialization.
 
 | Topic                                                                                                | Description                                                                                                                           |
 | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
@@ -88,13 +88,14 @@ In this section you can learn how to configure the header and footer of Grid, ho
 | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
 | [Configuring header/footer](../api/api_gridcolumn_properties/)                    | Learn how to configure a Grid header/footer  ([Example](https://snippet.dhtmlx.com/9jl55ep7))                           |
 | [Setting the height for header and footer](../configuration/#headerfooter-height) | Learn how to set the height for rows in the header and footer of Grid  ([Example](https://snippet.dhtmlx.com/wjcjl80i)) |
+| [Setting the text for header and footer](../configuration/#headerfooter-text) | Learn how to set the text for rows in the header and footer of Grid  ([Example](https://snippet.dhtmlx.com/9jl55ep7)) |
 | [Styling header cells](../customization/#styling-header-cells)                    | Learn how to set styling to the text of header cells ([Example](https://snippet.dhtmlx.com/7o4elf48))                   |
 | [Styling footer cells](../customization/#styling-footer-cells)                    | Learn how to set styling to the text of footer cells ([Example](https://snippet.dhtmlx.com/d254hcvp))                   |
 
 
 ### How to configure tooltips
 
-In this section you will know how to add tooltips of the desired appearance with the necessary information, or hide them if needed.
+In this section you will get to know how to add tooltips of the desired appearance with the necessary information, or hide them if needed.
 
 | Topic                                                                         | Description                                                                                                                                                        |
 | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -114,7 +115,7 @@ In this section you will find out how to group cells in Grid and its header.
 
 ### How to configure drag-n-drop
 
-In this section you will know how to configure the drag-n-drop functionality for Grid.
+In this section you will get to know how to configure the drag-n-drop functionality for Grid.
 
 | Topic                                                                              | Description                                                                                             |
 | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
@@ -123,6 +124,21 @@ In this section you will know how to configure the drag-n-drop functionality for
 | [Drag-n-drop of multiple rows](grid/configuration.md#drag-n-drop-of-multiple-rows) | Learn how to allow end users to drag-n-drop several rows at once                                        |
 | [Copying of rows during drag-n-drop](../api/grid_dragcopy_config/)                 | Learn how to copy a row to a target during drag-n-drop ([Example](https://snippet.dhtmlx.com/23slivyz)) |
 
+## How to render custom statistics in the column header/footer and in the spans
+
+In this section you will get to know how to render custom statistics in the column header/footer and in the spans.
+
+| 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|
+| [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 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|
+
+
 ## How to configure sizes of Grid and its cells
 
 In this section you can learn how to configure the size of Grid and its cells.
@@ -158,7 +174,7 @@ In this section you can learn how to configure the style of Grid and its cells.
 
 ## How to work with columns and rows
 
-In this section you will know how to add and remove columns and rows, how to hide and show them, how to configure their sizes and align content inside the columns.
+In this section you will learn how to add and remove columns and rows, how to hide and show them, how to configure their sizes and align content inside the columns.
 
 ### Adding/removing columns and rows
 
@@ -226,6 +242,18 @@ In this section you will find the ways of filtering data in Grid.
 | [Customizing filters in the header/footer](../configuration/#customizing-headerfooter-filters) | Learn how to add a custom function with your own logic for filtering data in a Grid column ([Example](https://snippet.dhtmlx.com/gcidkxjg))                  |
 | [Getting the header filter](../api/grid_getheaderfilter_method/)                               | Learn how to get and use an object of the header filter ([Example](https://snippet.dhtmlx.com/n8srjle3))                                                     |
 
+### How to group data
+
+In this section you will get to know how to group row data in Grid.
+
+| Topic                                                                                          | Description                                                                                                                                                  |
+| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Enabling data grouping](../usage/#enabling-data-grouping)                               | Learn how to enable row data grouping ([Example](https://snippet.dhtmlx.com/dvqy4ewe))                                                     |
+| [Configuring data grouping](../usage/#configuring-data-grouping)                               | Learn how to configure row data grouping ([Example](https://snippet.dhtmlx.com/z3iw2p3k))                                                     |
+| [Making group panel elements closable](../usage/#making-group-panel-elements-closable)       | Learn how to make elements of the group panel closable  ([Example](https://snippet.dhtmlx.com/z3iw2p3k))                                                     |
+| [Using DataCollection API for data grouping](../usage/#using-datacollection-api-for-data-grouping)       | Learn how to group Grid data with DataCollection API   ([Example](https://snippet.dhtmlx.com/vo3pgkgh))                                                     |
+
+
 ## How to work with selection
 
 In this section you will find the ways of working with selection functionality.
@@ -263,11 +291,19 @@ In this section you will learn how to scroll Grid to the necessary position.
 
 ## How to export Grid
 
-In this section you will know how to export Grid to different formats.
+In this section you will get to know how to export Grid to different formats.
+
+| Topic                                                                       | Description                                                                                                                                           |
+| --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Exporting Grid to XLSX, CSV, PNG or PDF format](../usage/#exporting-data) | Learn how to export Grid to the necessary format ([Example 1](https://snippet.dhtmlx.com/58oqij47), [Example 2](https://snippet.dhtmlx.com/ti9l91mn)) |
+
+## How to localize Grid
+
+In this section you will get to know how to localize the interface of Grid.
 
 | Topic                                                                       | Description                                                                                                                                           |
 | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Exporting Grid to XLSX, CSV, PNG. or PDF format](../usage/#exporting-data) | Learn how to export Grid to the necessary format ([Example 1](https://snippet.dhtmlx.com/58oqij47), [Example 2](https://snippet.dhtmlx.com/ti9l91mn)) |
+| [Localizing Grid](../localization/) | Learn how to apply different languages to the interface of dhtmlxGrid |
 
 ## How to work with Grid events
 
diff --git a/docs/grid/usage.md b/docs/grid/usage.md
@@ -536,7 +536,7 @@ With the Grid `groupable` property enabled you can:
     - or by clicking a group element on the group panel
 - edit the nesting level of grouping by modifying the grouping order by either moving elements to the group panel or removing elements from the group panel
 
-**Related sample:** [Grid. Grouping (PRO)](https://snippet.dhtmlx.com/dvqy4ewe)
+**Related sample:** [Grid. Grouping](https://snippet.dhtmlx.com/dvqy4ewe)
 
 The [`groupable`](grid/api/api_gridcolumn_properties.md) **property of a column** allows grouping data by the values of a certain column:
 
@@ -591,7 +591,7 @@ const grid = new dhx.Grid("grid_container", {
 });
 ~~~
 
-**Related sample:** [Grid. Grouping customization (PRO)](https://snippet.dhtmlx.com/z3iw2p3k)
+**Related sample:** [Grid. Grouping customization](https://snippet.dhtmlx.com/z3iw2p3k)
 
 - `hideableColumns` - (optional) specifies whether columns will be hidden on a group creation, *true* by default. If set to *false*, columns used for grouping will remain visible
 
@@ -610,7 +610,7 @@ const grid = new dhx.Grid("grid_container", {
 });
 ~~~
 
-**Related sample:** [Grid. Grouping customization (PRO)](https://snippet.dhtmlx.com/z3iw2p3k)
+**Related sample:** [Grid. Grouping customization](https://snippet.dhtmlx.com/z3iw2p3k)
 
 - `showMissed` - (optional) controls visibility of the elements that don't suit the grouping criteria (e.g. data without values), *true* by default. The following settings are available:
     - if set to *true*, the rows that don't have values for grouping are rendered row by row after all the data
@@ -634,7 +634,7 @@ const grid = new dhx.Grid("grid_container", {
 });
 ~~~
 
-**Related sample:** [Grid. Grouping missing data (PRO)](https://snippet.dhtmlx.com/0geopa0v)
+**Related sample:** [Grid. Grouping missing data](https://snippet.dhtmlx.com/0geopa0v)
 
 - `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:
@@ -688,7 +688,7 @@ b) the total rows under the grouped values set by the `summary` property
             - 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 
 
-**Related sample:** [Grid. Grouping customization (PRO)](https://snippet.dhtmlx.com/z3iw2p3k)
+**Related sample:** [Grid. Grouping customization](https://snippet.dhtmlx.com/z3iw2p3k)
 
 Below you'll find the examples of configuring Grid via the `order` property:
 
@@ -805,7 +805,7 @@ const grid = new dhx.Grid("grid_container", {
 
 - `column` - (optional) defines the configuration of a column that renders values by the grouped data. This column will be used as a main one for structuring and rendering data grouped by value
 
-**Related sample:** [Grid. Grouping customization (PRO)](https://snippet.dhtmlx.com/z3iw2p3k)
+**Related sample:** [Grid. Grouping customization](https://snippet.dhtmlx.com/z3iw2p3k)
 
 You can specify the id of a column in two ways:
 
@@ -860,8 +860,6 @@ column: {
                 column: ICol
             ) => string | boolean,
             align?: "left" | "center" | "right", // "left" by default
-            colspan?: number,
-            rowspan?: number,
             css?: string,
             content?: "inputFilter" | "selectFilter" | "comboFilter",
             filterConfig?: {
@@ -888,15 +886,11 @@ column: {
                 column: ICol
             ) => string | boolean,
             align?: "left" | "center" | "right", // "left" by default
-            colspan?: number,
-            rowspan?: number,
             css?: string,
-            content?: "avg" | "sum" | "max" | "min" | "count",
             htmlEnable?: boolean, // false by default
         },
     ],
     align?: "left" | "center" | "right", // "left" by default
-    htmlEnable?: boolean, // false by default
     resizable?: boolean, // false by default
     sortable?: boolean, // true by default
     mark?: { min?: string, max?: string } |
@@ -928,7 +922,7 @@ const grid = new dhx.Grid("grid_container", {
 });
 ~~~
 
-**Related sample:** [Grid. Grouping customization (PRO)](https://snippet.dhtmlx.com/z3iw2p3k)
+**Related sample:** [Grid. Grouping customization](https://snippet.dhtmlx.com/z3iw2p3k)
 
 You can also use the [`closable`](grid/api/api_gridcolumn_properties.md) configuration property of a column. It allows making a particular group panel element closable or permanently enabled:
 
@@ -1039,7 +1033,7 @@ grid.data.group([{
 }]);
 ~~~
 
-**Related sample:** [Grouping and totals in the summary row via data collection (PRO)](https://snippet.dhtmlx.com/ihd6gtpj)
+**Related sample:** [Grouping and totals in the summary row via data collection](https://snippet.dhtmlx.com/ihd6gtpj)
 
 - grouping with the use of the `showMissed` property
 
@@ -1062,7 +1056,7 @@ grid.data.group(["city"], {
 });
 ~~~
 
-**Related sample:** [Grid. Grouping missing data (PRO)](https://snippet.dhtmlx.com/0geopa0v)
+**Related sample:** [Grid. Grouping missing data](https://snippet.dhtmlx.com/0geopa0v)
 
 #### Ungrouping Grid data
 
diff --git a/docs/helpers/data_calculation_functions.md b/docs/helpers/data_calculation_functions.md
@@ -20,19 +20,21 @@ const sum = dhx.methods.sum(rows, "value"); // 60
 
 ### Defining a custom functor
 
-You can specify a custom function for calculating data. For example, you can use the `methods` helper function for adding custom calculations to [get a summary of counted values](grid/configuration.md#getting-the-summary-object). Thus, you can provide a functor that will calculate a doubled sum of values for a particular column:
+You can specify a custom function for calculating data. For example, you can use the `methods` helper function for adding custom calculations to [get a summary of counted values](grid/configuration.md#getting-the-summary-object). 
 
-~~~jsx {1-3,11,17-18}
+In the example below a custom functor `doubleSum()` that calculates a doubled sum of values for a particular column is defined. The result of its calculations is used to render statistics in the footer of the "population" column.
+
+~~~jsx {1-3,10-11}
 dhx.methods.doubleSum = (rows, field) => {
     return rows.reduce((sum, row) => sum + row[field] * 2, 0);
 };
 
 const grid = new dhx.Grid("grid_container", {
     columns: [
         {
-            width: 150,
             id: "population",
             header: [{ text: "Population" }],
+            footer: [{ text: (content) => content.doubleSum }],
             summary: "doubleSum"
         },
     ],
diff --git a/docs/migration.md b/docs/migration.md
@@ -81,17 +81,17 @@ const sum = dhx.methods.sum(rows, "value"); // 60
 
 2. redefining the default functions:
 
-~~~jsx title="From v9.0"
+~~~jsx {1-3,10-11} title="From v9.0"
 dhx.methods.doubleSum = (rows, field) => {
     return rows.reduce((sum, row) => sum + row[field] * 2, 0);
 };
 
 const grid = new dhx.Grid("grid_container", {
     columns: [
         {
-            width: 150,
             id: "population",
             header: [{ text: "Population" }],
+            footer: [{ text: (content) => content.doubleSum }],
             summary: "doubleSum"
         },
     ],
