[update] grid/treegrid new and updated configs, configuration guides

DHTMLX · Oct 16, 2023 · 1aa2bdf · 1aa2bdf
1 parent a3220f9
commit 1aa2bdf
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 34 deletions.
diff --git a/docs/form/api/container/api_container_properties.md b/docs/form/api/container/api_container_properties.md
@@ -51,6 +51,6 @@ description: You can explore the Properties of the Container control of Form in
 
 ### Example
 
-<iframe src="https://snippet.dhtmlx.com/bm1l4od5?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>
+<iframe src="https://snippet.dhtmlx.com/cnxi9eqq?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>
 
 **Related article:** [Container](form/container.md)
diff --git a/docs/grid/api/grid_eventhandlers_config.md b/docs/grid/api/grid_eventhandlers_config.md
@@ -40,26 +40,27 @@ The **eventHandlers** object includes a set of *key:value* pairs, where:
 </table>
 
 @example:
-const grid = new dhx.Grid("grid", {
+const grid = new dhx.Grid("grid_container", {
     columns: [
         { width: 200, id: "country", header: [{ text: "Country", css: "header_country" }] },
-        { width: 150, id: "netChange", htmlEnable: true, header: [{text: "Net Change"}],
+        { width: 150, id: "netChange", 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
+                return "<div className='cell__template'><input type='checkbox'
+                    disabled " + (text /> 3000000 ? "checked" : "") + " ></div>";
+            } 
+        },
+        htmlEnable: true,
+        // more options
     ],
-    data: dataset,
+    data: data,
+    // add event handler to the HTML element of the custom template of cells
     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)); 

diff --git a/docs/grid/api/grid_footerautoheight_config.md b/docs/grid/api/grid_footerautoheight_config.md
@@ -23,11 +23,11 @@ const grid = new dhx.Grid("grid", {
     footerAutoHeight: true // enable autoHeight in the footer
 });
 
-@descr: Redefines the <b>autoHeight</b> config for the footer.
+@descr: 
 
+**Related sample**: [Grid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d)
 
-**Related sample**: 
-
+Redefines the <b>autoHeight</b> config for the footer.
 
 @changelog: added in v8.3
 

diff --git a/docs/grid/api/grid_headerautoheight_config.md b/docs/grid/api/grid_headerautoheight_config.md
@@ -24,9 +24,10 @@ const grid = new dhx.Grid("grid", {
     headerAutoHeight: true // enable autoHeight in the header
 });
 
-@descr: Redefines the <b>autoHeight</b> config for the header.
+@descr: 
 
-**Related sample**: 
+**Related sample**: [Grid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d)
 
+Redefines the <b>autoHeight</b> config for the header.
 
 @changelog: added in v8.3
diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md
@@ -425,13 +425,10 @@ const grid = new dhx.Grid("grid", {
     columns: [
         { width: 200, id: "country", header: [
             {
-                text: "<span style='font-size:16px; color: blue'>Country</span>",
-                htmlEnable: true
+                text: "<span style='font-size:16px; color: steelblue'>Country</span>",
+                htmlEnable: true,
             }
         ]},
-        { width: 150, id: "population", htmlEnable: true, header: [
-            { text: "<span class='header-title'>Population</span>" }
-        ]},
         // other columns' configs
     ],
     data: dataset,

diff --git a/docs/treegrid/api/treegrid_footerautoheight_config.md b/docs/treegrid/api/treegrid_footerautoheight_config.md
@@ -22,9 +22,11 @@ const treegrid = new dhx.TreeGrid("treegrid_container", {
     footerAutoHeight: true // enable autoHeight in the footer
 });
 
-@descr: Redefines the <b>autoHeight</b> config for the footer.
+@descr: 
 
-**Related sample**: 
+**Related sample**: [TreeGrid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/7kgj0b4e)
+
+Redefines the <b>autoHeight</b> config for the footer.
 
 @changelog: added in v8.3
 

diff --git a/docs/treegrid/api/treegrid_headerautoheight_config.md b/docs/treegrid/api/treegrid_headerautoheight_config.md
@@ -22,9 +22,10 @@ const treegrid = new dhx.TreeGrid("treegrid_container", {
     footerAutoHeight: true // enable autoHeight in the footer
 });
 
-@descr: Redefines the <b>autoHeight</b> config for the header.
+@descr:
 
-**Related sample**: 
+**Related sample**: [TreeGrid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/7kgj0b4e)
 
+ Redefines the <b>autoHeight</b> config for the header.
 
 @changelog: added in v8.3
diff --git a/docs/treegrid/configuration.md b/docs/treegrid/configuration.md
@@ -445,15 +445,6 @@ const treeGrid = new dhx.TreeGrid("treegrid", {
             ],
             gravity: 1.5,
         },
-        {
-            id: "price",
-            type: "string",
-            htmlEnable: true,
-            header: [
-                { text: "<span class='header-title'>Terms and conditions</span>", colspan: 2 },
-                { text: "Price" }
-            ]
-        },
         // other columns' config
     ],
     data: dataset,
@@ -463,7 +454,6 @@ const treeGrid = new dhx.TreeGrid("treegrid", {
 
 **Related sample**: [TreeGrid. Styling header cells (custom CSS)](https://snippet.dhtmlx.com/vf0ws454)
 
-
 ### Event handlers for HTML content
 
 #### HTML elements defined in the data set