Merge pull request #5 from DHTMLX/8.4-grid-columns-naming-4493

Change "col" to "columns", fix params and examples for Grid and TreeGrid docs

docs/grid/api/api_gridcolumn_properties.md

@@ -20,7 +20,7 @@ columns:[
         {
             text?: string | number,
             tooltip?: boolean | object, // true by default
-            tooltipTemplate?: (value: string | undefined, header: IHeader, col: ICol) => string | boolean,
+            tooltipTemplate?: (value: string | undefined, header: object, column: object) => string | boolean,
             align?: "left" | "center" | "right", // "left" by default
             colspan?: number,
             rowspan?: number,
@@ -45,7 +45,7 @@ columns:[
         {
             text?: string | number,
             tooltip?: boolean | object, // true by default
-            tooltipTemplate?: (value: string | undefined, footer: IFooter, col: ICol) => string | boolean,
+            tooltipTemplate?: (value: string | undefined, footer: object, column: object) => string | boolean,
             align?: "left" | "center" | "right", // "left" by default
             colspan?: number,
             rowspan?: number,
@@ -59,7 +59,7 @@ columns:[
     editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "textarea", 
     format?: string,
     options?: (string | { id: string | number, value: string })[] |
-              (col: object, row?: object) => (string | { id: string | number, value: string })[],
+              (column: object, row?: object) => (string | { id: string | number, value: string })[],
     editorConfig?: obj,
     adjust?: "data" | "header" | "footer" | boolean, // false by default
     align?: "left" | "center" | "right", // "left" by default
@@ -71,9 +71,9 @@ columns:[
     sortable?: boolean, // true by default
     mark?: { min?: string, max?: string } |
            (cell: any, columnCells: any[], row?: object, column?: object) => string,
-    template?: (cellValue: any, row: object, col: object) => string,
+    template?: (cellValue: any, row: object, column: object) => string,
     tooltip?: boolean | object, // true by default
-    tooltipTemplate?: (cellValue: any, row: object, col: object) => string,
+    tooltipTemplate?: (cellValue: any, row: object, column: object) => string,
   },
   // more column objects
 ]
@@ -125,7 +125,7 @@ columns:[
         </tr>
         <tr>
             <td><b>options</b></td>
-            <td>(optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify <a href="../../configuration/#types-of-column-editor">editorType: "select" | "combobox" | "multiselect"</a>. The property can be:<ul><li>an array of string values</li><li>an array of objects with a set of <i>key:value</i> pairs - attributes of options and their values:<ol>The <b>id</b> attribute sets the id for the option</ol><ol>The <b>value</b> attribute sets the value to be displayed both in the editor and in the grid cell. If the id of the option is specified in the data set, the value will also be displayed in the cell on Grid initialization</ol></li><li>a function which takes two parameters:<ol><b>col</b> - (required) an object with the configuration of a column</ol><ol><b>row</b> - (optional) an object with all cells in a row</ol>and must return either an array of string values or an array of objects</li></ul><b>Related Samples:</b><ul><li><a href="https://snippet.dhtmlx.com/w2cdossn" target="_blank">Grid. Editing with different editors (combobox, select, multiselect, boolean, date)</a></li><li><a href="https://snippet.dhtmlx.com/i22fg83z" target="_blank">Grid. Individual option lists for select, multiselect and combobox editors</a></li></ul>If <b>newOptions</b> property is enabled, all new options will be displayed in the editor regardless of the initialized options.</td>
+            <td>(optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify <a href="../../configuration/#types-of-column-editor">editorType: "select" | "combobox" | "multiselect"</a>. The property can be:<ul><li>an array of string values</li><li>an array of objects with a set of <i>key:value</i> pairs - attributes of options and their values:<ol>The <b>id</b> attribute sets the id for the option</ol><ol>The <b>value</b> attribute sets the value to be displayed both in the editor and in the grid cell. If the id of the option is specified in the data set, the value will also be displayed in the cell on Grid initialization</ol></li><li>a function which takes two parameters:<ol><b>column</b> - (required) an object with the configuration of a column</ol><ol><b>row</b> - (optional) an object with all cells in a row</ol>and must return either an array of string values or an array of objects</li></ul><b>Related Samples:</b><ul><li><a href="https://snippet.dhtmlx.com/w2cdossn" target="_blank">Grid. Editing with different editors (combobox, select, multiselect, boolean, date)</a></li><li><a href="https://snippet.dhtmlx.com/i22fg83z" target="_blank">Grid. Individual option lists for select, multiselect and combobox editors</a></li></ul>If <b>newOptions</b> property is enabled, all new options will be displayed in the editor regardless of the initialized options.</td>
         </tr>
         <tr>
             <td id="editorconfig"><b>editorConfig</b></td>
@@ -165,19 +165,19 @@ columns:[
         </tr>
         <tr>
             <td><a href="../../customization#adding-custom-marks-to-cells"><b>mark</b></a></td>
-            <td>(optional) can be either an object or a function:<ul><li>as an <i>object</i> contains <b>min</b> and <b>max</b> properties, to apply desired CSS classes to cells with minimal|maximal values in a column </li><li>as a <i>function</i> returns a template for marking a cell(s) and takes several parameters:<ul><li><b>cell</b> - (required) the value of a cell</li><li><b>columnCells</b> - (required) an array of all cell values in the specified column</li><li><b>row</b> - (optional) an object with all cells in a row</li><li><b>col</b> - (optional) an object with the configuration of a column (see the <b>columns</b> config)</li></ul></li></ul><br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/buirf16n" target="_blank">Grid. Mark cells</a></td>
+            <td>(optional) can be either an object or a function:<ul><li>as an <i>object</i> contains <b>min</b> and <b>max</b> properties, to apply desired CSS classes to cells with minimal|maximal values in a column </li><li>as a <i>function</i> returns a template for marking a cell(s) and takes several parameters:<ul><li><b>cell</b> - (required) the value of a cell</li><li><b>columnCells</b> - (required) an array of all cell values in the specified column</li><li><b>row</b> - (optional) an object with all cells in a row</li><li><b>column</b> - (optional) an object with the configuration of a column (see the <b>columns</b> config)</li></ul></li></ul><br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/buirf16n" target="_blank">Grid. Mark cells</a></td>
         </tr>
         <tr>
             <td><a href="../../customization#adding-template-to-cells"><b>template</b></a></td>
-            <td>(optional) a function which returns a template with content for a cell(s). Takes 3 parameters:<ul><li><b>cellValue</b> - (required) the value of a cell</li><li><b>row</b> - (required) an object with all cells in a row</li><li><b>col</b> - (required) an object with the configuration of a column (see the <b>columns</b> config)</li></ul><br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/9txizaow" target="_blank">Grid. Cell templates</a></td>
+            <td>(optional) a function which returns a template with content for a cell(s). Takes 3 parameters:<ul><li><b>cellValue</b> - (required) the value of a cell</li><li><b>row</b> - (required) an object with all cells in a row</li><li><b>column</b> - (required) an object with the configuration of a column (see the <b>columns</b> config)</li></ul><br><b>Related Sample: </b><a href="https://snippet.dhtmlx.com/9txizaow" target="_blank">Grid. Cell templates</a></td>
         </tr>
         <tr>
             <td><a href="../../configuration#tooltip"><b>tooltip</b></a></td>
             <td>(optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings; <i>true</i> by default. When set as an object, the <b>tooltip</b> config can have the following properties:<ul><li><b>force</b> - (optional) forces opening of a tooltip; if set to true, the <b>showDelay</b> and <b>hideDelay</b> settings are ignored, *false* by default</li><li><b>showDelay</b> - (optional) the time period that should pass before showing a tooltip, in ms</li><li><b>hideDelay</b> - (optional) the time period that should pass before hiding a tooltip, in ms</li><li><b>margin</b> - (optional) the margin between the node and tooltip; *8px* by default</li><li><b>position</b> - (optional) the position of a tooltip: *"right"*, *"bottom"*, *"center"*, *"left"*, *"top"*; *"bottom"* by default</li><li><b>css</b> - (optional) the style of a tooltip box</li></ul>The **tooltip** config can be redefined for the header/footer tooltip</td>
         </tr>
         <tr>
             <td><a href="../../customization#adding-template-to-tooltip"><b>tooltipTemplate</b></a></td>
-            <td>(optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:<ul><li><b>value</b> - (required) the value of a cell</li><li><b>row</b> - (required) an object with all cells in a row</li><li><b>col</b> - (required) an object with the configuration of a column (see the <b>columns</b> config)</li></ul>Returning *false* from the function will block showing of the tooltip</td>
+            <td>(optional) a function which returns a template for the content of the tooltip. Takes 3 parameters:<ul><li><b>value</b> - (required) the value of a cell</li><li><b>row</b> - (required) an object with all cells in a row</li><li><b>column</b> - (required) an object with the configuration of a column (see the <b>columns</b> config)</li></ul>Returning *false* from the function will block showing of the tooltip</td>
         </tr>
     </tbody>
 </table>

docs/grid/api/grid_addspan_method.md

@@ -8,7 +8,7 @@ description: You can explore the addSpan method of Grid in the documentation of
 
 @short: adds a rows/cols span
 
-@signature: addSpan(spanObj: object): void;
+@signature: {'addSpan(spanObj: object): void;'}
 
 @params:
 - `spanObj: object` - an object with configuration of a span. The object contains the following properties:

docs/grid/api/grid_aftercolumndrag_event.md

@@ -13,14 +13,17 @@ description: You can explore the afterColumnDrag event of Grid in the documentat
 @signature: {'afterColumnDrag: (data: object, events: MouseEvent) => void;'}
 
 @params:
-- `data: object` - data object. It contains the following parameters:
+
+The callback of the event is called with the following parameters:
+
+- `data: object` - data object. It contains the following properties:
     - `start: string | number` - the id of a column, from which the dragging process has started
     - `source: array` - an array with ids of dragged columns
     - `target: string | number` - the id of a potential target column
-- `events: MouseEvent` - a native HTML event object
+- `event: MouseEvent` - a native HTML event object
 
 @example:
-grid.events.on("afterColumnDrag", function(data, events) {
+grid.events.on("afterColumnDrag", (data, event) => {
     // your logic here
 });
 

docs/grid/api/grid_aftercolumndrop_event.md

@@ -13,14 +13,16 @@ description: You can explore the afterColumnDrop event of Grid in the documentat
 @signature: {'afterColumnDrop: (data: object, events: MouseEvent) => void;'}
 
 @params:
-- `data: object` - data object. It contains the following parameters:
+The callback of the event is called with the following parameters:
+
+- `data: object` - data object. It contains the following properties:
     - `start: string | number` - the id of a column, from which the dragging process has started
     - `source: array` - an array with ids of dragged columns
     - `target: string | number` - the id of a potential target column
-- `events: MouseEvent` - a native HTML event object
+- `event: MouseEvent` - a native HTML event object
 
 @example:
-grid.events.on("afterColumnDrop", function(data, events) {
+grid.events.on("afterColumnDrop", (data, event) => {
     // your logic here
 });
 

docs/grid/api/grid_aftercolumnhide_event.md

@@ -8,13 +8,15 @@ description: You can explore the afterColumnHide event of Grid in the documentat
 
 @short: fires after a column is hidden
 
-@signature: {'afterColumnHide: (col: object) => void;'}
+@signature: {'afterColumnHide: (column: object) => void;'}
 
 @params:
-- `col: object` - an object with a column configuration
+The callback of the event is called with the following parameters:
+
+- `column: object` - an object with a column configuration
 
 @example:
-grid.events.on("afterColumnHide", function(column){
+grid.events.on("afterColumnHide", (column) => {
     // your logic here
 });
 

docs/grid/api/grid_aftercolumnshow_event.md

@@ -8,13 +8,14 @@ description: You can explore the afterColumnShow event of Grid in the documentat
 
 @short: fires after a column is shown
 
-@signature: {'afterColumnShow: (col: object) => void;'}
+@signature: {'afterColumnShow: (column: object) => void;'}
 
 @params:
-- `col: object` - an object with a column configuration
+The callback of the event is called with the following parameters:
+- `column: object` - an object with a column configuration
 
 @example:
-grid.events.on("afterColumnShow", function(column){
+grid.events.on("afterColumnShow", (column) => {
     // your logic here
 });
 

docs/grid/api/grid_aftereditend_event.md

@@ -8,15 +8,17 @@ description: You can explore the afterEditEnd event of Grid in the documentation
 
 @short: fires after editing of a cell is ended
 
-@signature: {'afterEditEnd: (value: string | number | boolean, row: object, col: object) => void;'}
+@signature: {'afterEditEnd: (value: string | number | boolean, row: object, column: object) => void;'}
 
 @params:
+The callback of the event is called with the following parameters:
+
 - `value: string | number | boolean` - the new value of a cell
 - `row: object` - an object with a row configuration
-- `col: object` - an object with a column configuration
+- `column: object` - an object with a column configuration
 
 @example:
-grid.events.on("afterEditEnd", function(value,row,column){
+grid.events.on("afterEditEnd", (value, row, column) => {
     // your logic here
 });
 

docs/grid/api/grid_aftereditstart_event.md

@@ -8,15 +8,17 @@ description: You can explore the afterEditStart event of Grid in the documentati
 
 @short: fires after editing of a cell has started
 
-@signature: {'afterEditStart: (row: object, col: object, editorType: "input" | "select" | "datePicker" | "checkbox" | "combobox" | "textarea" | "multiselect") => void;'}
+@signature: {'afterEditStart: (row: object, column: object, editorType: "input" | "select" | "datePicker" | "checkbox" | "combobox" | "textarea" | "multiselect") => void;'}
 
 @params:
+The callback of the event is called with the following parameters:
+
 - `row: object` - an object with a row configuration
-- `col: object` - an object with a column configuration
+- `column: object` - an object with a column configuration
 - `editorType: string` - the type of a cell editor: "input", "select", "datePicker", "checkbox", "combobox", "textarea", "multiselect"
 
 @example:
-grid.events.on("afterEditStart", function(row,col, editorType){
+grid.events.on("afterEditStart", (row, column, editorType) => {
     // your logic here
 });
 

docs/grid/api/grid_afterkeydown_event.md

@@ -8,13 +8,15 @@ description: You can explore the afterKeyDown event of Grid in the documentation
 
 @short: fires after the user is pressing a shortcut key
 
-@signature: {'afterKeyDown: (e: Event) => void;'}
+@signature: {'afterKeyDown: (event: Event) => void;'}
 
 @params:
-- `e: Event` - a native KeyboardEvent object
+The callback of the event is called with the following parameter:
+
+- `event: Event` - a native KeyboardEvent object
 
 @example:
-grid.events.on("afterKeyDown", function (e) {
+grid.events.on("afterKeyDown", (event) => {
     // your logic here
 });
 

docs/grid/api/grid_afterresizeend_event.md

@@ -8,14 +8,16 @@ description: You can explore the afterResizeEnd event of Grid in the documentati
 
 @short: fires after resizing of a column is ended
 
-@signature: {'afterResizeEnd: (col: object, e: MouseEvent) => void;'}
+@signature: {'afterResizeEnd: (column: object, event: MouseEvent) => void;'}
 
 @params:
-- `col: object` - an object with a column configuration
-- `e: MouseEvent` - a native HTML event object
+The callback of the event is called with the following parameters:
+
+- `column: object` - an object with a column configuration
+- `event: MouseEvent` - a native HTML event object
 
 @example:
-grid.events.on("afterResizeEnd", function(col,e){
+grid.events.on("afterResizeEnd", (column, event) => {
     // your logic here
 });
 

docs/grid/api/grid_afterrowdrag_event.md

@@ -8,17 +8,19 @@ description: You can explore the afterRowDrag event of Grid in the documentation
 
 @short: fires after dragging of a row is finished
 
-@signature: {'afterRowDrag: (data: object, events: MouseEvent) => void;'}
+@signature: {'afterRowDrag: (data: object, event: MouseEvent) => void;'}
 
 @params:
-- `data: object` - data object. It contains the following parameters:
+The callback of the event is called with the following parameters:
+
+- `data: object` - data object. It contains the following properties:
     - `start: string | number` - the id of a row, from which the dragging process has started
     - `source: array` - an array with ids of dragged rows
     - `target: string | number` - the id of a potential target row
-- `events: MouseEvent` - a native HTML event object
+- `event: MouseEvent` - a native HTML event object
 
 @example:
-grid.events.on("afterRowDrag", function(data, events) {
+grid.events.on("afterRowDrag", (data, event) => {
     // your logic here
 });
 

docs/grid/api/grid_afterrowdrop_event.md

@@ -8,17 +8,19 @@ description: You can explore the afterRowDrop event of Grid in the documentation
 
 @short: fires before the user has finished dragging a row but after the mouse button is released
 
-@signature: {'afterRowDrop: (data: object, events: MouseEvent) => void;'}
+@signature: {'afterRowDrop: (data: object, event: MouseEvent) => void;'}
 
 @params:
+The callback of the event is called with the following parameters:
+
 - `data: object` - data object. It contains the following parameters:
     - `start: string | number` - the id of a row, from which the dragging process has started
     - `source: array` - an array with ids of dragged rows
     - `target: string | number` - the id of a potential target row
-- `events: MouseEvent` - a native HTML event object
+- `event: MouseEvent` - a native HTML event object
 
 @example:
-grid.events.on("afterRowDrop", function(data, events) {
+grid.events.on("afterRowDrop", (data, event) => {
     // your logic here
 });
 

docs/grid/api/grid_afterrowhide_event.md

@@ -11,10 +11,12 @@ description: You can explore the afterRowHide event of Grid in the documentation
 @signature: {'afterRowHide: (row: object) => void;'}
 
 @params:
+The callback of the event is called with the following parameters:
+
 - `row: object` - an object with a row configuration
 
 @example:
-grid.events.on("afterRowHide", function(row){
+grid.events.on("afterRowHide", (row) => {
     // your logic here
 });
 

docs/grid/api/grid_afterrowresize_event.md

@@ -10,15 +10,17 @@ description: You can explore the afterRowResize event of Grid in the documentati
 
 @short: fires after the height of a row is changed
 
-@signature: afterRowResize: (row: object, events: Event, currentHeight: number) => void;
+@signature: {'afterRowResize: (row: object, event: Event, currentHeight: number) => void;'}
 
 @params:
+The callback of the event is called with the following parameters:
+
 - `row: object` - an object with a row configuration
-- `events: Event` - a native event object
+- `event: Event` - a native event object
 - `currentHeight: number` - the current height of the row
 
 @example:
-grid.events.on("afterRowResize", function(row, events, currentHeight) {
+grid.events.on("afterRowResize", (row, event, currentHeight) => {
     console.log("Current row height:", currentHeight);
 });
 

docs/grid/api/grid_afterrowshow_event.md

@@ -11,10 +11,12 @@ description: You can explore the afterRowShow event of Grid in the documentation
 @signature: {'afterRowShow: (row: object) => void;'}
 
 @params:
+The callback of the event is called with the following parameters:
+
 - `row: object` - an object with a row configuration
 
 @example:
-grid.events.on("afterRowShow", function(row){
+grid.events.on("afterRowShow", (row) => {
     // your logic here
 });