[update] autoHeight and header/footer autoHeight configs and guides s…

…ections for Grid and TreeGrid

docs/grid/api/grid_autoheight_config.md

@@ -27,34 +27,30 @@ const grid = new dhx.Grid("grid_container", {
 
 **Related sample**: [Grid. Rows auto height](https://snippet.dhtmlx.com/zkcsyazg)
 
-Note that the **autoHeight** option does not adjust the height of the cells in the header/footer of Grid. The option just makes their text split into multiple lines, but the height of the cells will remain the same.
+:::note
+Note that the **autoHeight** option does not adjust the height of the cells in the header/footer of Grid. 
+:::
 
-To set the height of the rows in the header/footer, you should apply the [](grid/api/grid_headerrowheight_config.md) and [](grid/api/grid_footerrowheight_config.md) configuration options of Grid. 
+The option just makes their text split into multiple lines, but the height of the cells will remain the same. You can configure the height of the header/footer in one of the following ways:
 
-To enable autoheight in the header/footer, use the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footerautoheight_config.md) configuration options of Grid. These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
+- set the desired height of the rows in the header/footer via the [](grid/api/grid_headerrowheight_config.md) and [](grid/api/grid_footerrowheight_config.md) configuration options of Grid
 
-~~~js
-const grid = new dhx.Grid("grid", {
-    columns: [
-        // columns config
-    ],
-    data: dataset,
-    autoHeight: true, // enable autoHeight in data (content)
-    headerAutoHeight: false, // disable autoHeight in header
-    footerAutoHeight: false, // disable autoHeigh in footer
-});
+- enable autoheight in the header/footer via the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footerautoheight_config.md) configuration options of Grid. These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
 
+~~~js
 const grid = new dhx.Grid("grid", {
     columns: [
         // columns config
     ],
     data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
-    headerAutoHeight: true, // enable autoHeight in header
+    autoHeight: true, // enable autoHeight in the data (content)
+    headerAutoHeight: false, // disable autoHeight in the header
+    footerAutoHeight: false, // disable autoHeight in the footer
 });
 ~~~
 
-**Note** that:  
+
+#### Take into account the information below:  
 
 - to optimize performance, you should specify `htmlEnable: true` in the configuration object of the column which contains HTML content
 - you can also specify `htmlEnable:true` in the configuration object of Grid

docs/grid/api/grid_footerautoheight_config.md

@@ -19,15 +19,15 @@ const grid = new dhx.Grid("grid", {
     	// columns config
     ],
     data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
+    autoHeight: false, // disable autoHeight in the data, the header and the footer
     footerAutoHeight: true // enable autoHeight in the footer
 });
 
 @descr: 
 
 **Related sample**: [Grid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d)
 
-Redefines the <b>autoHeight</b> config for the footer.
+Redefines the [autoHeight](grid/api/grid_autoheight_config.md) config for the footer.
 
 @changelog: added in v8.3
 

docs/grid/api/grid_headerautoheight_config.md

@@ -20,14 +20,14 @@ const grid = new dhx.Grid("grid", {
     	// columns config
     ],
     data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
+    autoHeight: false, // disable autoHeight in the data, the header and the footer
     headerAutoHeight: true // enable autoHeight in the header
 });
 
 @descr: 
 
 **Related sample**: [Grid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d)
 
-Redefines the <b>autoHeight</b> config for the header.
+Redefines the [autoHeight](grid/api/grid_autoheight_config.md) config for the header.
 
 @changelog: added in v8.3

docs/grid/configuration.md

@@ -1119,32 +1119,44 @@ const grid = new dhx.Grid("grid_container", {
 
 As a result, the height of the cells will automatically adjust to their content.
 
-Please **note** that the **autoHeight** option does not adjust the height of the cells of the header/footer of Grid. The option just makes their text split into multiple lines, but the height of the cells will remain the same. However, you can change the height of the header/footer in two ways:
+:::note
+Please note that the **autoHeight** option does not adjust the height of the cells of the header/footer of Grid. 
+:::
+
+The option just makes their text split into multiple lines, but the height of the cells will remain the same. 
+
+### Height of the header/footer
+
+You can change the height of the header/footer in one of the following ways:
 
 - specify the necessary height of the rows in the header/footer via the [](grid/api/grid_headerrowheight_config.md) and [](grid/api/grid_footerrowheight_config.md) configuration options of Grid
-- provide the automatic adjustment of the header/footer height for the content to fit in with the help of the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footerautoheight_config.md) configuration options of Grid. These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
+- provide the automatic adjustment of the header/footer height for the content to fit in with the help of the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footerautoheight_config.md) configuration options of Grid (**PRO version only**). These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
 
 ~~~js
