diff --git a/docs/form/api/api_overview.md b/docs/form/api/api_overview.md index 2a97a33f..a019e3cd 100644 --- a/docs/form/api/api_overview.md +++ b/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) \ No newline at end of file +[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) \ No newline at end of file diff --git a/docs/form/api/checkbox_group/checkboxgroup_blur_method.md b/docs/form/api/checkbox_group/checkboxgroup_blur_method.md index 0da86ec3..2f1750ae 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_blur_method.md +++ b/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 diff --git a/docs/form/api/checkbox_group/checkboxgroup_focus_method.md b/docs/form/api/checkbox_group/checkboxgroup_focus_method.md index 80ee59c9..f7886721 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_focus_method.md +++ b/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;'} diff --git a/docs/form/api/checkbox_group/checkboxgroup_getproperties_method.md b/docs/form/api/checkbox_group/checkboxgroup_getproperties_method.md index 51baa8e6..8fb26f4a 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_getproperties_method.md +++ b/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", diff --git a/docs/form/api/checkbox_group/checkboxgroup_getvalue_method.md b/docs/form/api/checkbox_group/checkboxgroup_getvalue_method.md index 5b7a51fa..9d74d44a 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_getvalue_method.md +++ b/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: \ No newline at end of file diff --git a/docs/form/api/checkbox_group/checkboxgroup_hide_method.md b/docs/form/api/checkbox_group/checkboxgroup_hide_method.md index 3d89a2a5..fe6d83df 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_hide_method.md +++ b/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) diff --git a/docs/form/api/checkbox_group/checkboxgroup_ischecked_method.md b/docs/form/api/checkbox_group/checkboxgroup_ischecked_method.md index efb28fe3..a2465789 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_ischecked_method.md +++ b/docs/form/api/checkbox_group/checkboxgroup_ischecked_method.md @@ -8,7 +8,7 @@ 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 @@ -16,15 +16,15 @@ description: You can explore the isChecked method of the Checkbox Group control @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: diff --git a/docs/form/api/checkbox_group/checkboxgroup_setproperties_method.md b/docs/form/api/checkbox_group/checkboxgroup_setproperties_method.md index 6c427c9f..a5718ec1 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_setproperties_method.md +++ b/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,7 +40,7 @@ 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 @@ -48,20 +48,11 @@ form.getItem("checkboxGroup").setProperties("first", { @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 { diff --git a/docs/form/api/checkbox_group/checkboxgroup_show_method.md b/docs/form/api/checkbox_group/checkboxgroup_show_method.md index 6729c6c9..089a0953 100644 --- a/docs/form/api/checkbox_group/checkboxgroup_show_method.md +++ b/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) diff --git a/docs/form/api/toggle/api_toggle_properties.md b/docs/form/api/toggle/api_toggle_properties.md index 5385444c..8c83fb03 100644 --- a/docs/form/api/toggle/api_toggle_properties.md +++ b/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 - + **Related article:** [Toggle](form/toggle.md) \ No newline at end of file diff --git a/docs/form/api/togglegroup/api_togglegroup_properties.md b/docs/form/api/togglegroup/api_togglegroup_properties.md index 6f38f110..bb0b03ac 100644 --- a/docs/form/api/togglegroup/api_togglegroup_properties.md +++ b/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 + + + +**Related article:** [ToggleGroup](form/togglegroup.md) diff --git a/docs/form/api/togglegroup/togglegroup_afterchangeproperties_event.md b/docs/form/api/togglegroup/togglegroup_afterchangeproperties_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_afterhide_event.md b/docs/form/api/togglegroup/togglegroup_afterhide_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_aftershow_event.md b/docs/form/api/togglegroup/togglegroup_aftershow_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_beforechange_event.md b/docs/form/api/togglegroup/togglegroup_beforechange_event.md new file mode 100644 index 00000000..85830512 --- /dev/null +++ b/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 key:value pairs where key is the id of a toggle and value 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: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_beforechangeproperties_event.md b/docs/form/api/togglegroup/togglegroup_beforechangeproperties_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_beforehide_event.md b/docs/form/api/togglegroup/togglegroup_beforehide_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_beforeshow_event.md b/docs/form/api/togglegroup/togglegroup_beforeshow_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_blur_event.md b/docs/form/api/togglegroup/togglegroup_blur_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_blur_method.md b/docs/form/api/togglegroup/togglegroup_blur_method.md new file mode 100644 index 00000000..cffa8534 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_change_event.md b/docs/form/api/togglegroup/togglegroup_change_event.md new file mode 100644 index 00000000..8758bc8c --- /dev/null +++ b/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 key:value pairs where key is the id of a toggle and value is the value/state of the toggle. + +@example: +form.getItem("ToggleGroup").events.on("change", function(value) { + console.log("change", value); +}); + +@descr: diff --git a/docs/form/api/togglegroup/togglegroup_destructor_method.md b/docs/form/api/togglegroup/togglegroup_destructor_method.md new file mode 100644 index 00000000..f0f19b5d --- /dev/null +++ b/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: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_disable_method.md b/docs/form/api/togglegroup/togglegroup_disable_method.md new file mode 100644 index 00000000..5dfa7266 --- /dev/null +++ b/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: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_enable_method.md b/docs/form/api/togglegroup/togglegroup_enable_method.md new file mode 100644 index 00000000..33e1f7d5 --- /dev/null +++ b/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: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_focus_event.md b/docs/form/api/togglegroup/togglegroup_focus_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_focus_method.md b/docs/form/api/togglegroup/togglegroup_focus_method.md new file mode 100644 index 00000000..83158302 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_getproperties_method.md b/docs/form/api/togglegroup/togglegroup_getproperties_method.md new file mode 100644 index 00000000..aa7ea7af --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_getproperties_method.md @@ -0,0 +1,83 @@ +--- +sidebar_label: getProperties() +title: JavaScript Form - getProperties Toggle Group Method +description: You can explore the getProperties 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. +--- + +# getProperties() + +@short: returns an object with the available configuration attributes of the control + +@signature: {'getProperties(id?: string): object;'} + +@params: +- `id: string` - optional, the id of a toggle + +@returns: +An object either with the available attributes of the control and their values, or with the available attributes of the toggle and their values + +@example: +const form = new dhx.Form("form_container", { + rows: [ + { + id: "toggleGroup", + name: "align", + type: "toggleGroup", + value: { + "left": true, + }, + options: [ + { + id: "left", + icon: "dxi dxi-format-align-left", + }, + { + id: "center", + icon: "dxi dxi-format-align-center", + value: "center", + }, + { + id: "right", + icon: "dxi dxi-format-align-right", + value: 1, + } + ] + }, + ] +}); + +// return the object of the ToggleGroup control +form.getItem("ToggleGroup").getProperties(); + +// return the object of a checkbox of the ToggleGroup control +form.getItem("ToggleGroup").getProperties("second"); + +@descr: + +The returned object of the **ToggleGroup** control looks like: + +~~~js + css: "", + full: false, + gap: 0, + height: "content", + multiselection: false, + options: {...}, + padding: 0, + width: "content" +~~~ + +The returned object of a **toggle** of the **ToggleGroup** control looks like: + +~~~js +{ + full: false, + icon: "", + offIcon: "", + offText: "", + text: "Toggle 1", + value: 1 +} +~~~ + +You will find the description of all these properties [here](form/api/togglegroup/api_togglegroup_properties.md). \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_getvalue_method.md b/docs/form/api/togglegroup/togglegroup_getvalue_method.md new file mode 100644 index 00000000..3b95a753 --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_getvalue_method.md @@ -0,0 +1,33 @@ +--- +sidebar_label: getValue() +title: JavaScript Form - getValue Toggle Group Method +description: You can explore the getValue 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. +--- + +# getValue() + +@short: returns the current value/state of a toggle(s) + +@signature: {'getValue(id?: string): string | boolean | number | {[id: string]: boolean | string | number};'} + +@params: +- `id: string` - optional, the id of a toggle + +@returns: +If the id of a toggle is specified, the method returns either a string|number with the current value of the checkbox, or a boolean value with the state of the toggle. + +If the id of a toggle is not specified, the method returns an object with the current values/states of toggles. The object contains a set of *key:value* pairs where the *key* is the id of a toggle and the *value* is either the value of a toggle or its state (if the value attribute is not specified for the toggle). + +@example: +// returns a string value if the value is specified in the toggle configuration +form.getItem("ToggleGroup").getValue("toggle_1"); //-> "some_value" + +// returns a boolean state if the value is not specified for the toggle +form.getItem("ToggleGroup").getValue("toggle_2"); //-> true/false + +// returns an object with the current values/states of toggles +form.getItem("ToggleGroup").getValue(); +// -> { "toggle_1": "some_value_1", "toggle_2": true } + +@descr: + diff --git a/docs/form/api/togglegroup/togglegroup_hide_method.md b/docs/form/api/togglegroup/togglegroup_hide_method.md new file mode 100644 index 00000000..a8f06181 --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_hide_method.md @@ -0,0 +1,21 @@ +--- +sidebar_label: hide() +title: JavaScript Form - hide Toggle Group Method +description: You can explore the hide 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. +--- + +# hide() + +@short: hides either an option of ToggleGroup or the whole ToggleGroup + +@signature: {'hide(id?: string): void;'} + +@params: +- `id: string` - optional, the **id** of a specific element inside the ToggleGroup control + +@example: +form.getItem("ToggleGroup").hide("toggle_1"); + +@descr: + +If the **id** of a toggle is not specified, the method hides ToggleGroup with all its options. diff --git a/docs/form/api/togglegroup/togglegroup_isdisabled_method.md b/docs/form/api/togglegroup/togglegroup_isdisabled_method.md new file mode 100644 index 00000000..b2614162 --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_isdisabled_method.md @@ -0,0 +1,22 @@ +--- +sidebar_label: isDisabled() +title: JavaScript Form - isDisabled Toggle Group Method +description: You can explore the isDisabled 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. +--- + +# isDisabled() + +@short: checks whether a ToggleGroup control or a specific element inside the control is disabled + +@signature: {'isDisabled(id?: string): boolean;'} + +@params: +- `id: string` - optional, the **id** of a specific element inside the ToggleGroup control + +@returns: +`true`, if a control or a specific element is disabled; otherwise, `false`. + +@example: +form.getItem("ToggleGroup").isDisabled("toggle_1"); // -> true/false + +@descr: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_isselected_method.md b/docs/form/api/togglegroup/togglegroup_isselected_method.md new file mode 100644 index 00000000..888f9781 --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_isselected_method.md @@ -0,0 +1,30 @@ +--- +sidebar_label: isSelected() +title: JavaScript Form - isSelected Toggle Group Method +description: You can explore the isChecked 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. +--- + +# isSelected() + +@short: checks whether a toggle of the ToggleGroup control is selected + +@signature: {'isSelected(id?: string): boolean | { [id: string]: boolean };'} + +@params: +- `id: string` - optional, the id of a toggle + +@returns: +Either a boolean value or an object. + +If the id of a toggle is specified, the method returns a boolean value . `true`, if the toggle is selected; otherwise, `false`. + +If the id of a toggle is not specified, the method returns an object with a set of *key:value* pairs where the *key* is the id of a toggle and the *value* is the state of the toggle. + +@example: +form.getItem("ToggleGroup").isSelected("toggle_1"); +// -> true/false + +form.getItem("ToggleGroup").isSelected(); +// -> { "toggle_1": true, "toggle_2": false } + +@descr: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_isvisible_method.md b/docs/form/api/togglegroup/togglegroup_isvisible_method.md new file mode 100644 index 00000000..b95900db --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_isvisible_method.md @@ -0,0 +1,22 @@ +--- +sidebar_label: isVisible() +title: JavaScript Form - isVisible Toggle Group Method +description: You can explore the isVisible 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. +--- + +# isVisible() + +@short: checks whether a ToggleGroup control or a specific element inside the control is visible + +@signature: {'isVisible(id?: string): boolean;'} + +@params: +- `id: string` - optional, the **id** of a specific element inside the ToggleGroup control + +@returns: +`true`, if a control or a specific element is visible; otherwise, `false` + +@example: +form.getItem("ToggleGroup").isVisible("toggle_1"); // -> true/false + +@descr: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_keydown_event.md b/docs/form/api/togglegroup/togglegroup_keydown_event.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/form/api/togglegroup/togglegroup_setproperties_method.md b/docs/form/api/togglegroup/togglegroup_setproperties_method.md new file mode 100644 index 00000000..211d2840 --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_setproperties_method.md @@ -0,0 +1,76 @@ +--- +sidebar_label: setProperties() +title: JavaScript Form - setProperties Toggle Group Method +description: You can explore the setProperties 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. +--- + +# setProperties() + +@short: allows changing the available configuration attributes of the ToggleGroup or its separate options dynamically + +@signature: {'setProperties(config: object, id?: string): void;'} + +@params: +- `config: object` - a configuration object with the available attributes and their new values +- `id: string` - optional, the id of an option to apply the new configuration object to + +@example: +// 1. Changes values in the configuration of the ToggleGroup control +form.getItem("ToggleGroup").setProperties({ + full: true, + width: 140, + options: { + rows: [ + { + id: "first", + text: "S", + }, + { + id: "second", + text: "M", + }, + { + id: "third", + text: "L", + }, + ] + } +}); + +// 2. Changes values in the configuration of the specified toggle of a ToggleGroup +form.getItem("ToggleGroup").setProperties({ + text: "On Text", + offText: "Off Text" +}, "first"); + +@descr: + +:::info +The method invokes the [](form/api/togglegroup/togglegroup_afterchangeproperties_event.md) and [](form/api/togglegroup/togglegroup_beforechangeproperties_event.md) events. +::: + +It is possible to change the values of the following configuration attributes of the **ToggleGroup** control: + +~~~js +css: string, +full: boolean, +gap: number, +height: string | number|"content", +multiselection: boolean, +options: object[], +padding: string | number, +width: string|number|"content" +~~~ + +It is possible to change the values of the following configuration attributes of a **toggle** of the ToggleGroup control: + +~~~js +full: boolean, +icon: string, +offIcon: string, +offText: string, +text: string, +value: string | number +~~~ + +You will find the description of these properties [here](form/api/togglegroup/api_togglegroup_properties.md). \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_setvalue_method.md b/docs/form/api/togglegroup/togglegroup_setvalue_method.md new file mode 100644 index 00000000..11dbcd87 --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_setvalue_method.md @@ -0,0 +1,25 @@ +--- +sidebar_label: setValue() +title: JavaScript Form - setValue Toggle Group Method +description: You can explore the setValue 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. +--- + +# setValue() + +@short: defines the state of the option's elements + +@signature: {'setValue(value: {[id: string]: boolean }): void | boolean;'} + +@params: + +- `value: object` - the value to be set. The object contains a set of key:value pairs where key is the id of a checkbox and value is the state of the checkbox + + +@example: +form.getItem("ToggleGroup").setValue({ + "toggle1": true, + "toggle2": false, + "toggle3": true +}); + +@descr: \ No newline at end of file diff --git a/docs/form/api/togglegroup/togglegroup_show_method.md b/docs/form/api/togglegroup/togglegroup_show_method.md new file mode 100644 index 00000000..ac7490f1 --- /dev/null +++ b/docs/form/api/togglegroup/togglegroup_show_method.md @@ -0,0 +1,21 @@ +--- +sidebar_label: show() +title: JavaScript Form - show Toggle Group Method +description: You can explore the show 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. +--- + +# show() + +@short: shows either an option of ToggleGroup or the whole ToggleGroup + +@signature: {'show(id?: string): void;'} + +@params: +- `id: string` - optional, the **id** of a specific element inside the ToggleGroup control + +@example: +form.getItem("ToggleGroup").show("toggle_1"); + +@descr: + +If the **id** of a toggle is not specified, the method shows ToggleGroup with all its options. \ No newline at end of file diff --git a/docs/form/toggle.md b/docs/form/toggle.md index 1d4d3108..52288a7d 100644 --- a/docs/form/toggle.md +++ b/docs/form/toggle.md @@ -10,9 +10,9 @@ A special button control that changes its state from pressed to the unpressed on ![Toggle button control](../assets/form/form_toggle.png) -**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/6lsarcjc) +**Related sample**: [Form. All controls](https://snippet.dhtmlx.com/hfmoolvw) -**Related sample**: [Form. Toggle](https://snippet.dhtmlx.com/ap3ilv0i) +**Related sample**: [Form. Toggle](https://snippet.dhtmlx.com/yqi21ykr) ## Adding Toggle diff --git a/docs/form/togglegroup.md b/docs/form/togglegroup.md index 825a97bf..b78beaee 100644 --- a/docs/form/togglegroup.md +++ b/docs/form/togglegroup.md @@ -10,7 +10,7 @@ A control intended for creating groups of toggle buttons. ![ToggleGroup control](../assets/form/form_togglegroup.png) -**Related sample**: [Form. Toggle and ToggleGroup](https://snippet.dhtmlx.com/ap3ilv0i) +**Related sample**: [Form. ToggleGroup](https://snippet.dhtmlx.com/yqi21ykr) ## Adding ToggleGroup diff --git a/docs/whatsnew.md b/docs/whatsnew.md index 9015b97c..04e5f754 100644 --- a/docs/whatsnew.md +++ b/docs/whatsnew.md @@ -25,7 +25,7 @@ Released on August , 2023 - New [Avatar](form/avatar.md) control - New [Fieldset](form/fieldset.md) control -- New [Toggle](form/toggle.md) and [ToggleGroup] controls +- New [Toggle](form/toggle.md) and [ToggleGroup](form/togglegroup.md) controls #### DataCollection/TreeCollection diff --git a/sidebars.js b/sidebars.js index 0b25c7d2..f0d52801 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2317,7 +2317,8 @@ module.exports = { image: '/img/docusaurus.png' }, items: [ - /**/ + "form/api/togglegroup/togglegroup_getvalue_method", + "form/api/togglegroup/togglegroup_setvalue_method", ], }, {