[add] toggle group control api, minor fixes

docs/form/api/api_overview.md

@@ -875,4 +875,22 @@ description: You can explore the API of Form in the documentation of the DHTMLX
 
 ### Toggle properties
 
-[List of the Toggle properties](form/api/toggle/api_toggle_properties.md)
+[List of the Toggle properties](form/api/toggle/api_toggle_properties.md)
+
+## ToggleGroup API
+
+### ToggleGroup methods
+
+| Name                                             	 	   | Description                                             	 		   |
+| :------------------------------------------------------- | :-------------------------------------------------------------------- |
+| [](form/api/togglegroup/togglegroup_getvalue_method.md)  | @getshort(form/api/togglegroup/togglegroup_getvalue_method.md)        |
+| [](form/api/togglegroup/togglegroup_setvalue_method.md)  | @getshort(form/api/togglegroup/togglegroup_setvalue_method.md)        |
+
+
+### ToggleGroup events
+
+
+
+### ToggleGroup properties
+
+[List of the ToggleGroup properties](form/api/togglegroup/api_togglegroup_properties.md)

docs/form/api/checkbox_group/checkboxgroup_blur_method.md

@@ -10,6 +10,6 @@ description: You can explore the blur method of the Checkbox Group control of Fo
 
 @signature: blur(): void;
 
-@example: form.getItem("checkboxGroup").blur();
+@example: form.getItem("CheckboxGroup").blur();
 
 @changelog: added in v.7.2

docs/form/api/checkbox_group/checkboxgroup_focus_method.md

@@ -6,7 +6,7 @@ description: You can explore the focus method of the Checkbox Group control of F
 
 # focus()
 
-@short: sets focus to the checkbox of the CheckboxGroup control by its id
+@short: sets focus to a checkbox of the CheckboxGroup control by its id
 
 @signature: {'focus(id?: string): void;'}
 

docs/form/api/checkbox_group/checkboxgroup_getproperties_method.md

@@ -52,10 +52,10 @@ const form = new dhx.Form("form_container", {
      ]
 });
 
-// return object of the CheckboxGroup control 
+// return the object of the CheckboxGroup control 
 form.getItem("checkboxGroup").getProperties();
 
-// return object of checkbox of the CheckboxGroup control 
+// return the object of a checkbox of the CheckboxGroup control 
 form.getItem("checkboxGroup").getProperties("second");
 
 @descr:
