[update] showConfigPanel updated, configPanel added

DHTMLX · Jun 20, 2024 · 7e5a3b4 · 7e5a3b4
1 parent 11ecbeb
commit 7e5a3b4
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 7 deletions.
diff --git a/docs/api/config/configpanel-property.md b/docs/api/config/configpanel-property.md
@@ -0,0 +1,57 @@
+---
+sidebar_label: configPanel
+title: configPanel Config
+description: You can learn about the configPanel config in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
+---
+
+# configPanel
+
+### Description
+
+@short: Optional. Enables/disables the visibility of the Configuration panel in UI
+
+In UI the panel is hidden/shown by clicking the **Hide Settings** button. 
+
+### Usage
+
+~~~jsx  
+configPanel?: boolean;
+~~~
+
+### Parameters
+
+The property can be set to **true** or **false**:
+
+- `true` - default, shows the Configuration panel
+- `false` - hides the Configuration panel
+
+## Example
+
+~~~jsx 
+// The configuration panel is hidden on init
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+
+  configPanel: false,
+
+  config: {
+    rows: ["hobbies"],
+    columns: ["relationship_status"],
+    values: [
+      {
+        field: "age",
+        method: "min",
+      },
+      {
+        field: "age",
+        method: "max",
+      },
+    ],
+  },
+});
+~~~
+
+**Related articles:** 
+- [`show-config-panel` event](/api/events/show-config-panel-event)
+- [`showConfigPanel()` method](/api/methods/showconfigpanel-method)
diff --git a/docs/api/events/show-config-panel-event.md b/docs/api/events/show-config-panel-event.md
@@ -8,7 +8,7 @@ description: You can learn about the show-config-panel event in the documentatio
 
 ### Description
 
-@short: Fires when the visibility of the configuration panel changes
+@short: Fires when the visibility of the Configuration panel changes
 
 ### Usage
 
@@ -22,7 +22,7 @@ description: You can learn about the show-config-panel event in the documentatio
 
 The callback of the action takes an object with the following parameter:
 
-- `mode` - (required) if the value is set to **true** (default), the configuration panel is shown, and set to **false** when the configuration panel is hidden
+- `mode` - (required) if the value is set to **true** (default), the Configuration panel is shown, and set to **false** when the configuration panel is hidden
 
 ### Example
 
@@ -50,3 +50,7 @@ widget.api.exec("show-config-panel", {
   mode: false,
 });
 ~~~
+
+**Related articles**: 
+- [`showConfigPanel()` method](/api/methods/showconfigpanel-method)
+- [`configPanel` property](/api/config/configpanel-property)
diff --git a/docs/api/methods/showconfigpanel-method.md b/docs/api/methods/showconfigpanel-method.md
@@ -8,7 +8,7 @@ description: You can learn about the showConfigPanel() method in the documentati
 
 ### Description
 
-@short: Shows or hides the configuration panel
+@short: Shows or hides the Configuration panel
 
 This TypeScript method can be useful when there's a need to control the visibility of the configuration panel without user interaction. For instance, you might want to hide or display the panel based on some other interaction or state in your application.
 
@@ -21,7 +21,7 @@ showConfigPanel({mode: boolean}): void;
 
 ### Parameters
 
-- `mode` (boolean) - (required) if the value is set to **true** (default), the configuration panel is shown, and set to **false** when the configuration panel is hidden
+- `mode` (boolean) - (required) if the value is set to **true** (default), the configuration panel is shown, and set to **false** when the Configuration panel is hidden
 
 ### Example
 
@@ -50,3 +50,7 @@ widget.showConfigPanel ({
     mode: false
 })
 ~~~
+
+**Related articles**: 
+- [`show-config-panel` event](/api/events/show-config-panel-event)
+- [`configPanel` property](/api/config/configpanel-property)
diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md
@@ -393,11 +393,38 @@ const widget = new pivot.Pivot("#pivot", {
 
 ### Default settings
 
-The configuration panel is displayed by default. The widget provides the default functionality that allows toggling the visibility of the configuration panel with the button click. It's made possible via the [`show-config-panel`](/api/event/show-config-panel-event) event.
+The configuration panel is displayed by default. The widget provides the default functionality that allows controlling the visibility of the Configuration panel with the button click. It's made possible via the [`configPanel`](api/config/configPanel) property or [`show-config-panel`](/api/events/show-config-panel-event) event.
 
 ### Hiding configuration panel
 
-To hide the panel, you can trigger the [`show-config-panel`](/api/methods/show-config-panel-method) method with the [`api.exec()`](/api/methods/exec-method) method, and set the `mode` parameter to **false**.
+To hide the panel, set the value of the [`configPanel`](api/config/configPanel) property to **false**.
+
+~~~jsx 
+// The configuration panel is hidden on init
+const widget = new pivot.Pivot("#pivot", {
+  fields,
+  data: dataset,
+
+  configPanel: false,
+
+  config: {
+    rows: ["hobbies"],
+    columns: ["relationship_status"],
+    values: [
+      {
+        field: "age",
+        method: "min",
+      },
+      {
+        field: "age",
+        method: "max",
+      },
+    ],
+  },
+});
+~~~
+
+You can also trigger the [`show-config-panel`](/api/events/show-config-panel-event) event with the [`api.exec()`](/api/methods/exec-method) method, and set the `mode` parameter to **false**.
 
 ~~~jsx {19-22}
 const widget = new pivot.Pivot("#pivot", {
@@ -426,7 +453,7 @@ widget.api.exec("show-config-panel", {
 
 ### Disabling the default toggling functionality
 
-You can block toggling the visibility of the configuration panel on the button click via the [`api.intercept()`](/api/methods/intercept-method) method (by listening to the [`show-config-panel`](/api/methods/show-config-panel-method) method and returning *false*).
+You can block toggling the visibility of the configuration panel on the button click via the [`api.intercept()`](/api/methods/intercept-method) method (by listening to the [`show-config-panel`](/api/events/show-config-panel-event) event and returning *false*).
 
 Example:
 
@@ -455,6 +482,8 @@ pivotWidget.api.intercept("show-config-panel", () => {
 });
 ~~~
 
+You can also control the visibility of the Configuration panel using the [`showConfigPanel()`](api/methods/showconfigpanel-method) method.
+
 ## Example
 
 In this snippet you can see how to configure the key elements of Pivot:

diff --git a/sidebars.js b/sidebars.js
@@ -140,6 +140,7 @@ module.exports = {
                         // JS Pivot
                         "api/config/columnshape-property",
                         "api/config/config-property",
+                        "api/config/configpanel-property",
                         "api/config/data-property",
                         "api/config/fields-property",
                         "api/config/headershape-property",