[update] grid column properties examples, minor fixes

Author: mafanya23

docs/grid/api/grid_adjustcolumnwidth_method.md

@@ -19,6 +19,6 @@ grid.adjustColumnWidth("b", "header");
 
 @descr:
 
-If no value is set to the *adjust* parameter, the **adjustColumnWidth** method sets it to *true*.
+If no value is set to the `adjust` parameter, the `adjustColumnWidth()` method sets it to *true*.
 
 [comment]: # (@relatedapi: grid/api/grid_adjust_config.md)

docs/grid/api/grid_aftercolumndrag_event.md

@@ -6,7 +6,9 @@ description: You can explore the afterColumnDrag event of Grid in the documentat
 
 # afterColumnDrag
 
-{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
+:::tip pro version only
+The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
+:::
 
 @short: fires after dragging of a column is finished
 

docs/grid/api/grid_aftercolumndrop_event.md

@@ -6,7 +6,9 @@ description: You can explore the afterColumnDrop event of Grid in the documentat
 
 # afterColumnDrop
 
-{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
+:::tip pro version only
+The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
+:::
 
 @short: fires before the user has finished dragging a column but after the mouse button is released
 

docs/grid/api/grid_afterrowresize_event.md

@@ -6,7 +6,9 @@ description: You can explore the afterRowResize event of Grid in the documentati
 
 # afterRowResize
 
-{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
+:::tip pro version only
+The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
+:::
 
 @short: fires after the height of a row is changed
 

docs/grid/api/grid_spans_config.md

@@ -107,7 +107,7 @@ const grid = new dhx.Grid("grid_container", {
             column: "population",
             rowspan: 9,
             text: "Some text",
-            toltipTemplate: ({ value, count }) => (`value: ${value}; count: ${count}`),
+            tooltipTemplate: ({ value, count }) => (`value: ${value}; count: ${count}`),
         },
     ],
     data: dataset

docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md

@@ -23,10 +23,10 @@ adjust?: "data" | "header" | "footer" | boolean;
 const grid = new dhx.Grid("grid_container", { 
     columns: [
         { id: "country", header: [{ text: "Country" }], adjust: "header" },
-        { id: "population", header: [{ text: "Population" }] }
+        // more columns configuration objects
     ],
     adjust: false,
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_align_property.md

@@ -20,10 +20,10 @@ align?: "left" | "center" | "right";
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { id: "name", header:  [{ text: "Name", align: "center" }], align: "right"}
-        // more options
+        { id: "name", header: [{ text: "Name" }], align: "right" }, 
+        // more columns configuration objects
     ],
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md

@@ -23,10 +23,10 @@ autoWidth?: boolean;
 const grid = new dhx.Grid("grid_container", {
     columns: [
         { id: "country", header: [{ text: "Country" }], autoWidth: false },
-        { id: "population", header: [{ text: "Population" }] },
+        // more columns configuration objects
     ],
     autoWidth: true,
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_closable_property.md

@@ -27,27 +27,18 @@ closable?: boolean;
 const grid = new dhx.Grid("grid_container", {
     columns: [
         {
-            width: 150,
             id: "country",
             header: [{ text: "Country" }],
             // grouping of the "country" column is permanently enabled
             // and can't be switched off via the group panel
             closable: false, 
         },
-        {
-            width: 150,
-            id: "population",
-            header: [{ text: "Population" }],
-            groupable: true,
-        },
-        { width: 150, id: "destiny", header: [{ text: "Density (P/Km²)" }] },
-        { width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
+        // more columns configuration objects
     ],
     group: {
-        order: ["country", "population"]
+        order: [ "country" ]
     },
-    groupable: true,
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md

@@ -26,13 +26,10 @@ dateFormat?: string;
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { 
-            width: 150, id: "date", header: [{ text: "Date" }], 
-            type: "date", dateFormat: "%M %d %Y"
-        },
-        // more columns
+        { id: "date", header: [{ text: "Date" }], type: "date", dateFormat: "%M %d %Y" },
+        // more columns configuration objects
     ],
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_draggable_property.md

@@ -22,12 +22,11 @@ draggable?: boolean;
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { width: 200, id: "country", header: [{ text: "Country" }]},
-        { width: 150, id: "land", header: [{ text: "Land" }] },
-        { width: 150, id: "density", header: [{ text: "Density" }], draggable: false }
+        { id: "density", header: [{ text: "Density" }], draggable: false },
+        // more columns configuration objects
     ],
-    data: dataset,
     dragItem: "column", 
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_editable_property.md

@@ -22,16 +22,10 @@ editable?: boolean;
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { 
-          width: 150, id: "project",
-          editable: false,
-          header: [{ text: "Project" }, { content: "selectFilter" }]
-        },
-        { width: 150, id: "owner", header: [{ text: "Owner" }, { content: "inputFilter" }]},
-        { width: 150, id: "hours", header: [{ text: "Hours" }, { content: "inputFilter" }]},
-        // more columns
+        { id: "project", header: [{ text: "Project" }], editable: false },
+        // more columns configuration objects
     ],
-    editable: true
+    editable: true,
     // more options
 });
 ~~~

docs/grid/api/gridcolumn_properties/gridcolumn_editorconfig_property.md

@@ -21,19 +21,19 @@ The structure of the `editorConfig` object depends on the specified type of the
 <table>
     <tbody>
         <tr>
-            <td><b>editorType: "combobox/multiselect"</b></td>
+            <td><b>editorType: "<a href="../../../configuration/#combobox">combobox</a>/<a href="../../../configuration/#multiselect">multiselect"</a></b></td>
             <td>For this type of editor, the <b>editorConfig</b> object can include the following properties:<ul><li><b>css</b> - (optional) styling to be applied to an option</li><li><b>filter</b> - (optional) sets a custom function for filtering combobox options. Takes two parameters:<ul><li><b>item</b> - (<i>object</i>) an item of data collection</li><li><b>target</b> - (<i>string</i>) the string to compare to</li></ul> and should return <i>true/false</i> to specify whether an item should be displayed in the filtered list of options</li><li><b>eventHandlers</b> - (<i>object</i>) adds event handlers to HTML elements of a custom template of combobox items. <a href="../../../../combobox/api/combobox_eventhandlers_config/">Check the details.</a></li><li><b>itemHeight</b> - (optional) the height of an option</li><li><b>listHeight</b> - (optional) the height of the list of options</li><li><a href="../../../configuration/#editable-combobox"><b>newOptions</b></a> - (optional) allows end users to add new values into the list of combobox options from UI. The new options will also appear in the drop-down list of the header/footer filters (<i>content: "selectFilter" | "comboFilter"</i>)</li><li><b>placeholder</b> - (optional) sets a placeholder in the editor's input</li><li><b>readonly</b> - (optional) makes the editor readonly (it is only possible to select options from the list, without entering words in the input)</li><li><b>template</b> - (optional) a callback function which returns a string. It is called with an object argument which contains two properties:<ul><li><b>id</b> - the id of the selected option</li><li><b>value</b> - the value of the selected option</li></ul></li></ul></td>            
         </tr>
         <tr>
-            <td><b>editorType: "multiselect</b></td>
+            <td><b>editorType: <a href="../../../configuration/#multiselect">"multiselect"</a></b></td>
             <td>For this type of editor, the <b>editorConfig</b> object can include the following properties:<ul><li><b>selectAllButton</b> - (optional) adds a button that allows selecting all the options in the editor</li></ul></td>
         </tr>
         <tr>
-            <td><b>editorType:"datePicker"</b> and column <b>type:"date"</b></td>
+            <td><b>editorType:<a href="../../../configuration/#datepicker">"datePicker"</a></b> and column <b>type:"date"</b></td>
             <td>For this type of editor, the <b>editorConfig</b> object can include the following properties:<ul><li><b>asDateObject</b> - (optional) sets the date picker mode that presupposes saving a date as a Date object</li></ul> and <a href="../../../../category/calendar-properties/">a set of properties of Calendar</a> (except for the <b>value</b> and <b>range</b> ones)</td>
         </tr>
         <tr>
-            <td><b>editorType:"input"</b> and column <b>type:"number"</b></td>
+            <td><a href="../../../configuration/#editing-columns-with-the-number-type"><b>editorType:</b><b>"input"</b> and column <b>type:"number"</b></a></td>
             <td>For this combination, the <b>editorConfig</b> object can include the following properties:<ul><li><b>min</b> - (optional) the minimum allowed value</li><li><b>max</b> - (optional) the maximum allowed value</li></ul></td>
         </tr>
     </tbody>
@@ -46,17 +46,16 @@ The structure of the `editorConfig` object depends on the specified type of the
 const grid = new dhx.Grid("grid_container", {
     columns: [
         {
-            width: 150,
             id: "status",
-            header: [{text: "Status"}, {content: "selectFilter"}],
+            header: [{ text: "Status" }],
             editorType: "combobox",
             // enables the ability to add new values into the combobox editor of the "Status" column
             editorConfig: { newOptions: true },
-            options: ["Done", "In Progress", "Not Started"]
+            options: [ "Done", "In Progress", "Not Started" ]
         },
-        // more columns
+        // more columns configuration objects
     ],
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_editortype_property.md

@@ -28,16 +28,12 @@ editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "t
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        {
-            width: 150, id: "project", 
-            header: [{ text: "Project" }, { content: "selectFilter" }], 
-            editorType: "textarea"
-        }
-    // more columns
+        { id: "project", header: [{ text: "Project" }], editorType: "textarea" }, 
+        // more columns configuration objects
     ],
-    data: data,
     editable: true,
-    autoHeight: true
+    autoHeight: true,
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_footer_property.md

@@ -46,13 +46,13 @@ Each footer object may include:
             <td><a href="../../../configuration/#headerfooter-text"><b>text</b></a></td><td>(optional) the text of a footer or a callback function which is called with the following parameter:<ul><li><b>content</b> - an object with the content of the footer tooltip that contains the calculated values as *key:value* pairs, where:<ul><li>the *key* is either the key defined in the list or the functor name</li><li>the *value* can be a *string/number* or *null*</li></ul> The calculated values are taken either from the <b>summary</b> config option of the component or the <b>summary</b> config option of a column</li></ul></td>
         </tr>
         <tr>
-            <td><b>tooltip</b></td><td>(optional) enables/disables the footer 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></td>
+            <td><a href="../../../configuration/#column-headerfooter-tooltip"><b>tooltip</b></a></td><td>(optional) enables/disables the footer 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></td>
         </tr>
         <tr>
             <td><a href="../../../configuration/#column-headerfooter-tooltip"><b>tooltipTemplate</b></a></td><td>(optional) sets a template for the footer tooltip. Takes into account the <a href="../../../configuration/#html-content-of-grid-columns">htmlEnable</a> property. The value of the <b>tooltipTemplate</b> property is a callback function which is called with the following parameters:<ul><li><b>content</b> - an object with the content of the footer tooltip. Contains two properties which are available either from the component's or from the column's configuration:<ul><li><b>value</b> - the value rendered in a cell, including the applied templates</li><li>an object with the calculated values of the <b>summary</b> property, set as *key:value* pairs where:<ul><li>the *key* is either the key defined in the list or the functor name</li><li>the *value* can be a *string/number* or *null*</li></ul></li></ul></li><li><b>footer</b> - the object of the column footer</li><li><b>column</b> - the object of a column</li></ul>Return <i>false</i> to disable the tooltip</td>
         </tr>
         <tr>
-            <td><b>align</b></td><td>(optional) aligns data in the footer: "left" | "center" | "right", <i>"left"</i> by default</td>
+            <td><a href="../../../configuration/#alignment"><b>align</b></a></td><td>(optional) aligns data in the footer: "left" | "center" | "right", <i>"left"</i> by default</td>
         </tr>
         <tr>
             <td><b>colspan</b></td><td>(optional) the number of columns in a colspan</td>
@@ -64,7 +64,7 @@ Each footer object may include:
             <td><b>css</b></td><td>(optional) styling to be applied to a footer</td>
         </tr>
         <tr>
-            <td><b>htmlEnable</b></td><td>(optional) <i>false</i> by default. If set to <i>true</i>, allows using and displaying HTML content in a footer. If set to <i>false</i>, the content of the footer cells will be displayed as a <i>string</i> value</td>
+            <td><a href="../../../configuration/#html-content-of-grid-columns"><b>htmlEnable</b></a></td><td>(optional) <i>false</i> by default. If set to <i>true</i>, allows using and displaying HTML content in a footer. If set to <i>false</i>, the content of the footer cells will be displayed as a <i>string</i> value</td>
         </tr>
     </tbody>
 </table>
@@ -75,16 +75,10 @@ Each footer object may include:
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { 
-            width: 150, 
-            id: "population", 
-            header: [{ text: () => `<mark>Population</mark>`, htmlEnable: true }],
-            footer: [{ text: ({ totalPopulation, count }) => `Total: ${totalPopulation}, Count: ${count}` }],
-            summary: "count"
-        }
+        { id: "country", header: [{ text: "Country" }], footer: [{ text: "Total" }] },
+        // more columns configuration objects
     ],
-    summary: { totalPopulation: ["population", "sum"] },
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_gravity_property.md

@@ -23,6 +23,7 @@ const grid = new dhx.Grid("grid_container", {
         { id: "density", header: [{ text: "Density (P/Km²)" }], gravity: 1 },
         // the column with the "area" id is two times wider than the column with the "density" id
         { id: "area", header: [{ text: "Land Area (Km²)" }], gravity: 2 },
+        // more columns configuration objects
     ],
     autoWidth: true,
     // more options

docs/grid/api/gridcolumn_properties/gridcolumn_groupable_property.md

@@ -23,11 +23,10 @@ groupable?: boolean;
 const grid = new dhx.Grid("grid_container", {
     columns: [
         { id: "country", header: [{ text: "Country" }], groupable: true },
-        { id: "population", header: [{ text: "Population" }] },
-        { id: "area", header: [{ text: "Land Area (Km²)" }] }
+        // more columns configuration objects
     ],
     group: true,
-    data: dataset
+    // more options
 });
 ~~~