From 1aa2bdf72eb60d4f9745d987e98037ae5bc375c7 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Mon, 16 Oct 2023 16:34:27 +0300 Subject: [PATCH] [update] grid/treegrid new and updated configs, configuration guides --- .../api/container/api_container_properties.md | 2 +- docs/grid/api/grid_eventhandlers_config.md | 19 ++++++++++--------- docs/grid/api/grid_footerautoheight_config.md | 6 +++--- docs/grid/api/grid_headerautoheight_config.md | 5 +++-- docs/grid/configuration.md | 7 ++----- .../api/treegrid_footerautoheight_config.md | 6 ++++-- .../api/treegrid_headerautoheight_config.md | 5 +++-- docs/treegrid/configuration.md | 10 ---------- 8 files changed, 26 insertions(+), 34 deletions(-) diff --git a/docs/form/api/container/api_container_properties.md b/docs/form/api/container/api_container_properties.md index 37d0b94d..9f0e8a03 100644 --- 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 - + **Related article:** [Container](form/container.md) diff --git a/docs/grid/api/grid_eventhandlers_config.md b/docs/grid/api/grid_eventhandlers_config.md index e25b4d66..f50b0706 100644 --- 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: @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 "
"+ 3000000 ? "checked" : "") + " >
"; - }, - } - // more columns + return "
3000000 ? "checked" : "") + " >
"; + } + }, + 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 index d5e778f5..e1266e79 100644 --- 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 autoHeight config for the footer. +@descr: +**Related sample**: [Grid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d) -**Related sample**: - +Redefines the autoHeight 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 index 9ee39c38..cc5be28a 100644 --- 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 autoHeight config for the header. +@descr: -**Related sample**: +**Related sample**: [Grid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d) +Redefines the autoHeight config for the header. @changelog: added in v8.3 diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 4a0c6ea5..fcaa26b0 100644 --- 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: "Country", - htmlEnable: true + text: "Country", + htmlEnable: true, } ]}, - { width: 150, id: "population", htmlEnable: true, header: [ - { text: "Population" } - ]}, // other columns' configs ], data: dataset, diff --git a/docs/treegrid/api/treegrid_footerautoheight_config.md b/docs/treegrid/api/treegrid_footerautoheight_config.md index aa807122..9ce057b9 100644 --- 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 autoHeight config for the footer. +@descr: -**Related sample**: +**Related sample**: [TreeGrid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/7kgj0b4e) + +Redefines the autoHeight 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 index 198da33e..34f79c47 100644 --- 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 autoHeight config for the header. +@descr: -**Related sample**: +**Related sample**: [TreeGrid. Header/Footer autoHeight mode](https://snippet.dhtmlx.com/7kgj0b4e) + Redefines the autoHeight config for the header. @changelog: added in v8.3 diff --git a/docs/treegrid/configuration.md b/docs/treegrid/configuration.md index 6a1b206f..26314748 100644 --- 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: "Terms and conditions", 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