This is an example of simple customization of the editing panel using the container control.
+You can also use this control to create your own controls.
+
+ `,
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/datepicker.md b/docs/guides/diagram_editor/editbar/basic_controls/datepicker.md
new file mode 100644
index 000000000..2a53190f4
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/datepicker.md
@@ -0,0 +1,147 @@
+---
+sidebar_label: Datepicker!!
+title: Editbar Basic Controls - Datepicker
+description: You can explore the Datepicker control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Datepicker
+
+@short: The basic input control with a calendar attached to it for selecting a date.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "datepicker",
+ key?: string | string[],
+ wrap?: boolean, // false by default
+
+ css?: string,
+ disabled?: boolean, // false by default
+ hidden?: boolean, // false by default
+ height?: string | number | "content", // "content" by default
+ width?: string | number | "content", // "content" by default
+ padding?: string | number,
+
+ date?: Date | string,
+ dateFormat?: string, // "%d/%m/%y" by default
+ disabledDates?: (date: Date) => boolean,
+ icon?: string,
+ mark?: (date: Date) => string,
+ mode?: "calendar" | "month" | "year", // "calendar" by default
+ placeholder?: string,
+ thisMonthOnly?: boolean, // false by default
+ timeFormat?: 24 | 12, // 24 by default
+ timePicker?: boolean, // false by default
+ valueFormat?: "string" | "Date", // "string" by default
+ weekNumbers?: boolean, // false by default
+ weekStart?: "saturday" | "sunday" | "monday", // "sunday" by default
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // "top" by default
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Description
+
+### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"datepicker"*
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `wrap` - (optional) allows displaying the external wrapping. *false* by default
+- `css` - (optional) adds style classes to a control string
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `hidden` - (optional) defines whether a control is hidden. *false* by default
+- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of a Datepicker control
+- `date` - (optional) defines the date that will be opened when the calendar is created
+- `dateFormat` - (optional) defines the format of dates in the calendar. *"%d/%m/%y"* by default. The date format must include delimiters (space or symbol), otherwise an error will be thrown
+- `disabledDates` - (optional) allows disabling some date intervals, day labels are dimmed
+- `icon` - (optional) the CSS class of an icon from the used icon font
+- `mark` - (optional) allows adding a CSS class to specific days
+- `mode` - (optional) specifies the mode of displaying a calendar: *"calendar"* | *"month"* | *"year"*. *"calendar"* by default
+- `placeholder` - (optional) a tip for the input
+- `thisMonthOnly` - (optional) hides dates of the previous/next months relative to the currently displayed one
+- `timeFormat` - (optional) defines the time format of a timepicker, 12-hour or 24-hour: *12* | *24*. *24* by default
+- `timePicker` - (optional) adds a timepicker into a calendar. *false* by default
+- `valueFormat` - (optional) defines the format of the value that will be returned while getting the current value of the control: *"string"* | *"Date"*. *"string"* by default
+- `weekNumbers` - (optional) defines whether to show the numbers of weeks, *false* by default
+- `weekStart` - (optional) sets the starting day of the week: *"saturday"* | *"monday"* | *"sunday"*. *"sunday"* by default
+- `label` - (optional) specifies a label for the control
+- `labelWidth` - (optional) sets the label width of the control
+- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+
+### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-datepicker-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` and `input` events of a form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form control the component is built on
+ - `value` - the new value of the [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Datepicker](https://docs.dhtmlx.com/suite/form/calendar/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+## Example
+
+~~~jsx {7-21}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "datepicker",
+ key: "date_start",
+ label: "Date start",
+ wrap: true,
+ },
+ {
+ type: "datepicker",
+ key: "date_end",
+ label: "Date end",
+ wrap: true,
+ valueFormat: "Date",
+ timePicker: true,
+ weekStart: "monday",
+ },
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date },
+ { "id": "shape_3", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date }
+]);
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/fieldset.md b/docs/guides/diagram_editor/editbar/basic_controls/fieldset.md
new file mode 100644
index 000000000..e70460fe2
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/fieldset.md
@@ -0,0 +1,155 @@
+---
+sidebar_label: Fieldset!!
+title: Editbar Basic Controls - Fieldset
+description: You can explore the Fieldset control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Fieldset
+
+@short: The basic control for creating complex controls with the help of the [`controls`](/api/diagram_editor/editbar/config/controls_property/) or the [`properties`](/api/diagram_editor/editbar/config/properties_property/) Editbar configuration options.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "fieldset",
+
+ compact?: boolean,
+ hidden?: boolean, // false by default
+ disabled?: boolean, // false by default
+
+ css?: string,
+ width?: string | number | "content", // "content" by default
+ height?: string | number | "content", // "content" by default
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "start" by default
+
+ label?: string,
+ labelAlignment?: "left" | "right" | "center", // "left" by default
+
+ rows?: object[],
+ cols?: object[],
+
+ $layout?: function
+}
+~~~
+
+The `rows` and `cols` properties may include an array of objects of the specified controls or the nested structure given below:
+
+~~~jsx
+{
+ css?: string,
+ width?: string | number | "content", // "content" by default
+ height?: string | number | "content", // "content" by default
+ padding?: string | number,
+ align?: "start" | "center" | "end" | "between" | "around" | "evenly", // "start" by default
+ rows?: object[],
+ cols?: object[]
+}
+~~~
+
+## Description
+
+### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"fieldset"*
+- `compact` - (optional) specifies the compact mode, removes indents and frame. *false* by default
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `hidden` - (optional) defines whether a control is hidden. *false* by default
+- `css` - (optional) the name of a CSS class(es) applied to the control group
+- `width` - (optional) sets the width of the control group. *"content"* by default
+- `height` - (optional) sets the height of the control group. *"content"* by default
+- `padding` - (optional) sets the padding for the content inside the control group
+- `align` - (optional) sets the alignment of controls inside the control group. *"start"* by default
+- `label` - (optional) specifies a label for a control
+- `labelAlignment` - (optional) defines the position of the label: *"left"* | *"right"* | *"center"*. *"left"* by default
+- `rows` - (optional) arranges controls inside the control group vertically
+- `cols` - (optional) arranges controls inside the control group horizontally
+
+#### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Fieldset](https://docs.dhtmlx.com/suite/form/fieldset/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+## Example
+
+~~~jsx {7-28} title="Creating a fieldset via the properties property"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" },
+ ],
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ },
+ ],
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {10-33} title="Creating a complex control via the controls property"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ { type: "details" },
+ ],
+ },
+ controls: {
+ details: {
+ type: "fieldset",
+ label: "Task details",
+ rows: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ {
+ align: "between",
+ cols: [
+ { type: "datepicker", key: "date_start", label: "Date start", width: "48%" },
+ { type: "datepicker", key: "date_end", label: "Date end", width: "48%" },
+ ],
+ },
+ {
+ type: "combo",
+ key: "responsible",
+ label: "Responsible",
+ placeholder: "Select responsible",
+ options: ["Henry Bennet", "Mike Frebel", "Greg Mash"]
+ },
+ ],
+ },
+ }
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/input.md b/docs/guides/diagram_editor/editbar/basic_controls/input.md
new file mode 100644
index 000000000..ce9507dac
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/input.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Input!!
+title: Editbar Basic Controls - Input
+description: You can explore the Input control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Input
+
+@short: The basic input field control for typing some text inside.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "input",
+ key?: string | string[],
+ wrap?: boolean, // false by default
+
+ css?: string,
+ disabled?: boolean, // false by default
+ hidden?: boolean, // false by default
+ height?: string | number | "content", // "content" by default
+ width?: string | number | "content", // "content" by default
+ padding?: string | number,
+
+ icon?: string,
+ inputType?: "text" | "password" | "number", // "text" by default
+ max?: number | string,
+ maxlength?: number | string,
+ min?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // false by default
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // "top" by default
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Description
+
+### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"input"*
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `wrap` - (optional) allows displaying the external wrapping. *false* by default
+- `css` - (optional) adds style classes to a control
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `hidden` - (optional) defines whether a control is hidden. *false* by default
+- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of an input control
+- `icon` - (optional) the CSS class of an [icon](https://docs.dhtmlx.com/suite/helpers/icon/) from the used icon font
+- `inputType` - (optional) sets the type of an input: *"text"* | *"password"* | *"number"*. *"text"* by default
+Use the "password" value to specify a field for entering a password
+- `max` - (optional) - the [maximal value allowed in the input](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values). The attribute works only with the input type: *"number"*
+- `maxlength` - (optional) the maximum [number of characters allowed in the input](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters). The attribute works with the following input types: *"text", "password"*
+- `min` - (optional) [the minimal value allowed in the input](https://docs.dhtmlx.com/suite/form/work_with_form/#minimal-and-maximal-values). The attribute works only with the input type: *"number"*
+- `minlength` - (optional) the minimum [number of characters allowed in the input](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters). The attribute works with the following input types: *"text", "password"*
+- `placeholder` - (optional) a tip for the input
+- `readOnly` - (optional) defines whether an input is readonly. *false* by default
+- `label` - (optional) specifies a label for the control
+- `labelWidth` - (optional) sets the label width of the control
+- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+
+### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [Input](https://docs.dhtmlx.com/suite/form/input/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-input-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` and `input` events of the [Input](https://docs.dhtmlx.com/suite/form/input/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Input](https://docs.dhtmlx.com/suite/form/input/) Form control the component is built on
+ - `value` - the new value of the [Input](https://docs.dhtmlx.com/suite/form/input/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [Input](https://docs.dhtmlx.com/suite/form/input/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Input](https://docs.dhtmlx.com/suite/form/input/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Input](https://docs.dhtmlx.com/suite/form/input/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+## Example
+
+~~~jsx {7-22}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "input",
+ inputType: "text",
+ key: "text",
+ label: "Input with a string value",
+ placeholder: "Enter a string value"
+ },
+ {
+ type: "input",
+ inputType: "number",
+ key: "x",
+ label: "Input with a number value",
+ placeholder: "Enter a number value",
+ min: 0,
+ max: 100,
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/radiogroup.md b/docs/guides/diagram_editor/editbar/basic_controls/radiogroup.md
new file mode 100644
index 000000000..097c4e41a
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/radiogroup.md
@@ -0,0 +1,167 @@
+---
+sidebar_label: RadioGroup!!
+title: Editbar Basic Controls - RadioGroup
+description: You can explore the RadioGroup control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# RadioGroup
+
+@short: The basic control for creating groups of Radio buttons.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "radiogroup",
+ options: {
+ rows?: object[],
+ cols?: object[],
+ css?: string,
+ height?: string | number | "content",
+ padding?: string | number,
+ width?: string | number | "content"
+ },
+ key?: string | string[],
+ wrap?: boolean, // false by default
+
+ disabled?: boolean, // false by default
+ hidden?: boolean, // false by default
+
+ css?: string,
+ height?: string | number | "content", // "content" by default
+ width?: string | number | "content", // "content" by default
+ padding?: string | number,
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // "top" by default
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Radio button configuration object inside RadioGroup:
+
+~~~jsx
+{
+ value: string,
+ text?: string,
+
+ disabled?: boolean,
+ hidden?: boolean,
+ css?: string,
+ height?: string | number | "content",
+ width?: string | number | "content",
+ padding?: string | number
+}
+~~~
+
+## Description
+
+### RadioGroup properties
+
+#### Basic properties
+
+- `type` - (required) the type of a control. Set it to "radioGroup"
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `wrap` - (optional) allows displaying the external wrapping. *false* by default
+- `options` - (required) an object with options of a RadioGroup. The object can contain the following attributes:
+ - `rows` - (optional) arranges [radio buttons](#radio-button-properties) inside the RadioGroup control vertically
+ - `cols` - (optional) arranges [radio buttons](#radio-button-properties) inside the RadioGroup control horizontally
+ - `css` - (optional) adds style classes to a RadioGroup
+ - `height` - (optional) the height of a RadioGroup
+ - `padding` - (optional) sets padding between a cell and a border of a RadioGroup
+ - `width` - (optional) the width of a RadioGroup
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `hidden` - (boolean) defines whether a RadioGroup is hidden. *false* by default
+- `css` - (optional) adds style classes to a control
+- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of a RadioGroup control
+- `label` - (optional) specifies a label for the control
+- `labelWidth` - (optional) sets the label width of the control
+- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+
+#### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-radiogroup-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` event of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control the component is built on
+ - `value` - the new value of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+### Radio button properties
+
+- `value` - (required) the value of a radio button
+- `text` - (optional) the text label of a radio button
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `hidden` - (optional) defines whether a radio button is hidden. *false* by default
+- `css` - (optional) adds style classes to a control
+- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of a radio button control
+
+## Example
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "radioGroup",
+ key: "textAlign",
+ label: "Text align",
+ wrap: true,
+ options: {
+ rows: [
+ {
+ text: "Left",
+ value: "left",
+ },
+ {
+ text: "Center",
+ value: "center",
+ },
+ {
+ text: "Right",
+ value: "right",
+ },
+ ]
+ },
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/select.md b/docs/guides/diagram_editor/editbar/basic_controls/select.md
new file mode 100644
index 000000000..047d2508a
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/select.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Select!!
+title: Editbar Basic Controls - Select
+description: You can explore the Select control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Select
+
+@short: The basic control that represents an advanced select box with a set of options to choose from.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "select",
+ options: (object | string)[],
+ key?: string | string[],
+ wrap?: boolean, // false by default
+
+ css?: string,
+ disabled?: boolean, // false by default
+ hidden?: boolean, // false by default
+ height?: string | number | "content", // "content" by default
+ width?: string | number | "content", // "content" by default
+ padding?: string | number,
+ icon?: string,
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // "top" by default
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Option configuration object inside Select:
+
+~~~jsx
+{
+ value: string | number,
+ content: string,
+ disabled?: boolean
+}
+~~~
+
+## Description
+
+### Select properties
+
+#### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"select"*
+- `options` - (required) an array of Select options, each option can be set as a *string* or as an *object* with a set of `key:value` pairs - [attributes of options and their values](#option-properties)
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `wrap` - (optional) allows displaying the external wrapping. *false* by default
+- `css` - (optional) adds style classes to a control
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `hidden` - (boolean) defines whether a Select is hidden. *false* by default
+- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of a Select control
+- `icon` - (optional) the CSS class of an [icon](https://docs.dhtmlx.com/suite/helpers/icon/) from the used icon font
+- `label` - (optional) specifies a label for the control
+- `labelWidth` - (optional) sets the label width of the control
+- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+
+#### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [Select](https://docs.dhtmlx.com/suite/form/select/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-select-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` event of the [Select](https://docs.dhtmlx.com/suite/form/select/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Select](https://docs.dhtmlx.com/suite/form/select/) Form control the component is built on
+ - `value` - the new value of the [Select](https://docs.dhtmlx.com/suite/form/select/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [Select](https://docs.dhtmlx.com/suite/form/select/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Select](https://docs.dhtmlx.com/suite/form/select/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Select](https://docs.dhtmlx.com/suite/form/select/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+### Option properties
+
+- `value` - (required) sets the value for the select option
+- `content` - (required) the content displayed in the select option
+- `disabled` - (optional) defines whether the option is enabled (*false*) or disabled (*true*). *false* by default
+
+## Example
+
+~~~jsx {7-20}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "select",
+ label: "Position",
+ key: "position",
+ wrap: true,
+ options: [
+ "",
+ "Technical Director",
+ "Manager",
+ "QA Lead",
+ { value: 4, content: "Team Lead", disabled: true },
+ { value: 5, content: "Programmer" }
+ ],
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/slider.md b/docs/guides/diagram_editor/editbar/basic_controls/slider.md
new file mode 100644
index 000000000..607f582fc
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/slider.md
@@ -0,0 +1,136 @@
+---
+sidebar_label: Slider!!
+title: Editbar Basic Controls - Slider
+description: You can explore the Slider control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Slider
+
+@short: The basic control for selecting a numeric value by moving a thumb along a line with a fixed set of options.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "slider",
+ key?: string | string[],
+ wrap?: boolean, // false by default
+
+ disabled?: boolean, // false by default
+ hidden?: boolean, // false by default
+ css?: string,
+ padding?: string | number,
+ height?: string | number | "content", // "content" by default
+ width?: string | number | "content", // "content" by default
+
+ inverse?: boolean, // false by default
+ majorTick?: number,
+ max?: number, // 100 by default
+ min?: number, // 0 by default
+ mode?: "vertical" | "horizontal", // "horizontal" by default
+ range?: boolean, // false by default
+ step?: number, // 1 by default
+ tick?: number,
+ tickTemplate?: (position: number) => string,
+ tooltip?: boolean, // true by default
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // "top" by default
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Description
+
+### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"slider"*
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `wrap` - (optional) allows displaying the external wrapping. *false* by default
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `hidden` - (optional) defines whether a control is hidden. *false* by default
+- `css` - (optional) adds style classes to a control
+- `height` - (optional) the height of a control. *"content"* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of a slider control
+- `inverse` - (optional) enables/disables the inverse slider mode. *false* by default
+- `majorTick` - (optional) sets interval of rendering numeric values on the slider scale
+- `max` - (optional) the maximal value of slider. *100* by default
+- `min` - (optional) the minimal value of slider. *0* by default
+- `mode` - (optional) the direction of the slider scale. *"horizontal"* by default
+- `range` - (optional) enables/disables the possibility to select a range of values on the slider. *false* by default
+- `step` - (optional) the step the slider thumb will be moved with. *1* by default
+- `tick` - (optional) sets the interval of steps for rendering the slider scale
+- `tickTemplate` - (optional) sets a template for rendering values on the scale
+- `tooltip` - (optional) enables prompt messages with ticks values on hovering over the slider thumb. *true* by default
+
+### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-slider-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` event of the [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form control the component is built on
+ - `value` - the new value of the [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Slider](https://docs.dhtmlx.com/suite/form/slider/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+## Example
+
+~~~jsx {7-18}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $lineTitle: [
+ {
+ type: "slider",
+ key: "distance",
+ label: "Distance",
+ wrap: true,
+ min: 0,
+ max: 100,
+ step: 1,
+ tick: 5,
+ majorTick: 10,
+ tickTemplate: value => value,
+ },
+ ]
+ }
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1", "type": "rectangle", "text": "shape" },
+ { "id": "shape_2","type": "rectangle", "text": "shape", "x": 400 },
+ { "id": "line", "type": "line", "from": "shape_1", "to": "shape_2" },
+ { "type": "lineTitle", "parent": "line", "text": "Title", "distance": 50 }
+]);
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/spacer.md b/docs/guides/diagram_editor/editbar/basic_controls/spacer.md
new file mode 100644
index 000000000..27ad730b9
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/spacer.md
@@ -0,0 +1,43 @@
+---
+sidebar_label: Spacer!!
+title: Editbar Basic Controls - Spacer
+description: You can explore the Spacer control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Spacer
+
+@short: The basic control for arranging and aligning controls on the Editbar by taking some space.
+
+## Usage
+
+~~~jsx
+{
+ type: "spacer"
+}
+~~~
+
+## Description
+
+- `type` - (required) the type of a control. Set it to *"spacer"*
+
+## Example
+
+~~~jsx {10,12}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ { type: "input", key: "name", label: "Task name" },
+ { type: "input", key: "id", label: "ID", readOnly: true },
+ { type: "spacer" },
+ { type: "button", text: "Send", full: true },
+ { type: "spacer" }
+ ],
+ },
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/textarea.md b/docs/guides/diagram_editor/editbar/basic_controls/textarea.md
new file mode 100644
index 000000000..af6eab277
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/textarea.md
@@ -0,0 +1,116 @@
+---
+sidebar_label: Textarea!!
+title: Editbar Basic Controls - Textarea
+description: You can explore the Textarea control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Textarea
+
+@short: The basic control for entering a simple multi-line text.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "textarea",
+ key?: string | string[],
+ wrap?: boolean, // false by default
+
+ css?: string,
+ disabled?: boolean, // false by default
+ hidden?: boolean, // false by default
+ height?: string | number | "content", // "content" by default
+ width?: string | number | "content", // "content" by default
+ padding?: string | number,
+
+ maxlength?: number | string,
+ minlength?: number | string,
+ placeholder?: string,
+ readOnly?: boolean, // false by default
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // "top" by default
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Description
+
+### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"textarea"*
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `wrap` - (optional) allows displaying the external wrapping. *false* by default
+- `css` - (optional) adds style classes to a control
+- `hidden` - (optional) defines whether a control is hidden. *false* by default
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of the Textarea control
+- `maxlength` - (optional) the maximum [number of characters allowed in the textarea](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
+- `minlength` - (optional) the minimum [number of characters allowed in the textarea](https://docs.dhtmlx.com/suite/form/work_with_form/#number-of-allowed-characters)
+- `placeholder` - (optional) a tip for the textarea
+- `readOnly` - (optional) defines whether a textarea is readonly. *false* by default
+- `label` - (optional) specifies a label for the control
+- `labelWidth` - (optional) sets the label width of the control
+- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+
+### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-textarea-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` and `input` events of the [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form control the component is built on
+ - `value` - the new value of the [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Textarea](https://docs.dhtmlx.com/suite/form/textarea/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+## Example
+
+~~~jsx {7-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "textarea",
+ key: "text",
+ label: "Textarea label",
+ height: 250,
+ wrap: true
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/timepicker.md b/docs/guides/diagram_editor/editbar/basic_controls/timepicker.md
new file mode 100644
index 000000000..d19b7177f
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/timepicker.md
@@ -0,0 +1,123 @@
+---
+sidebar_label: Timepicker!!
+title: Editbar Basic Controls - Timepicker
+description: You can explore the Timepicker control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Timepicker
+
+@short: The basic control for selecting a time value either by moving handles along track bars or by entering hour and minutes values directly into related inputs.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "timepicker",
+ key?: string | string[],
+ wrap?: boolean, // false by default
+
+ css?: string,
+ disabled?: boolean, // false by default
+ hidden?: boolean, // false by default
+ height?: string | number | "content", // "content" by default
+ width?: string | number | "content", // "content" by default
+ padding?: string | number,
+
+ controls?: boolean, // false by default
+ icon?: string,
+ placeholder?: string,
+ timeFormat?: 12 | 24, // 24 by default
+ valueFormat?: "string" | "timeObject", // "string" by default
+
+ // for `wrap:true` check the label properties for the Fieldset
+ label?: string,
+ labelWidth?: string | number,
+ labelPosition?: "left" | "top", // "top" by default
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+## Description
+
+### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"timepicker"*
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `wrap` - (optional) allows displaying the external wrapping. *false* by default
+- `css` - (optional) adds style classes to a control
+- `hidden` - (optional) defines whether a control is hidden. *false* by default
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of the Timepicker control
+- `controls` - (optional) defines whether a timepicker is equipped with the Close and Save buttons. *false* by default
+- `icon` - (optional) the CSS class of an icon from the used icon font
+- `placeholder` - (optional) a tip for the input
+- `timeFormat` - (optional) defines what clock format is activated: the 12-hour or 24-hour one. Set the property to *12* or *24*, correspondingly. *24* by default
+- `valueFormat` - (optional) defines the format of the value to be applied when working with the events of the timepicker control: *"string"* | *"timeObject"*. *"string"* by default
+- `label` - (optional) specifies a label for the control
+- `labelWidth` - (optional) sets the label width of the control
+- `labelPosition` - (optional) defines the position of a label: *"left"* | *"top"*. *"top"* by default
+
+### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-timepicker-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` and `input` events of the [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form control the component is built on
+ - `value` - the new value of the [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Timepicker](https://docs.dhtmlx.com/suite/form/timepicker/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+## Example
+
+~~~jsx {8-13}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "org",
+ view: {
+ editbar: {
+ show: true,
+ properties: {
+ $shape: [
+ {
+ type: "timepicker",
+ key: "time",
+ label: "Select time",
+ controls: true,
+ },
+ ],
+ },
+ }
+ }
+});
+editor.parse([
+ { "id": "shape_1" },
+ { "id": "shape_2", "parent": "shape_1", "time": "14:00" },
+ { "id": "shape_3", "parent": "shape_1", "time": "18:30" }
+]);
+~~~
\ No newline at end of file
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/toggle.md b/docs/guides/diagram_editor/editbar/basic_controls/toggle.md
new file mode 100644
index 000000000..48c0850d0
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/toggle.md
@@ -0,0 +1,134 @@
+---
+sidebar_label: Toggle!!
+title: Editbar Basic Controls - Toggle
+description: You can explore the Toggle control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# Toggle
+
+@short: The basic control that represents a special button which can change its state from the pressed to the unpressed one when clicked.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "toggle",
+ key?: string | string[],
+
+ hidden?: boolean, // false by default
+ disabled?: boolean, // false by default
+ full?: boolean, // false by default
+
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number,
+
+ css?: string,
+ width?: string | number | "content", // "content" by default
+ height?: string | number | "content", // "content" by default
+ padding?: string | number,
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+The control can be used both with the *boolean* value and the *string* one, if the `value` property is specified. The `value` property is needed for assigning the set value as a value of the applied property. [Check the example below](#example) to get the idea.
+
+## Description
+
+### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"toggle"*
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `hidden` - (optional) defines whether a control is hidden. *false* by default
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `full` - (optional) defines whether the toggle will be extended to the width specified by the `width` property. *false* by default
+- `text` - (optional) sets a text inside the toggle. When initialized together with the `offText` property, the specified text will be rendered in the selected (pressed) state
+- `offText` - (optional) sets the text that will be rendered in the unselected (unpressed) state of the toggle
+- `icon` - (optional) sets the CSS class of an icon displayed inside the toggle. When initialized together with the `offIcon` property, the specified CSS classes of icons will be rendered in the selected (pressed) state of the toggle
+- `offIcon` - (optional) sets the CSS class of an icon that will be rendered in the unselected (unpressed) state of the toggle
+- `value` - (optional) specifies the value in the selected (pressed) state. If not defined, the control is used with the *boolean* value
+- `css` - (optional) adds style classes to a control
+- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of the Toggle control
+
+### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-toggle-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` event of the [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form control the component is built on
+ - `value` - the new value of the [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [Toggle](https://docs.dhtmlx.com/suite/form/toggle/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+## Example
+
+~~~jsx {7-14} title="Applying the boolean value for a toggle"
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $group: [
+ {
+ type: "toggle",
+ key: ["header", "enable"],
+ icon: "dxi dxi-eye",
+ offIcon: "dxi dxi-eye-off",
+ text: "Visible",
+ offText: "Invisible",
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
+
+~~~jsx {7-12} title="Assigning the set value as a value of the applied property"
+const editor= new dhx.DiagramEditor("editor", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggle",
+ key: "fontStyle",
+ value: "italic",
+ icon: "dxi dxi-format-italic"
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
diff --git a/docs/guides/diagram_editor/editbar/basic_controls/togglegroup.md b/docs/guides/diagram_editor/editbar/basic_controls/togglegroup.md
new file mode 100644
index 000000000..677800548
--- /dev/null
+++ b/docs/guides/diagram_editor/editbar/basic_controls/togglegroup.md
@@ -0,0 +1,151 @@
+---
+sidebar_label: ToggleGroup!!
+title: Editbar Basic Controls - ToggleGroup
+description: You can explore the ToggleGroup control of Editbar in the documentation of the the DHTMLX JavaScript Diagram 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.
+---
+
+# ToggleGroup
+
+@short: The basic control for creating groups of toggle buttons.
+
+
+
+## Usage
+
+~~~jsx
+{
+ type: "toggleGroup",
+ options: object[],
+ key?: string | string[],
+
+ full?: boolean, // false by default
+ gap?: number, // 0 by default
+ hidden?: boolean, // false by default
+ disabled?: boolean, // false by default
+
+ css?: string,
+ width?: string | number | "content", // "content" by default
+ height?: string | number | "content", // "content" by default
+ padding?: string | number,
+
+ // service properties and methods
+ $on?: { [eventName: string]: function },
+ $handler?: function,
+ $setValue?: function,
+ $layout?: function
+}
+~~~
+
+Toggle configuration object inside ToggleGroup:
+
+~~~jsx
+{
+ id?: string,
+ hidden?: boolean,
+ disabled?: boolean,
+ full?: boolean,
+ text?: string,
+ icon?: string,
+ offText?: string,
+ offIcon?: string,
+ value?: string | number
+}
+~~~
+
+The objects with the `toggle` configuration inside the control can be used both with the *boolean* value and the *string* one, if the `value` property is specified. The `value` property is needed for assigning the set value as a value of the applied property. [Check the example below](#example) to get the idea.
+
+## Description
+
+### ToggleGroup properties
+
+#### Basic properties
+
+- `type` - (required) the type of a control. Set it to *"toggleGroup"*
+- `key` - (optional) the name of the specified/modified property or the path to it in the object of a Diagram item
+- `options` - (required) an array of ToggleGroup options, each option is set as an *object* with a set of `key:value` pairs - [attributes of options and their values](#toggle-properties)
+- `hidden` - (optional) defines whether a ToggleGroup is hidden. *false* by default
+- `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default
+- `full` - (optional) defines whether the ToggleGroup will be extended to the width specified by the `width` property. *false* by default
+- `gap` - (optional) sets an offset between the elements (buttons) of an option. *0* by default
+- `css` - (optional) adds style classes to a control
+- `width` - (optional) the width of a control. *"content"* by default
+- `height` - (optional) the height of a control. *"content"* by default
+- `padding` - (optional) sets padding between a cell and a border of the ToggleGroup control
+
+#### Service properties and methods
+
+:::warning
+Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality.
+:::
+
+- `$on` - (optional) - allows setting an event listener. The object has the following properties:
+ - `eventName` - a callback function which is called with the following parameters:
+ - `object` - an object with the following properties:
+ - `control` - the [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form control
+ - `editor` - the object of the Diagram Editor
+ - `id` - the id of a Diagram item
+ - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-togglegroup-events/)
+- `$handler` - (optional) - a callback function that allows handling actions on firing the `change` event of the [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form control and the `change` event of DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `id` - the id of a Diagram item
+ - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form control the component is built on
+ - `value` - the new value of the [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form control
+- `$setValue` - (optional) - a callback function that allows setting the value of the [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter:
+ - `object` - an object with the following properties:
+ - `editor` - the object of the Diagram Editor
+ - `control` - the object of the [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form control the component is built on
+ - `value` - the value of a Diagram item
+- `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [ToggleGroup](https://docs.dhtmlx.com/suite/form/togglegroup/) Form control. Called with the following parameter:
+ - `object` - the configuration of a control without service properties
+
+### Toggle properties
+
+- `id` - (optional) the id of a control, auto-generated if not set
+- `hidden` - (optional) defines whether an option is hidden. *false* by default
+- `disabled` - (optional) defines whether an option is enabled (*false*) or disabled (*true*). *false* by default
+- `full` - (optional) defines whether the option will be extended to the width specified by the `width` property. *false* by default
+- `text` - (optional) sets a text inside the option. When initialized together with the `offText` property, the specified text will be rendered in the selected (pressed) state
+- `icon` - (optional) sets the CSS class of an icon displayed inside the option. When initialized together with the `offIcon` property, the specified CSS classes of icons will be rendered in the selected (pressed) state of the option
+- `offText` - (optional) sets the text that will be rendered in the unselected (unpressed) state of the option
+- `offIcon` - (optional) sets the CSS class of an icon that will be rendered in the unselected (unpressed) state of the option
+- `value` - (optional) specifies the value in the selected (pressed) state. If not defined, the option is used with the *boolean* value
+
+## Example
+
+~~~jsx {7-28}
+const editor = new dhx.DiagramEditor("editor_container", {
+ type: "default",
+ view: {
+ editbar: {
+ properties: {
+ $shape: [
+ {
+ type: "toggleGroup",
+ key: "textAlign",
+ gap: 4,
+ $on: {
+ beforeChange: (spec, values) => !Object.values(values).every(i => !i),
+ },
+ options: [
+ {
+ icon: "dxi dxi-format-align-left",
+ value: "left",
+ },
+ {
+ icon: "dxi dxi-format-align-center",
+ value: "center",
+ },
+ {
+ icon: "dxi dxi-format-align-right",
+ value: "right",
+ },
+ ],
+ },
+ ]
+ }
+ }
+ }
+});
+~~~
\ No newline at end of file
diff --git a/sidebars.js b/sidebars.js
index 18d7b9724..fd6296072 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -850,10 +850,38 @@ module.exports = {
id: "guides/diagram_editor/editbar/overview",
},
items: [
- "guides/diagram_editor/editbar/basic_controls",
+ {
+ type: "category",
+ label: "Basic controls!!",
+ link: {
+ type: "doc",
+ id: "guides/diagram_editor/editbar/basic_controls"
+ },
+ items:[
+ "guides/diagram_editor/editbar/basic_controls/avatar",
+ "guides/diagram_editor/editbar/basic_controls/button",
+ "guides/diagram_editor/editbar/basic_controls/checkbox",
+ "guides/diagram_editor/editbar/basic_controls/checkboxgroup",
+ "guides/diagram_editor/editbar/basic_controls/colorpicker",
+ "guides/diagram_editor/editbar/basic_controls/combo",
+ "guides/diagram_editor/editbar/basic_controls/container",
+ "guides/diagram_editor/editbar/basic_controls/datepicker",
+ "guides/diagram_editor/editbar/basic_controls/fieldset",
+ "guides/diagram_editor/editbar/basic_controls/input",
+ "guides/diagram_editor/editbar/basic_controls/radiogroup",
+ "guides/diagram_editor/editbar/basic_controls/select",
+ "guides/diagram_editor/editbar/basic_controls/slider",
+ "guides/diagram_editor/editbar/basic_controls/spacer",
+ "guides/diagram_editor/editbar/basic_controls/textarea",
+ "guides/diagram_editor/editbar/basic_controls/timepicker",
+ "guides/diagram_editor/editbar/basic_controls/toggle",
+ "guides/diagram_editor/editbar/basic_controls/togglegroup"
+
+ ]
+ },
"guides/diagram_editor/editbar/complex_controls",
"guides/diagram_editor/editbar/configuration",
- ],
+ ],
},
"guides/diagram_editor/hot_keys" // New
]