@@ -64,6 +64,7 @@ The returned object of the **CheckboxGroup** control looks like:
 
 ~~~js
 {
+    css: "",
 	errorMessage: "",
 	height: "content",
 	helpMessage: "Help information",

docs/form/api/checkbox_group/checkboxgroup_getvalue_method.md

@@ -14,19 +14,19 @@ description: You can explore the getValue method of the Checkbox Group control o
 - `id: string` - optional, the id of a checkbox
 
 @returns:
-If the id of a checkbox is specified, the method returns either a string with the current value of the checkbox, or boolean value with the state of the checkbox.
+If the id of a checkbox is specified, the method returns either a string with the current value of the checkbox, or a boolean value with the state of the checkbox.
 
-If the id of a checkbox is not specified, the method returns an object with current values/states of the checkboxes. The object contains a set of *key:value* pairs where *key* is the id of a checkbox and *value* is either the value of the checkbox or its state (if the value attribute is not specified for the checkbox).
+If the id of a checkbox is not specified, the method returns an object with the current values/states of checkboxes. The object contains a set of *key:value* pairs where the *key* is the id of a checkbox and the *value* is either the value of a checkbox or its state (if the value attribute is not specified for the checkbox).
 
 @example:
 // returns string value if the value is specified in the checkbox configuration
 form.getItem("CheckboxGroup").getValue("checkbox_id_1"); //-> "some_value"
 
-// returns boolean state if the value is not specified for the checkbox
+// returns a boolean state if the value is not specified for the checkbox
 form.getItem("CheckboxGroup").getValue("checkbox_id_2"); //-> true/false
 
-// returns an object with current values/states of the checkboxes
-form.getItem("CheckboxGroup").getValue() 
+// returns an object with the current values/states of checkboxes
+form.getItem("CheckboxGroup").getValue(); 
 // -> { "checkbox_id_1": "some_value_1",  "checkbox_id_2": true }
 
 @descr:

docs/form/api/checkbox_group/checkboxgroup_hide_method.md

@@ -18,7 +18,7 @@ form.getItem("CheckboxGroup").hide("checkbox_1");
 
 @descr:
 
-If **id** of the checkbox is not specified, the method hides CheckboxGroup with all its checkboxes.
+If the **id** of a checkbox is not specified, the method hides CheckboxGroup with all its checkboxes.
 
 **Related sample:** [Form. Hide/Show control](https://snippet.dhtmlx.com/w6rr8chf)
 

docs/form/api/checkbox_group/checkboxgroup_ischecked_method.md

@@ -8,23 +8,23 @@ description: You can explore the isChecked method of the Checkbox Group control
 
 @short: checks whether a checkbox of the CheckboxGroup control is checked
 
-@signature: {'isChecked(id?: string): boolean | { [key: string]: boolean };'}
+@signature: {'isChecked(id?: string): boolean | { [id: string]: boolean };'}
 
 @params:
 - `id: string` - optional, the id of a checkbox
 
 @returns:
 Either a boolean value or an object.
 
-If the id of a checkbox is specified, the method returns boolean value . `true`, if the checkbox is checked; otherwise, `false`.
+If the id of a checkbox is specified, the method returns a boolean value . `true`, if the checkbox is checked; otherwise, `false`.
 
-If the id of a checkbox is not specified, the method returns an object with a set of *key:value* pairs where *key* is the id of a checkbox and *value* is the state of the checkbox.
+If the id of a checkbox is not specified, the method returns an object with a set of *key:value* pairs where the *key* is the id of a checkbox and the *value* is the state of the checkbox.
 
 @example:
-form.getItem("CheckboxGroup").isChecked("checkbox_id_3") 
+form.getItem("CheckboxGroup").isChecked("checkbox_id_3");
 // -> true/false
 
-form.getItem("CheckboxGroup").isChecked() 
-// -> {  "checkbox_id_1": true,  "checkbox_id_2": false }
+form.getItem("CheckboxGroup").isChecked(); 
+// -> { "checkbox_id_1": true, "checkbox_id_2": false }
 
 @descr:

docs/form/api/checkbox_group/checkboxgroup_setproperties_method.md

@@ -6,7 +6,7 @@ description: You can explore the setProperties method of the Checkbox Group cont
 
 # setProperties()
 
-@short:  allows changing available configuration attributes of the control dynamically
+@short:  allows changing the available configuration attributes of the control dynamically
 
 @signature: {'setProperties(arg?: string | object, properties?: object): void;'}
 
@@ -40,28 +40,19 @@ form.getItem("checkboxGroup").setProperties({
     }
 });
 
-// 2. Changes values in the configuration of the specified checkbox of CheckboxGroup
+// 2. Changes values in the configuration of the specified checkbox of a CheckboxGroup
 form.getItem("checkboxGroup").setProperties("first", {
     text: "New Text",
 	padding: 20
 });
 
 @descr:
 
-We recommend that you apply the second way of using the method if you want to change the configuration of a separate checkbox in the CheckboxGroup control:
-
-~~~js
-form.getItem("checkboxGroup").setProperties("first", {
-    text: "New Text",
-    padding: 20
-});
-~~~
-
 :::info
 The method invokes the [](form/api/checkbox_group/checkboxgroup_afterchangeproperties_event.md) and [](form/api/checkbox_group/checkboxgroup_beforechangeproperties_event.md) events.
 :::
 
-It is possible to change values of the following configuration attributes of the **CheckboxGroup** control:
+It is possible to change the values of the following configuration attributes of the **CheckboxGroup** control:
 
 ~~~js
 {
@@ -82,7 +73,7 @@ It is possible to change values of the following configuration attributes of the
 }
 ~~~
 
-It is possible to change values of the following configuration attributes of a **checkbox** of the CheckboxGroup control:
+It is possible to change the values of the following configuration attributes of a **checkbox** of the CheckboxGroup control:
 
 ~~~js
 {

docs/form/api/checkbox_group/checkboxgroup_show_method.md

@@ -18,7 +18,7 @@ form.getItem("CheckboxGroup").show("checkbox_1");
 
 @descr:
 
-If **id** of the checkbox is not specified, the method shows CheckboxGroup with all its checkboxes.
+If the **id** of a checkbox is not specified, the method shows CheckboxGroup with all its checkboxes.
 
 **Related sample:** [Form. Hide/Show control](https://snippet.dhtmlx.com/w6rr8chf)
 

docs/form/api/toggle/api_toggle_properties.md

@@ -53,6 +53,6 @@ description: You can explore the Properties of the Toggle control of Form in the
 
 ### Example
 
-<iframe src="https://snippet.dhtmlx.com/ap3ilv0i?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="450"></iframe>
+<iframe src="https://snippet.dhtmlx.com/yqi21ykr?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="450"></iframe>
 
 **Related article:** [Toggle](form/toggle.md)

docs/form/api/togglegroup/api_togglegroup_properties.md

@@ -69,4 +69,16 @@ description: You can explore the Properties of the Toggle Group control of Form
 	- `icon` - (optional) sets the class of an icon displayed inside the toggle. When initialized together with the **offIcon** property, the specified classes of icons will be rendered in the selected (pressed) state of the toggle,"" (empty string) by default
 	- `offIcon` - (optional) sets the class of an icon that will be rendered in the unselected (unpressed) state of the toggle, "" (empty string) by default
 	- `value` - (optional) specifies the value in the selected (pressed) state. If not defined, the **selected** property with the boolean value is used instead, *undefined* by default
+- `value` - (optional) defines the state of elements on initialization. As a value it takes an object presented as a *key:value* pair, where the key is the id of an element and the value is the initial state of the element. It takes priority over the state of an element set in its configuration object
+	- `[id: string]: boolean` - sets the state of an element
+- `css` - (optional) adds style classes to a control
+- `height` - (optional) the height of a control
+- `width` - (optional) the width of a control
+- `padding` - (optional) sets padding between a cell and a border of a ToggleGroup control
+
+### Example
+
+<iframe src="https://snippet.dhtmlx.com/yqi21ykr?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="450"></iframe>
+
+**Related article:** [ToggleGroup](form/togglegroup.md)
 

docs/form/api/togglegroup/togglegroup_beforechange_event.md

@@ -0,0 +1,25 @@
+---
+sidebar_label: beforeChange
+title: JavaScript Form - beforeChange Toggle Group Event 
+description: You can explore the beforeChange event of the Toggle Group 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.
+---
+
+# beforeChange
+
+@short: fires before changing the value of a control
+
+@signature: {'beforeChange: (value: {[id: string]: string | number |boolean}) => boolean | void;'}
+
+@params:
+- `value: object` - the current value of the control. The object contains a set of <i>key:value</i> pairs where <i>key</i> is the id of a toggle and <i>value</i> is the value/state of the toggle
+
+@returns:
+Return `false` to prevent changing the value of the control; otherwise, `true`
+
+@example:
+form.getItem("ToggleGroup").events.on("beforeChange", function(value) {
+    console.log("beforeChange", value);
+    return true;
+});
+
+@descr:

docs/form/api/togglegroup/togglegroup_blur_method.md

@@ -0,0 +1,13 @@
+---
+sidebar_label: blur()
+title: JavaScript Form - blur Toggle Group Method 
+description: You can explore the blur method of the Toggle Group 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.
+---
+
+# blur()
+
+@short: removes focus from a ToggleGroup control
+
+@signature: blur(): void;
+
+@example: form.getItem("ToggleGroup").blur();

docs/form/api/togglegroup/togglegroup_change_event.md

@@ -0,0 +1,21 @@
+---
+sidebar_label: change
+title: JavaScript Form - change Toggle Group Event 
+description: You can explore the change event of the Toggle Group 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.
+---
+
+# change
+
+@short: fires on changing the value of a control
+
+@signature: {'change: (value: {[id: string]: string | number | boolean}) => void;'}
+
+@params:
+- `value: object` - the current value of the control. The object contains a set of <i>key:value</i> pairs where <i>key</i> is the id of a toggle and <i>value</i> is the value/state of the toggle.
+
+@example:
+form.getItem("ToggleGroup").events.on("change", function(value) {
+    console.log("change", value);
+});
+
+@descr:

docs/form/api/togglegroup/togglegroup_destructor_method.md

@@ -0,0 +1,16 @@
+---
+sidebar_label: destructor()
+title: JavaScript Form - destructor Toggle Group Method 
+description: You can explore the destructor method of the Toggle Group 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.
+---
+
+# destructor()
+
+@short: removes a toggle group instance and releases the occupied resources
+
+@signature: {'destructor(): void;'}
+
+@example:
+form.getItem("ToggleGroup").destructor();
+
+@descr:

docs/form/api/togglegroup/togglegroup_disable_method.md

@@ -0,0 +1,19 @@
+---
+sidebar_label: disable()
+title: JavaScript Form - disable Toggle Group Method 
+description: You can explore the disable method of the Toggle Group 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.
+---
+
+# disable()
+
+@short: disables a ToggleGroup control or a specific element inside the control
+
+@signature: {'disable(id?: string): void;'}
+
+@params:
+- `id: string` - optional, the **id** of a specific element inside the ToggleGroup control
+
+@example:
+form.getItem("ToggleGroup").disable("toggle_1");
+
+@descr:

docs/form/api/togglegroup/togglegroup_enable_method.md

@@ -0,0 +1,19 @@
+---
+sidebar_label: enable()
+title: JavaScript Form - enable Toggle Group Method 
+description: You can explore the enable method of the Toggle Group 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.
+---
+
+# enable()
+
+@short: enables a ToggleGroup control or a specific element inside the control
+
+@signature: {'enable(id?: string): void;'}
+
+@params:
+- `id: string` - optional, the **id** of a specific element inside the ToggleGroup control
+
+@example:
+form.getItem("ToggleGroup").enable("toggle_1");
+
+@descr:

docs/form/api/togglegroup/togglegroup_focus_method.md

@@ -0,0 +1,20 @@
+---
+sidebar_label: focus()
+title: JavaScript Form - focus Toggle Group Method 
+description: You can explore the focus method of the Toggle Group 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.
+---
+
+# focus()
+
+@short: sets focus to an option of the ToggleGroup control by its id
+
+@signature: {'focus(id?: string): void;'}
+
+@params:
+- `id: string` - optional, the id of an option
+
+@example:
+form.getItem("ToggleGroup").focus("toggle_1");
+
+@descr:
+If "id" is not specified, the method sets focus to the first option of the Toggle Group.