Merge branch 'v8.3' into next

DHTMLX · Oct 13, 2023 · f74d02d · f74d02d
2 parents 7169365 + 621b5f5
commit f74d02d
Show file tree

Hide file tree

Showing 41 changed files with 798 additions and 102 deletions.
diff --git a/docs/assets/colorpicker/colorpicker_front.png b/docs/assets/colorpicker/colorpicker_front.png
diff --git a/docs/assets/colorpicker/colorpicker_transparency.png b/docs/assets/colorpicker/colorpicker_transparency.png
diff --git a/docs/colorpicker/api/api_overview.md b/docs/colorpicker/api/api_overview.md
@@ -42,4 +42,5 @@ description: You can explore the API of Colorpicker in the documentation of the
 | [](colorpicker/api/colorpicker_palette_config.md)      | @getshort(colorpicker/api/colorpicker_palette_config.md)      |
 | [](colorpicker/api/colorpicker_paletteonly_config.md)  | @getshort(colorpicker/api/colorpicker_paletteonly_config.md)  |
 | [](colorpicker/api/colorpicker_pickeronly_config.md)   | @getshort(colorpicker/api/colorpicker_pickeronly_config.md)   |
+| [](colorpicker/api/colorpicker_transparency_config.md) | @getshort(colorpicker/api/colorpicker_transparency_config.md) |
 | [](colorpicker/api/colorpicker_width_config.md)        | @getshort(colorpicker/api/colorpicker_width_config.md)        |
diff --git a/docs/colorpicker/api/colorpicker_transparency_config.md b/docs/colorpicker/api/colorpicker_transparency_config.md
@@ -0,0 +1,24 @@
+---
+sidebar_label: transparency
+title: JavaScript Colorpicker - transparency Config 
+description: You can explore the transparency config of Colorpicker 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.
+---
+
+# transparency
+
+@short: Optional. Defines whether the transparency scale is displayed in the picker mode
+
+@signature: {'transparency?: boolean;'}
+
+@default: true
+
+@example:
+const colorpicker = new dhx.Colorpicker("colorpicker_container",{
+	transparency: false
+});
+
+@descr: 
+
+**Related sample**: [Colorpicker. Disable color transparency](https://snippet.dhtmlx.com/ewgu0aps)
+
+
diff --git a/docs/colorpicker/configuration.md b/docs/colorpicker/configuration.md
@@ -119,3 +119,18 @@ const colorpicker = new dhx.Colorpicker("colorpicker_container", {
     width: "300px"              
 });
 ~~~
+
+## Color transparency
+
+The Colorpicker component provides the possibility to set the necessary color transparency in the "picker" mode by pulling the handle on the transparency scale. This feature is enabled by default. To switch it off, set the [transparency](colorpicker/api/colorpicker_transparency_config.md) configuration option to *false*:
+
+~~~js
+const colorpicker = new dhx.Colorpicker("colorpicker", {
+    mode: "picker",
+    transparency: false
+});
+~~~
+
+![](../assets/colorpicker/colorpicker_transparency.png)
+
+**Related sample**: [Colorpicker. Disable color transparency](https://snippet.dhtmlx.com/ewgu0aps)
diff --git a/docs/dataview/configuration.md b/docs/dataview/configuration.md
@@ -257,12 +257,12 @@ const dataview = new dhx.DataView("dataview_container", {
 	eventHandlers: {
 		onclick: {
 			item_wrap: function(event, id) {
-				display("You clicked on " + event.target.tagName);
+				console.log("You clicked on " + event.target.tagName);
 			},
 		},
 		onmouseover: {
 			item_wrap: function(event, id) {
-				display(dataview.data.getItem(id).short);
+				console.log(dataview.data.getItem(id).short);
 			},
 		}
 	}

diff --git a/docs/form/api/container/api_container_properties.md b/docs/form/api/container/api_container_properties.md
@@ -21,6 +21,12 @@ description: You can explore the Properties of the Container control of Form in
     hidden?: boolean, // false by default
     padding?: string | number, // "8px" by default
     width?: string | number | "content", // "content" by default
+
+    label?: string,
+    labelWidth?: string | number,
+    labelPosition?: "left" | "top", // "top" by default
+    hiddenLabel?: boolean, // false by default
+    helpMessage?: string
 }
 ~~~
 
@@ -36,9 +42,15 @@ description: You can explore the Properties of the Container control of Form in
 - `hidden` - (optional) defines whether a control is hidden, *false* by default
 - `padding` - (optional) sets padding between a cell and a border of a control, *"8px"* by default
 - `width` - (optional) the width of a control, *"content"* by default
+- `label` - (optional) specifies a label for a control
+- `labelWidth` - (optional) sets the width of the label of a control
+- `labelPosition`- (optional) defines the position of a label: "left" | "top", *"top"* by default
+- `hiddenLabel` - (optional) makes the label invisible, <i>false</i> by default
+- `helpMessage`- (optional) adds a help message to a control
+
 
 ### Example
 
-<iframe src="https://snippet.dhtmlx.com/cnxi9eqq?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>
+<iframe src="https://snippet.dhtmlx.com/bm1l4od5?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>
 
 **Related article:** [Container](form/container.md)
diff --git a/docs/form/api/container/container_getproperties_method.md b/docs/form/api/container/container_getproperties_method.md
@@ -13,7 +13,8 @@ description: You can explore the getProperties method of the Container control o
 @returns:
 An object with the available properties of the control and their values.
 
-@example: const form = new dhx.Form("form_container", {
+@example: 
+const form = new dhx.Form("form_container", {
     css: "dhx_widget--bordered",
     padding: "40px",
     rows: [
@@ -34,8 +35,14 @@ The returned object of the Container control looks like:
 
 ~~~js
 {
-    height: "400px",
-    padding: "12px 0px",
+    css: undefined,
+    height: "content",
+    helpMessage: "",
+    hiddenLabel: false,
+    label: "",
+    labelPosition: "top",
+    labelWidth: "",
+    padding: "20px",
     width: "content"
 }
 ~~~

diff --git a/docs/form/api/container/container_setproperties_method.md b/docs/form/api/container/container_setproperties_method.md
@@ -29,9 +29,15 @@ It is possible to change values of the following properties of the **Container**
 
 ~~~js
 {
-	height: string | number | "content", 
-	padding: string | number,
-	width: string, number, "content"
+	css: string,
+    width: string | number | "content",
+    height: string | number | "content",
+    padding: string | number,
+    label: string,
+    labelWidth: string | number,
+    labelPosition: "left" | "top",
+    hiddenLabel: boolean,
+    helpMessage: string
 }
 ~~~
 

diff --git a/docs/form/api/form_validate_method.md b/docs/form/api/form_validate_method.md
@@ -25,7 +25,7 @@ const result = form.validate(true); // -> true/false
 
 Starting with v7.0, the method validates only [the required fields or the fields that contain validation rules](form/work_with_form.md#validatingform).
 
-Calling without the **silent** parameter, the method invokes the [BeforeValidate](form/api/form_beforevalidate_event.md) and [AfterValidate](form/api/form_aftervalidate_event.md) events and modifies the form visually.
+When called without the **silent** parameter, the method invokes the [BeforeValidate](form/api/form_beforevalidate_event.md) and [AfterValidate](form/api/form_aftervalidate_event.md) events and modifies the form visually.
 
 ~~~js
 const result = form.validate(); // -> true/false

diff --git a/docs/form/api/input/input_validate_method.md b/docs/form/api/input/input_validate_method.md
@@ -26,7 +26,7 @@ form.getItem("input").validate(true); // -> true/false
 
 @descr:
 
-When calling without parameters or setting the **silent** parameter to *false*, the method invokes the [BeforeValidate](form/api/input/input_beforevalidate_event.md) and [AfterValidate](form/api/input/input_aftervalidate_event.md) events and visually modifies the control.
+When called without parameters, or in case the **silent** parameter is set to *false*, the method invokes the [BeforeValidate](form/api/input/input_beforevalidate_event.md) and [AfterValidate](form/api/input/input_aftervalidate_event.md) events and visually modifies the control.
 
 ~~~js
 // the method validates the specified value

diff --git a/docs/grid/api/api_gridcolumn_properties.md b/docs/grid/api/api_gridcolumn_properties.md
@@ -38,6 +38,7 @@ columns:[
             customFilter?: (item: any, input: string) => boolean,
             headerSort?: boolean,
             sortAs?: (cellValue: any) => string | number,
+            htmlEnable?: boolean,
         }
     ],
     footer?: [
@@ -50,6 +51,7 @@ columns:[
             rowspan?: number,
             css?: string,
             content?: "avg" | "sum" | "max" | "min" | "count",
+            htmlEnable?: boolean,
         },
     ],
     type?: "string" | "number" | "boolean" | "date" | "percent",
@@ -135,6 +137,7 @@ columns:[
             </li>
             <li><b>headerSort</b> - (optional) enables/disables sorting by clicking the header</li>
             <li><b>sortAs</b> - (optional) a function that defines the type to sort data as (e.g. string, number, date, etc.)</li>
+            <li><b>htmlEnable</b> - (optional) if set to <i>true</i>, specifies the HTML content (inner HTML) of a header. If set to <i>false</i>, the content of the header cells will be displayed as a <i>string</i> value</li>
             </ul>
             <br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/eol76o68" target="_blank">Grid. Grouped headers (spans)</a>
             </td>
@@ -152,6 +155,7 @@ columns:[
             <li><b>css</b> - (optional) styling to be applied to a footer</li>
             <li><a href="../../configuration#headerfooter-filters"><b>content</b></a> - (optional) additional content of a footer, which can be one of the methods that process values in a column and show result in the footer: "avg" | "sum" | "max" | "min" | "count"
             </li>
+             <li><b>htmlEnable</b> - (optional) if set to <i>true</i>, specifies the HTML content (inner HTML) of a footer. If set to <i>false</i>, the content of the footer cells will be displayed as a <i>string</i> value</li>
             </ul>
             <br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/9jl55ep7" target="_blank">Grid. Grid with footer</a>
             </td>

diff --git a/docs/grid/api/api_overview.md b/docs/grid/api/api_overview.md
@@ -174,8 +174,10 @@ description: You can explore the API of Grid in the documentation of the DHTMLX
 | [](grid/api/grid_editable_config.md)        | @getshort(grid/api/grid_editable_config.md)        |
 | [](grid/api/grid_eventhandlers_config.md)   | @getshort(grid/api/grid_eventhandlers_config.md)   |
 | [](grid/api/grid_exportstyles_config.md)    | @getshort(grid/api/grid_exportstyles_config.md)    |
+| [](grid/api/grid_footerautoheight_config.md)| @getshort(grid/api/grid_footerautoheight_config.md)|
 | [](grid/api/grid_footerrowheight_config.md) | @getshort(grid/api/grid_footerrowheight_config.md) |
 | [](grid/api/grid_footertooltip_config.md)   | @getshort(grid/api/grid_footertooltip_config.md)   |
+| [](grid/api/grid_headerautoheight_config.md)| @getshort(grid/api/grid_headerautoheight_config.md)|
 | [](grid/api/grid_headerrowheight_config.md) | @getshort(grid/api/grid_headerrowheight_config.md) |
 | [](grid/api/grid_headertooltip_config.md)   | @getshort(grid/api/grid_headertooltip_config.md)   |
 | [](grid/api/grid_height_config.md)          | @getshort(grid/api/grid_height_config.md)          |

diff --git a/docs/grid/api/grid_autoheight_config.md b/docs/grid/api/grid_autoheight_config.md
@@ -8,7 +8,7 @@ description: You can explore the autoHeight config of Grid in the documentation
 
 {{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
 
-@short: Optional. Makes long text to split into multiple lines based on the width of the column
+@short: Optional. Makes long text split into multiple lines based on the width of the column, controls the automatic height adjustment for the header/footer
 
 @signature: autoHeight?: boolean;
 
@@ -27,7 +27,32 @@ const grid = new dhx.Grid("grid_container", {
 
 **Related sample**: [Grid. Rows auto height](https://snippet.dhtmlx.com/zkcsyazg)
 
-Note, that the **autoHeight** option does not adjust the height of the cells in the header/footer of Grid. The option just makes their text to split into multiple lines, but the height of the cells will remain the same. To set the height of the rows in the header/footer, you should apply the [](grid/api/grid_headerrowheight_config.md) and [](grid/api/grid_footerrowheight_config.md) configuration options of Grid.  
+Note that the **autoHeight** option does not adjust the height of the cells in the header/footer of Grid. The option just makes their text split into multiple lines, but the height of the cells will remain the same.
+
+To set the height of the rows in the header/footer, you should apply the [](grid/api/grid_headerrowheight_config.md) and [](grid/api/grid_footerrowheight_config.md) configuration options of Grid. 
+
+To enable autoheight in the header/footer, use the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footerautoheight_config.md) configuration options of Grid. These properties redefine the **autoHeight** config for the header and the footer, correspondingly:
+
+~~~js
+const grid = new dhx.Grid("grid", {
+    columns: [
+        // columns config
+    ],
+    data: dataset,
+    autoHeight: true, // enable autoHeight in data (content)
+    headerAutoHeight: false, // disable autoHeight in header
+    footerAutoHeight: false, // disable autoHeigh in footer
+});
+
+const grid = new dhx.Grid("grid", {
+    columns: [
+        // columns config
+    ],
+    data: dataset,
+    autoHeight: false, // disable autoHeight in data, header, footer
+    headerAutoHeight: true, // enable autoHeight in header
+});
+~~~
 
 **Note** that:  
 

diff --git a/docs/grid/api/grid_eventhandlers_config.md b/docs/grid/api/grid_eventhandlers_config.md
@@ -6,7 +6,7 @@ description: You can explore the eventHandlers config of Grid in the documentati
 
 # eventHandlers
 
-@short: Optional. Adds event handlers to the HTML elements of a custom template of a Grid cell or to the HTML elements defined in the data set of Grid
+@short: Optional. Adds event handlers to the HTML elements of a custom template in a cell, or to the HTML elements defined in the data set, or to the header/footer cell
 
 @signature: {'eventHandlers?: {[eventName: string]: {[className: string]: (events: Event, item: object) => void; };};'}
 
@@ -21,47 +21,59 @@ The **eventHandlers** object includes a set of *key:value* pairs, where:
 		</tr>
         <tr>
 			<td><i>value</i></td>
-			<td>an object that contains a <i>key:value</i> pair, where <i>key</i> is the css class name that the handler will be applied to and <i>value</i> is a function that takes two parameters:
-            <ul>
-                <li><b>event</b> - an event object</li>
-                <li><b>item</b> - an object with two attributes:
-                <ol>- <b>row</b> - an object with a row configuration</ol>
-                <ol>- <b>column</b> - an object with a column configuration</ol></li>
-            </ul></td>
+			<td>an object that contains a <i>key:value</i> pair, where:
+				<ol>
+					<li><i>key</i> is the CSS class name that the handler will be applied to</li>
+					<li><i>value</i> is a function that takes two parameters:
+				     	<ul>
+				            <li><b>event</b> - an event object</li>
+				            <li><b>item</b> - an object with two attributes:
+				            	<ol>- <b>row</b> - an object with a row configuration</ol>
+				            	<ol>- <b>col</b> - an object with a column configuration</ol>
+				            </li>
+				        </ul>
+				    </li>
+			    </ol>
+        	</td>
 		</tr>
     </tbody>
 </table>
 
 @example:
-const grid = new dhx.Grid("grid_container", {
-	columns: [
-		{ width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },
-		{ width: 150, id: "netChange", header: [{text: "Net Change"}],
-			htmlEnable: true,
-			tooltip: false,
-			// define a custom template for the column's cells
-			template: function (text, row, col) {
-				return "<div class='cell__template'><input type='checkbox'
-                    disabled " + (text > 3000000 ? "checked" : "") + " ></div>";
-			} 
-		},
-        // more options
+const grid = new dhx.Grid("grid", {
+    columns: [
+        { width: 200, id: "country", header: [{ text: "Country", css: "header_country" }] },
+        { width: 150, id: "netChange", htmlEnable: true, header: [{text: "Net Change"}],
+            // define a custom template for the column's cells
+            template: function (text, row, col) {
+                return "<div className='cell__template'><input type='checkbox' disabled " + (text +"/>"+ 3000000 ? "checked" : "") + " ></div>";
+            },         
+        }
+        // more columns
     ],
-	data: data,
-	// add event handler to the HTML element of the custom template of cells
-	eventHandlers: { 
-		onmouseover: { 
-			cell__template: function(event, data) {
-				display(JSON.stringify(data.row, null, 2)); 
-			}
-	    } 
+    data: dataset,
+    eventHandlers: {
+    	// add an event handler for the header cell
+        onclick: {
+           header_country: function(event, data) {
+                console.log(JSON.stringify(data.col, null, 2)); 
+            }
+        },
+        // add event handler to the HTML element of the custom template of cells
+        onmouseover: {
+            cell__template: function(event, data) {
+                console.log(JSON.stringify(data.row, null, 2)); 
+            }
+        } ,
     } 
 });
 
 @descr:
 
 **Related sample**: [Grid. Handling events in template](https://snippet.dhtmlx.com/zcv5drxc)
 
+**Related sample**: [Grid. Rich example with templates and different editors](https://snippet.dhtmlx.com/1mxmshax)
+
 An example of adding event handlers to the HTML elements defined in the data set of Grid is given below:
 
 ~~~js {3,13,17-28}
@@ -84,19 +96,22 @@ const grid = new dhx.Grid("grid_container", {
     eventHandlers: { 
 		onclick: { 
 			cell__html: function(event, data) {
-				display(JSON.stringify(data.col, null, 2));
+				console.log(JSON.stringify(data.col, null, 2));
 			},
 		},
 		onmouseover: {
 			cell__html: function(event) {
-				display("You are over " + event.target.tagName);
+				console.log("You are over " + event.target.tagName);
 			},
 		}
 	}
 });
 ~~~
 
-@changelog: added in v7.0
+@changelog: 
+
+- Added in v7.0
+- The ability to add event handlers for the header/footer added in v8.3
 
 [comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#event-handlers-for-html-content grid/customization.md#adding-template-to-cells)