-const grid = new dhx.Grid("grid", {
+// enabling autoheight only in the content
+const grid1 = new dhx.Grid("grid", {
     columns: [
         // columns config
     ],
     data: dataset,
-    autoHeight: true, // enable autoHeight in data (content)
-    headerAutoHeight: false, // disable autoHeight in header
-    footerAutoHeight: false, // disable autoHeigh in footer
+    autoHeight: true, // enable autoHeight in the data (content)
+    headerAutoHeight: false, // disable autoHeight in the header
+    footerAutoHeight: false, // disable autoHeight in the footer
 });
 
-const grid = new dhx.Grid("grid", {
+// enabling autoheight only in the header
+const grid2 = new dhx.Grid("grid", {
     columns: [
         // columns config
     ],
     data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
-    headerAutoHeight: true, // enable autoHeight in header
+    autoHeight: false, // disable autoHeight in the data, the header and the footer
+    headerAutoHeight: true, // enable autoHeight in the header
 });
 ~~~
 
+**Related sample**: [Grid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d)
+
 ### Automatic adding of empty row into Grid
 
 There is a possibility to automatically add an empty row after the last filled row in the grid. Use the [](grid/api/grid_autoemptyrow_config.md) property in the Grid configuration object to enable this feature:

docs/treegrid/api/treegrid_autoheight_config.md

@@ -25,33 +25,37 @@ const treegrid = new dhx.TreeGrid("treegrid_container", {
 
 **Related sample**: [TreeGrid. Rows auto height](https://snippet.dhtmlx.com/4158ftak)
 
-Note that the **autoHeight** option does not adjust the height of the cells in the header/footer of TreeGrid. The option just makes their text split into multiple lines, but the height of the cells will remain the same. 
+:::note
+Note that the **autoHeight** option does not adjust the height of the cells in the header/footer of TreeGrid. 
+:::
 
-To set the height of the rows in the header/footer, you should apply the [](treegrid/api/treegrid_headerrowheight_config.md) and [](treegrid/api/treegrid_footerrowheight_config.md) configuration options of TreeGrid.
+The option just makes their text split into multiple lines, but the height of the cells will remain the same. You can configure the height of the header/footer in one of the following ways:
 
-To enable autoheight in the header/footer, use the [](treegrid/api/treegrid_headerautoheight_config.md) and [](treegrid/api/treegrid_footerautoheight_config.md) configuration options of Grid. These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
+- set the height of the rows in the header/footer via the [](treegrid/api/treegrid_headerrowheight_config.md) and [](treegrid/api/treegrid_footerrowheight_config.md) configuration options of TreeGrid
 
-~~~js
-const treegrid = new dhx.TreeGrid("treegrid", {
-    columns: [
-        // columns config
-    ],
-    data: dataset,
-    autoHeight: true, // enable autoHeight in data (content)
-    headerAutoHeight: false, // disable autoHeight in header
-    footerAutoHeight: false, // disable autoHeigh in footer
-});
+- enable autoheight in the header/footer via the [](treegrid/api/treegrid_headerautoheight_config.md) and [](treegrid/api/treegrid_footerautoheight_config.md) configuration options of TreeGrid. These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
 
+~~~js
 const treegrid = new dhx.TreeGrid("treegrid", {
     columns: [
         // columns config
     ],
     data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
-    headerAutoHeight: true, // enable autoHeight in header
+    autoHeight: true, // enable autoHeight in the data (content)
+    headerAutoHeight: false, // disable autoHeight in the header
+    footerAutoHeight: false, // disable autoHeight in the footer
 });
 ~~~
 
+#### Take into account the information below:  
+
+- to optimize performance, you should specify `htmlEnable: true` in the configuration object of the column which contains HTML content
+- you can also specify `htmlEnable:true` in the configuration object of TreeGrid
+- `htmlEnable: true` allows calculating the content of simple HTML templates by excluding HTML markup and calculating internal content
+- in case of complex HTML data, usage of the **autoHeight** config may lead to incorrect size calculations
+- the enabled **autoHeight** config adjusts the height of the cells taking into account the [template](treegrid/api/api_treegridcolumn_properties.md) added to cells
+
+
 @changelog: added in v7.1
 
 [comment]: # (@related: treegrid/configuration.md#autoheight-for-rows)

docs/treegrid/api/treegrid_footerautoheight_config.md

@@ -18,15 +18,15 @@ const treegrid = new dhx.TreeGrid("treegrid_container", {
 		// columns config
 	],
 	data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
+    autoHeight: false, // disable autoHeight in the data, the header and the footer
     footerAutoHeight: true // enable autoHeight in the footer
 });
 
 @descr: 
 
 **Related sample**: [TreeGrid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/7kgj0b4e)
 
-Redefines the <b>autoHeight</b> config for the footer.
+Redefines the [autoHeight](treegrid/api/treegrid_autoheight_config.md) config for the footer.
 
 @changelog: added in v8.3
 

docs/treegrid/api/treegrid_headerautoheight_config.md

@@ -18,14 +18,14 @@ const treegrid = new dhx.TreeGrid("treegrid_container", {
         // columns config
     ],
     data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
-    footerAutoHeight: true // enable autoHeight in the footer
+    autoHeight: false, // disable autoHeight in the data, the header and the footer
+    headerAutoHeight: true // enable autoHeight in the header
 });
 
 @descr:
 
 **Related sample**: [TreeGrid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/7kgj0b4e)
 
- Redefines the <b>autoHeight</b> config for the header.
+Redefines the [autoHeight](treegrid/api/treegrid_autoheight_config.md) config for the header.
 
 @changelog: added in v8.3

docs/treegrid/configuration.md

@@ -1121,32 +1121,44 @@ const treegrid = new dhx.TreeGrid("treegrid_container", {
 
 As a result, the height of the cells will automatically adjust to their content.
 
-Please note that the **autoHeight** option does not adjust the height in the cells of the header/footer of TreeGrid. The option just makes their text split into multiple lines, but the height of the cells will remain the same. However, you can change the height of the header/footer in two ways:
+:::note
+Please note that the **autoHeight** option does not adjust the height in the cells of the header/footer of TreeGrid. 
+:::
+
+The option just makes their text split into multiple lines, but the height of the cells will remain the same. 
+
+### Height of the header/footer
 
-- specify the necessary height of the rows in the header/footer via the [](treegrid/api/treegrid_headerrowheight_config.md) and [](treegrid/api/treegrid_footerrowheight_config.md) configuration options of TreeGrid.
+You can change the height of the header/footer in one of the following ways:
+
+- specify the necessary height of the rows in the header/footer via the [](treegrid/api/treegrid_headerrowheight_config.md) and [](treegrid/api/treegrid_footerrowheight_config.md) configuration options of TreeGrid
 - provide the automatic adjustment of the header/footer height for the content to fit in with the help of the [](treegrid/api/treegrid_headerautoheight_config.md) and [](treegrid/api/treegrid_footerautoheight_config.md) configuration options of TreeGrid. These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
 
 ~~~js
+// enabling autoheight only in the content
 const treegrid = new dhx.TreeGrid("treegrid", {
     columns: [
         // columns config
     ],
     data: dataset,
-    autoHeight: true, // enable autoHeight in data (content)
-    headerAutoHeight: false, // disable autoHeight in header
-    footerAutoHeight: false, // disable autoHeigh in footer
+    autoHeight: true, // enable autoHeight in the data (content)
+    headerAutoHeight: false, // disable autoHeight in the header
+    footerAutoHeight: false, // disable autoHeight in the footer
 });
 
+// enabling autoheight only in the header
 const treegrid = new dhx.TreeGrid("treegrid", {
     columns: [
         // columns config
     ],
     data: dataset,
-    autoHeight: false, // disable autoHeight in data, header, footer
-    headerAutoHeight: true, // enable autoHeight in header
+    autoHeight: false, // disable autoHeight in the data, the header and the footer
+    headerAutoHeight: true, // enable autoHeight in the header
 });
 ~~~
 
+**Related sample**: [TreeGrid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/7kgj0b4e)
+
 ### Automatic adding of empty row into TreeGrid
 
 There is a possibility to automatically add an empty row after the last filled row in the treegrid. Use the [](treegrid/api/treegrid_autoemptyrow_config.md) property in the TreeGrid configuration object to enable this feature: