Merge pull request #20 from DHTMLX/cols-rows-hiding-showing-4353

[add] hiding/showing cols/rows api, update related guides

Author: mafanya23

docs/api/api_overview.md

@@ -43,6 +43,8 @@ Parameters:
 | [](api/spreadsheet_getsheets_method.md)      | @getshort(api/spreadsheet_getsheets_method.md)      |
 | [](api/spreadsheet_getstyle_method.md)       | @getshort(api/spreadsheet_getstyle_method.md)       |
 | [](api/spreadsheet_getvalue_method.md)       | @getshort(api/spreadsheet_getvalue_method.md)       |
+| [](api/spreadsheet_hidecols_method.md)       | @getshort(api/spreadsheet_hidecols_method.md)       |
+| [](api/spreadsheet_hiderows_method.md)       | @getshort(api/spreadsheet_hiderows_method.md)       |
 | [](api/spreadsheet_hidesearch_method.md)     | @getshort(api/spreadsheet_hidesearch_method.md)     |
 | [](api/spreadsheet_insertlink_method.md)     | @getshort(api/spreadsheet_insertlink_method.md)     |
 | [](api/spreadsheet_islocked_method.md)       | @getshort(api/spreadsheet_islocked_method.md)       |
@@ -60,6 +62,8 @@ Parameters:
 | [](api/spreadsheet_setstyle_method.md)       | @getshort(api/spreadsheet_setstyle_method.md)       |
 | [](api/spreadsheet_setvalidation_method.md)  | @getshort(api/spreadsheet_setvalidation_method.md)  |
 | [](api/spreadsheet_setvalue_method.md)       | @getshort(api/spreadsheet_setvalue_method.md)       |
+| [](api/spreadsheet_showcols_method.md)       | @getshort(api/spreadsheet_showcols_method.md)       |
+| [](api/spreadsheet_showrows_method.md)       | @getshort(api/spreadsheet_showrows_method.md)       |
 | [](api/spreadsheet_startedit_method.md)      | @getshort(api/spreadsheet_startedit_method.md)      |
 | [](api/spreadsheet_undo_method.md)           | @getshort(api/spreadsheet_undo_method.md)           |
 | [](api/spreadsheet_unfreezecols_method.md)   | @getshort(api/spreadsheet_unfreezecols_method.md)   |

docs/api/overview/actions_overview.md

@@ -74,12 +74,13 @@ spreadsheet.events.on("beforeColumnAdd", function(cell){
 | **setValidation**    | The action is executed when setting data validation for a cell                                                                                                                                          |
 | **sortCells**        | The action is executed when sorting data in spreadsheet                                                                                                                                                 |
 | **setCellStyle**     | The action is executed when changing the style of a cell                                                                                                                                                |
-| **toggleFreeze**     | The action is executed when freezing/unfreezing columns/rows                                                                                                       |
+| **toggleVisibility** | The action is executed when hiding/showing a column or a row                                                                                                                                            |
+| **toggleFreeze**     | The action is executed when freezing/unfreezing columns/rows                                                                                                                                            |
 | **unmerge**          | The action is executed when splitting cells                                                                                                                                                             |
 
 **Change log:**
 
-- The **toggleFreeze** action was added in v5.2
+- The **toggleFreeze** and **toggleVisibility** actions were added in v5.2
 - The **merge**, **unmerge**, **filter**, **fitColumn**, **insertLink** actions were added in v5.0
 
 **Related sample:** [Spreadsheet. Actions](https://snippet.dhtmlx.com/efcuxlkt)

docs/api/overview/methods_overview.md

@@ -26,6 +26,8 @@ description: You can have a Methods overview of the DHTMLX JavaScript Spreadshee
 | [](../spreadsheet_getformula_method.md)     | @getshort(../spreadsheet_getformula_method.md)     |
 | [](../spreadsheet_getsheets_method.md)      | @getshort(../spreadsheet_getsheets_method.md)      |
 | [](../spreadsheet_getstyle_method.md)       | @getshort(../spreadsheet_getstyle_method.md)       |
+| [](../spreadsheet_hidecols_method.md)       | @getshort(../spreadsheet_hidecols_method.md)       |
+| [](../spreadsheet_hiderows_method.md)       | @getshort(../spreadsheet_hiderows_method.md)       |
 | [](../spreadsheet_hidesearch_method.md)     | @getshort(../spreadsheet_hidesearch_method.md)     |
 | [](../spreadsheet_getvalue_method.md)       | @getshort(../spreadsheet_getvalue_method.md)       |
 | [](../spreadsheet_insertlink_method.md)     | @getshort(../spreadsheet_insertlink_method.md)     |
@@ -44,6 +46,8 @@ description: You can have a Methods overview of the DHTMLX JavaScript Spreadshee
 | [](../spreadsheet_setstyle_method.md)       | @getshort(../spreadsheet_setstyle_method.md)       |
 | [](../spreadsheet_setvalidation_method.md)  | @getshort(../spreadsheet_setvalidation_method.md)  |
 | [](../spreadsheet_setvalue_method.md)       | @getshort(../spreadsheet_setvalue_method.md)       |
+| [](../spreadsheet_showcols_method.md)       | @getshort(../spreadsheet_showcols_method.md)       |
+| [](../spreadsheet_showrows_method.md)       | @getshort(../spreadsheet_showrows_method.md)       |
 | [](../spreadsheet_startedit_method.md)      | @getshort(../spreadsheet_startedit_method.md)      |
 | [](../spreadsheet_undo_method.md)           | @getshort(../spreadsheet_undo_method.md)           |
 | [](../spreadsheet_unfreezecols_method.md)   | @getshort(../spreadsheet_unfreezecols_method.md)   |

docs/api/spreadsheet_hidecols_method.md

@@ -0,0 +1,38 @@
+---
+sidebar_label: hideCols()
+title: hideCols method
+description: You can learn about the hideCols method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
+---
+
+# hideCols()
+
+### Description
+
+@short: Hides columns
+
+### Usage
+
+~~~jsx
+hideCols(cell?: string): void;
+~~~
+
+### Parameters
+
+- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used 
+
+### Example
+
+~~~jsx 
+spreadsheet.hideCols("B2"); // the "B" column will be hidden
+spreadsheet.hideCols("sheet2!B2"); // the column "B" in "sheet2" will be hidden
+spreadsheet.hideCols("B2:C2"); // the "B" and "C" columns will be hidden
+~~~
+
+
+**Related article:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns)
+
+**Related API:** [`showCols()`](api/spreadsheet_showcols_method.md)
+
+**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote)
+
+**Change log:** Added in v5.2

docs/api/spreadsheet_hiderows_method.md

@@ -0,0 +1,37 @@
+---
+sidebar_label: hideRows()
+title: hideRows method
+description: You can learn about the hideRows method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
+---
+
+# hideRows()
+
+### Description
+
+@short: Hides rows
+
+### Usage
+
+~~~jsx
+hideRows(cell?: string): void;
+~~~
+
+### Parameters
+
+- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used 
+
+### Example
+
+~~~jsx 
+spreadsheet.hideRows("B2"); // the "2" row will be hidden 
+spreadsheet.hideRows("sheet2!B2"); // the "2" row in "sheet2" will be hidden 
+spreadsheet.hideRows("B2:C4"); // the rows from "2" to "4" will be hidden 
+~~~
+
+**Related article:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns)
+
+**Related API:** [`showRows()`](api/spreadsheet_showrows_method.md)
+
+**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote)
+
+**Change log:** Added in v5.2

docs/api/spreadsheet_parse_method.md

@@ -39,8 +39,20 @@ parse({
         {
             name?: string,
             id?: string,
-            rows?: array,
-            cols?: array,
+            cols?: [
+                {
+                    width?: number,
+                    hidden?: boolean,
+                },
+                // more column objects
+            ],
+            rows?: [
+                {
+                    height?: number,
+                    hidden?: boolean,
+                },
+                // more row objects
+            ],
             data: [
                 {
                     cell: string,
@@ -99,8 +111,12 @@ If you need to create a data set *for several sheets* at once, specify data as a
 - `sheets` - (required) an array of **sheet** objects. Each object has the following properties:
     - `name` - (optional) the sheet name
     - `id` - (optional) the sheet id
-    - `rows` - (optional) an array of height objects. If not specified, the rows will have a height of 32px.
-    - `cols` - (optional) an array of width objects. If not specified, the columns will have a width of 120px.
+    - `rows` - (optional) an array of objects with rows configurations. Each object may contain the following properties:
+        - `height` - (optional) the row height. If not specified, rows will have the height of 32px
+        - `hidden` - (optional) defines the visibility of a row
+    - `cols` - (optional) an array of objects with columns configurations. Each object may contain the following properties:
+        - `width` - (optional) the column width. If not specified, columns will have the width of 120px
+        - `hidden` - (optional) defines the visibility of a column
     - `data` - (required) an array of **cell** objects. Each object has the following properties:
         - `cell` - (required) the id of a cell that is formed as "id of the column + id of the row", e.g. A1
         - `value` - (required) the value of a cell
@@ -163,14 +179,14 @@ const data = {
             name: "sheet 1", 
             id: "sheet_1",
             rows: [
-                { height: 50 }, // the height of the first row
-                { height: 50 }, // the height of the second row
-                // the height of the other rows is 32
+                { height: 50, hidden: true }, // config of the first row
+                { height: 50 }, // config of the second row
+                // the height of other rows is 32
             ],
             cols: [
-                { width: 300 }, // the width of the first column
-                { width: 300 }, // the width of the second column
-                // the width of the other columns is 120
+                { width: 300 }, // config of the first column
+                { width: 300, hidden: true }, // config of the second column
+                // the width of other columns is 120
             ],
             data: [
                 { cell: "A1", value: "Country" },

docs/api/spreadsheet_showcols_method.md

@@ -0,0 +1,37 @@
+---
+sidebar_label: showCols()
+title: showCols method
+description: You can learn about the showCols method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
+---
+
+# showCols()
+
+### Description
+
+@short: Shows hidden columns
+
+### Usage
+
+~~~jsx
+showCols( cell?: string): void;
+~~~
+
+### Parameters
+
+- `cell` - (optional) the id of the cell used to define the id of a column. If the cell id isn't passed, the currently selected cell will be used 
+
+### Example
+
+~~~jsx
+spreadsheet.showCols("B2"); // the "B" column will become visible again
+spreadsheet.showCols("sheet2!B2"); // the column "B" in "sheet2" will become visible again
+spreadsheet.showCols("B2:C2"); // the "B" and "C" columns will become visible again
+~~~
+
+**Related article:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns)
+
+**Related API:** [`hideCols()`](api/spreadsheet_hidecols_method.md)
+
+**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote)
+
+**Change log:** Added in v5.2

docs/api/spreadsheet_showrows_method.md

@@ -0,0 +1,37 @@
+---
+sidebar_label: showRows()
+title: showRows method
+description: You can learn about the showRows method in the documentation of the DHTMLX JavaScript Spreadsheet library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Spreadsheet.
+---
+
+# showRows()
+
+### Description
+
+@short: Shows hidden rows
+
+### Usage
+
+~~~jsx
+showRows(cell?: string): void;
+~~~
+
+### Parameters
+
+- `cell` - (optional) the id of the cell used to define the id of a row. If the cell id isn't passed, the currently selected cell will be used 
+
+### Example
+
+~~~jsx 
+spreadsheet.showRows("B2"); // the "2" row will become visible again
+spreadsheet.showRows("sheet2!B2"); // the "2" row in "sheet2" will become visible again
+spreadsheet.showRows("B2:C2"); // the rows from "2" to "4" will become visible again
+~~~
+
+**Related article:** [Work with Spreadsheet](working_with_ssheet.md/#hidingshowing-rows-and-columns)
+
+**Related API:** [`hideRows()`](api/spreadsheet_hiderows_method.md)
+
+**Related sample:** [Spreadsheet. Hiding columns and rows via API](https://snippet.dhtmlx.com/zere1ote)
+
+**Change log:** Added in v5.2