From 17f66b3654e6e7ee1452d38817f1787a0d3a16bf Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 26 Aug 2026 17:05:16 +0300 Subject: [PATCH 1/5] [update] individual height for header/footer rows - headerRowHeight/footerRowHeight signature extended to number | (number | "auto")[] - documented the levels model: the number of levels comes from the longest header/footer array among the columns - described both forms: a number for all levels, an array sizing levels individually with px values or the "auto" keyword - added the v9.4 changelog note to both API pages - reworked the "Header/footer height" section of the Grid configuration guide, fixed a missing comma in its snippet --- docs/grid/api/grid_footerrowheight_config.md | 47 +++++++++++++++++--- docs/grid/api/grid_headerrowheight_config.md | 43 ++++++++++++++++-- docs/grid/configuration.md | 32 +++++++++++-- 3 files changed, 109 insertions(+), 13 deletions(-) diff --git a/docs/grid/api/grid_footerrowheight_config.md b/docs/grid/api/grid_footerrowheight_config.md index 6b713bd4..0bd9bdf8 100644 --- a/docs/grid/api/grid_footerrowheight_config.md +++ b/docs/grid/api/grid_footerrowheight_config.md @@ -6,9 +6,9 @@ description: You can explore the footerRowHeight config of Grid in the documenta # footerRowHeight -@short: Optional. Sets the height of rows in the footer +@short: Optional. Sets the height of rows (levels) in the footer -@signature: {'footerRowHeight?: number;'} +@signature: {'footerRowHeight?: number | (number | "auto")[];'} @default: 40 @@ -17,11 +17,48 @@ const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], - footerRowHeight: 50 + footerRowHeight: [50, "auto"] }); @descr: - -The height of the footer is calculated as a sum of all row heights in it. + +**Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) + +Grid renders the footer as a stack of levels (rows). The number of levels is defined by the longest `footer` array among the columns: + +~~~jsx +columns: [ + { id: "price", footer: [{ text: summary => `Avg: ${summary.avg}` }, { text: "Price" }] }, // 2 levels + { id: "stock", footer: ["", { text: "In stock" }] }, +] +~~~ + +The `footerRowHeight` property defines how tall those levels are and can be set in two ways: + +- as a *number* - the same height, in pixels, is applied to every level of the footer: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + footerRowHeight: 50 // both levels are 50px tall +}); +~~~ + +- as an *array* - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword, which adjusts the level height to its content: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + footerRowHeight: ["auto", 60] // the first level fits its content, the second one is 60px tall +}); +~~~ + +The total height of the footer is calculated as a sum of all level heights in it. + +@changelog: the array value with individual level heights and the *"auto"* keyword were added in v9.4 [comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#headerfooter-height) diff --git a/docs/grid/api/grid_headerrowheight_config.md b/docs/grid/api/grid_headerrowheight_config.md index 98ed5184..5810421c 100644 --- a/docs/grid/api/grid_headerrowheight_config.md +++ b/docs/grid/api/grid_headerrowheight_config.md @@ -6,9 +6,9 @@ description: You can explore the headerRowHeight config of Grid in the documenta # headerRowHeight -@short: Optional. Sets the height of rows in the header +@short: Optional. Sets the height of rows (levels) in the header -@signature: {'headerRowHeight?: number;'} +@signature: {'headerRowHeight?: number | (number | "auto")[];'} @default: 40 @@ -17,13 +17,48 @@ const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], - headerRowHeight: 50 + headerRowHeight: [50, "auto"] }); @descr: **Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) -The height of the header is calculated as a sum of all row heights in it. +Grid renders the header as a stack of levels (rows). The number of levels is defined by the longest `header` array among the columns: + +~~~jsx +columns: [ + { id: "country", header: [{ text: "Region", colspan: 2 }, { text: "Country" }] }, // 2 levels + { id: "population", header: ["", { text: "Population" }] }, +] +~~~ + +The `headerRowHeight` property defines how tall those levels are and can be set in two ways: + +- as a *number* - the same height, in pixels, is applied to every level of the header: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + headerRowHeight: 50 // both levels are 50px tall +}); +~~~ + +- as an *array* - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword, which adjusts the level height to its content: + +~~~jsx +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + headerRowHeight: [60, "auto"] // the first level is 60px tall, the second one fits its content +}); +~~~ + +The total height of the header is calculated as a sum of all level heights in it. + +@changelog: the array value with individual level heights and the *"auto"* keyword were added in v9.4 [comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#headerfooter-height) diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 59a04076..d4429b04 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1572,19 +1572,43 @@ You can change the height of the header/footer in one of the following ways: 1. Specify the necessary height of the rows in the header/footer via the related API options -The height of the header/footer of Grid is calculated as a sum of rows which are included into it. To set the height of a row inside the header/footer, use the [`headerRowHeight`](grid/api/grid_headerrowheight_config.md)/[`footerRowHeight`](grid/api/grid_footerrowheight_config.md) -properties, correspondingly. The default value of the mentioned properties is 40. +Grid renders the header and the footer as a stack of levels (rows). The number of levels is defined by the longest `header`/`footer` array among the columns: ~~~jsx +columns: [ + { id: "country", header: [{ text: "Region", colspan: 2 }, { text: "Country" }] }, // 2 levels + { id: "population", header: ["", { text: "Population" }] }, +] +~~~ + +The height of the header/footer of Grid is calculated as a sum of the levels which are included into it. To set the height of the levels, use the [`headerRowHeight`](grid/api/grid_headerrowheight_config.md)/[`footerRowHeight`](grid/api/grid_footerrowheight_config.md) properties, correspondingly. Each of them can be set either as a *number*, which is applied to every level of the zone, or as an *array*, which sizes the levels individually. + +The default value of the mentioned properties is 40. + +~~~jsx +// the same height for all the levels of the header/footer const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], - footerRowHeight:50 + footerRowHeight: 50, headerRowHeight: 50 }); ~~~ +When the property is set as an array, the item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword, which adjusts the level height to its content: + +~~~jsx +// individual height for each level of the header/footer +const grid = new dhx.Grid("grid_container", { + columns: [ + // columns config + ], + headerRowHeight: [60, "auto"], // the first level is 60px tall, the second one fits its content + footerRowHeight: ["auto", 60] // the first level fits its content, the second one is 60px tall +}); +~~~ + **Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) 2. Provide the automatic adjustment of the header/footer height for the content to fit in @@ -1747,7 +1771,7 @@ Please note that the `autoHeight` option does not adjust the height of the cells 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 can: -- use the [](grid/api/grid_headerrowheight_config.md) and [](grid/api/grid_footerrowheight_config.md) configuration options of Grid to set specific values for the header/footer rows height +- use the [](grid/api/grid_headerrowheight_config.md) and [](grid/api/grid_footerrowheight_config.md) configuration options of Grid to set specific values for the header/footer rows height, either the same one for all the rows (levels) or an individual one for each of them - use the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footerautoheight_config.md) configuration options of Grid (**PRO version only**) to enable autoheight for the header/footer rows ### Automatic adding of empty row into Grid From 62ac75544d9e84168355ecf88f52755b6324d1ac Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 26 Aug 2026 17:56:10 +0300 Subject: [PATCH 2/5] [update] detail header/footer level height rules - replaced the examples with the verified 3-level header config, dropped the made-up footer snippet - added the level height resolution table: number, array item, "auto", levels beyond the array length - documented that extra array items are ignored and invalid items fall back to 40 - documented the precedence over headerAutoHeight/footerAutoHeight, noted it on both autoHeight pages too - marked the "auto" item as PRO only, with the GPL degradation to 40px without wrapping - noted that per-level heights are carried over to the XLSX/PDF/PNG export --- docs/grid/api/grid_footerautoheight_config.md | 2 + docs/grid/api/grid_footerrowheight_config.md | 50 ++++++++++---- docs/grid/api/grid_headerautoheight_config.md | 2 + docs/grid/api/grid_headerrowheight_config.md | 66 +++++++++++++++++-- docs/grid/configuration.md | 41 +++++++++++- 5 files changed, 140 insertions(+), 21 deletions(-) diff --git a/docs/grid/api/grid_footerautoheight_config.md b/docs/grid/api/grid_footerautoheight_config.md index 7be6839f..61f49eea 100644 --- a/docs/grid/api/grid_footerautoheight_config.md +++ b/docs/grid/api/grid_footerautoheight_config.md @@ -32,6 +32,8 @@ const grid = new dhx.Grid("grid", { Redefines the [autoHeight](grid/api/grid_autoheight_config.md) config for the footer. +Ignored when [`footerRowHeight`](grid/api/grid_footerrowheight_config.md) is set as an array: in that case the height of each level of the footer is defined by the corresponding array item, and only the *"auto"* items fit their content. + @changelog: added in v8.3 diff --git a/docs/grid/api/grid_footerrowheight_config.md b/docs/grid/api/grid_footerrowheight_config.md index 0bd9bdf8..de4c50f8 100644 --- a/docs/grid/api/grid_footerrowheight_config.md +++ b/docs/grid/api/grid_footerrowheight_config.md @@ -15,23 +15,18 @@ description: You can explore the footerRowHeight config of Grid in the documenta @example: const grid = new dhx.Grid("grid_container", { columns: [ - // columns config + // columns config, with 2 levels in the `footer` array of a column ], - footerRowHeight: [50, "auto"] + // level 0 -> 40px, level 1 -> adjusts to its content + footerRowHeight: [40, "auto"], + data: dataset, }); @descr: **Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) -Grid renders the footer as a stack of levels (rows). The number of levels is defined by the longest `footer` array among the columns: - -~~~jsx -columns: [ - { id: "price", footer: [{ text: summary => `Avg: ${summary.avg}` }, { text: "Price" }] }, // 2 levels - { id: "stock", footer: ["", { text: "In stock" }] }, -] -~~~ +Grid renders the footer as a stack of levels (rows). The number of levels is defined by the longest `footer` array among the columns, the same way as it works for the header, see the [Header/footer height](grid/configuration.md#headerfooter-height) section of the Configuration guide. The `footerRowHeight` property defines how tall those levels are and can be set in two ways: @@ -42,7 +37,8 @@ const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], - footerRowHeight: 50 // both levels are 50px tall + footerRowHeight: 56, // all the levels of the footer are 56px tall + data: dataset, }); ~~~ @@ -53,12 +49,42 @@ const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], - footerRowHeight: ["auto", 60] // the first level fits its content, the second one is 60px tall + // level 0 -> 40px, level 1 -> adjusts to its content + footerRowHeight: [40, "auto"], + data: dataset, }); ~~~ +:::tip pro version only +Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. + +In the GPL version the array form itself works, individual pixel heights per level are fully supported, but an *"auto"* item is accepted and silently degrades: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values in the GPL version. +::: + +This is how the height of a level is resolved: + +| `footerRowHeight` | Level | Height | Text wrapping | +| -------- | ----- | ------ | ------------- | +| *number* | any | the number | no | +| *array* | a *number* item | the item | no | +| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40 | yes | +| *array* | beyond the array length | 40 | no | + +Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. + The total height of the footer is calculated as a sum of all level heights in it. +### Relation to `footerAutoHeight` + +The [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes every level of the footer fit its content. The array form of `footerRowHeight` is more specific, so it wins: + +- if `footerRowHeight` is set as an array, `footerAutoHeight` is ignored for the footer entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in +- if `footerRowHeight` is set as a number, `footerAutoHeight` works as before: every level fits its content but is never shorter than `footerRowHeight` + +### Export + +The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. + @changelog: the array value with individual level heights and the *"auto"* keyword were added in v9.4 [comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#headerfooter-height) diff --git a/docs/grid/api/grid_headerautoheight_config.md b/docs/grid/api/grid_headerautoheight_config.md index 8e2536a4..f3157c04 100644 --- a/docs/grid/api/grid_headerautoheight_config.md +++ b/docs/grid/api/grid_headerautoheight_config.md @@ -32,4 +32,6 @@ const grid = new dhx.Grid("grid", { Redefines the [autoHeight](grid/api/grid_autoheight_config.md) config for the header. +Ignored when [`headerRowHeight`](grid/api/grid_headerrowheight_config.md) is set as an array: in that case the height of each level of the header is defined by the corresponding array item, and only the *"auto"* items fit their content. + @changelog: added in v8.3 diff --git a/docs/grid/api/grid_headerrowheight_config.md b/docs/grid/api/grid_headerrowheight_config.md index 5810421c..70a52299 100644 --- a/docs/grid/api/grid_headerrowheight_config.md +++ b/docs/grid/api/grid_headerrowheight_config.md @@ -15,9 +15,18 @@ description: You can explore the headerRowHeight config of Grid in the documenta @example: const grid = new dhx.Grid("grid_container", { columns: [ - // columns config + { + id: "country", width: 200, + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + }, + { + id: "region", width: 200, + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + }, ], - headerRowHeight: [50, "auto"] + // level 0 -> 56px, level 1 -> adjusts to its content, level 2 -> 32px + headerRowHeight: [56, "auto", 32], + data: dataset, }); @descr: @@ -40,9 +49,17 @@ The `headerRowHeight` property defines how tall those levels are and can be set ~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ - // columns config + { + id: "country", width: 200, + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + }, + { + id: "region", width: 200, + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + }, ], - headerRowHeight: 50 // both levels are 50px tall + headerRowHeight: 56, // all the three levels are 56px tall + data: dataset, }); ~~~ @@ -51,14 +68,51 @@ const grid = new dhx.Grid("grid_container", { ~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ - // columns config + { + id: "country", width: 200, + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + }, + { + id: "region", width: 200, + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + }, ], - headerRowHeight: [60, "auto"] // the first level is 60px tall, the second one fits its content + // level 0 -> 56px, level 1 -> adjusts to its content, level 2 -> 32px + headerRowHeight: [56, "auto", 32], + data: dataset, }); ~~~ +:::tip pro version only +Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. + +In the GPL version the array form itself works, individual pixel heights per level are fully supported, but an *"auto"* item is accepted and silently degrades: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values in the GPL version. +::: + +This is how the height of a level is resolved: + +| `headerRowHeight` | Level | Height | Text wrapping | +| -------- | ----- | ------ | ------------- | +| *number* | any | the number | no | +| *array* | a *number* item | the item | no | +| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40 | yes | +| *array* | beyond the array length | 40 | no | + +Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. + The total height of the header is calculated as a sum of all level heights in it. +### Relation to `headerAutoHeight` + +The [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes every level of the header fit its content. The array form of `headerRowHeight` is more specific, so it wins: + +- if `headerRowHeight` is set as an array, `headerAutoHeight` is ignored for the header entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in +- if `headerRowHeight` is set as a number, `headerAutoHeight` works as before: every level fits its content but is never shorter than `headerRowHeight` + +### Export + +The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. + @changelog: the array value with individual level heights and the *"auto"* keyword were added in v9.4 [comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#headerfooter-height) diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index d4429b04..54d5d885 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1602,13 +1602,41 @@ When the property is set as an array, the item at index *i* describes level *i*, // individual height for each level of the header/footer const grid = new dhx.Grid("grid_container", { columns: [ - // columns config + { + id: "country", width: 200, + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + }, + { + id: "region", width: 200, + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + }, ], - headerRowHeight: [60, "auto"], // the first level is 60px tall, the second one fits its content - footerRowHeight: ["auto", 60] // the first level fits its content, the second one is 60px tall + // level 0 -> 56px, level 1 -> adjusts to its content, level 2 -> 32px + headerRowHeight: [56, "auto", 32], + footerRowHeight: [40, "auto"], + data: dataset, }); ~~~ +:::tip pro version only +Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. + +In the GPL version the array form itself works, individual pixel heights per level are fully supported, but an *"auto"* item is accepted and silently degrades: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values in the GPL version. +::: + +This is how the height of a level is resolved: + +| `headerRowHeight` / `footerRowHeight` | Level | Height | Text wrapping | +| -------- | ----- | ------ | ------------- | +| *number* | any | the number | no | +| *array* | a *number* item | the item | no | +| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40 | yes | +| *array* | beyond the array length | 40 | no | + +Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. + +The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. + **Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) 2. Provide the automatic adjustment of the header/footer height for the content to fit in @@ -1640,6 +1668,13 @@ const grid2 = new dhx.Grid("grid", { **Related sample**: [Grid. Header/footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d?tag=grid) +Both configuration options make every level of the zone fit its content. The array form of `headerRowHeight`/`footerRowHeight` is more specific, so it wins: + +- if `headerRowHeight` is set as an array, `headerAutoHeight` is ignored for the header entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in +- if `headerRowHeight` is set as a number, `headerAutoHeight` works as before: every level fits its content but is never shorter than `headerRowHeight` + +The same pair of rules applies to `footerRowHeight` and `footerAutoHeight`. + ### Footer position :::tip pro version only From 0c73a58c49e7e57959993e3f3f94a4632d55e044 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Thu, 27 Aug 2026 13:41:04 +0300 Subject: [PATCH 3/5] [update] restructure header/footer row height docs - both API pages rebuilt with explicit sections: Description, Usage, Default config, Example, levels, PRO note, Height resolution rules, autoHeight relation, export - examples now use one shared grid config: 3 header levels on the header page, 2 footer levels on the footer page - PRO restriction of the "auto" item stated in a tip box next to the signature and in an info box after the array example - Related API, Related article and Related samples blocks added, the new snippet 1hf173dk linked - exportConfig docs note that the overridden row height may be an array - restored the original short descriptions and the "sum of all row heights" wording --- docs/grid/api/grid_exportconfig_config.md | 2 + docs/grid/api/grid_footerrowheight_config.md | 106 ++++++++++++++----- docs/grid/api/grid_headerrowheight_config.md | 66 ++++++++---- docs/grid/configuration.md | 18 ++-- docs/grid/usage.md | 2 + 5 files changed, 141 insertions(+), 53 deletions(-) diff --git a/docs/grid/api/grid_exportconfig_config.md b/docs/grid/api/grid_exportconfig_config.md index 78b72a2a..3fde9df1 100644 --- a/docs/grid/api/grid_exportconfig_config.md +++ b/docs/grid/api/grid_exportconfig_config.md @@ -46,6 +46,8 @@ and returns a configuration object with export parameters. The returned configur - `typeConfig` - (*object*) an object containing unique settings for the specific format (filenames, delimiters, themes) - **Grid properties** - any Grid property that should be overridden (e.g., `headerRowHeight`) set as a `key:value` pair, where the *key* is the property name and the *value* is the property value to be applied only to the exported state +You can override `headerRowHeight`/`footerRowHeight` with an array as well, so that the individual level heights differ in the exported file. Note that the callback receives `config.headerRowHeight`/`config.footerRowHeight` either as a *number* or as an *array*. + #### Examples - Example 1: Conditional filtering and formatting diff --git a/docs/grid/api/grid_footerrowheight_config.md b/docs/grid/api/grid_footerrowheight_config.md index de4c50f8..5595ddb0 100644 --- a/docs/grid/api/grid_footerrowheight_config.md +++ b/docs/grid/api/grid_footerrowheight_config.md @@ -6,48 +6,96 @@ description: You can explore the footerRowHeight config of Grid in the documenta # footerRowHeight -@short: Optional. Sets the height of rows (levels) in the footer +### Description -@signature: {'footerRowHeight?: number | (number | "auto")[];'} +@short: Optional. Sets the height of rows in the footer -@default: 40 +### Usage -@example: +~~~jsx +footerRowHeight?: number | (number | "auto")[]; +~~~ + +:::tip pro version only +The "auto" value is a PRO feature. +::: + +### Default config + +~~~jsx +footerRowHeight: 40 +~~~ + +### Example +~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ - // columns config, with 2 levels in the `footer` array of a column + { + id: "country", width: 200, + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + footer: [{ text: "Total", rowspan: 2 }], + }, + { + id: "region", width: 200, + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + footer: [{ text: "Count" }, { text: "The number of the listed countries" }], + }, ], // level 0 -> 40px, level 1 -> adjusts to its content footerRowHeight: [40, "auto"], data: dataset, }); +~~~ -@descr: +### Footer levels and their height -**Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) +Grid renders the footer as a stack of **levels** (rows). The number of levels is defined by the longest `footer` array among the columns: -Grid renders the footer as a stack of levels (rows). The number of levels is defined by the longest `footer` array among the columns, the same way as it works for the header, see the [Header/footer height](grid/configuration.md#headerfooter-height) section of the Configuration guide. +~~~jsx +columns: [ + { id: "country", footer: [{ text: "Total", rowspan: 2 }] }, + { id: "region", footer: [{ text: "Count" }, { text: "The number of the listed countries" }] }, // 2 levels +] +~~~ The `footerRowHeight` property defines how tall those levels are and can be set in two ways: -- as a *number* - the same height, in pixels, is applied to every level of the footer: +- as a **number** - the same height, in pixels, is applied to every level of the footer: ~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ - // columns config + { + id: "country", width: 200, + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + footer: [{ text: "Total", rowspan: 2 }], + }, + { + id: "region", width: 200, + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + footer: [{ text: "Count" }, { text: "The number of the listed countries" }], + }, ], - footerRowHeight: 56, // all the levels of the footer are 56px tall + footerRowHeight: 56, // both levels are 56px tall data: dataset, }); ~~~ -- as an *array* - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword, which adjusts the level height to its content: +- as an **array** - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword (**PRO version only**), which adjusts the level height to its content: ~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ - // columns config + { + id: "country", width: 200, + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + footer: [{ text: "Total", rowspan: 2 }], + }, + { + id: "region", width: 200, + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + footer: [{ text: "Count" }, { text: "The number of the listed countries" }], + }, ], // level 0 -> 40px, level 1 -> adjusts to its content footerRowHeight: [40, "auto"], @@ -55,13 +103,13 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -:::tip pro version only -Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. +:::info +Note that the *"auto"* value is a PRO feature. Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. -In the GPL version the array form itself works, individual pixel heights per level are fully supported, but an *"auto"* item is accepted and silently degrades: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values in the GPL version. +In the GPL version, the array form works too: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. ::: -This is how the height of a level is resolved: +### Height resolution rules | `footerRowHeight` | Level | Height | Text wrapping | | -------- | ----- | ------ | ------------- | @@ -72,19 +120,29 @@ This is how the height of a level is resolved: Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. -The total height of the footer is calculated as a sum of all level heights in it. +The height of the footer is calculated as a sum of all row heights in it. ### Relation to `footerAutoHeight` -The [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes every level of the footer fit its content. The array form of `footerRowHeight` is more specific, so it wins: +The [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes **every** level of the footer fit its content. The array form of `footerRowHeight` defines the height of each level explicitly, therefore it takes precedence over `footerAutoHeight`: -- if `footerRowHeight` is set as an array, `footerAutoHeight` is ignored for the footer entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in -- if `footerRowHeight` is set as a number, `footerAutoHeight` works as before: every level fits its content but is never shorter than `footerRowHeight` +- if `footerRowHeight` is set as an **array**, `footerAutoHeight` is ignored for the footer entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in +- if `footerRowHeight` is set as a **number**, `footerAutoHeight` works as before: every level fits its content but is never shorter than `footerRowHeight` -### Export +### Level heights in the export The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. -@changelog: the array value with individual level heights and the *"auto"* keyword were added in v9.4 +**Change log**: the array value with individual level heights and the *"auto"* keyword were added in v9.4 + +**Related API:** +- [`headerRowHeight`](grid/api/grid_headerrowheight_config.md) +- [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) +- [`autoHeight`](grid/api/grid_autoheight_config.md) +- [`rowHeight`](grid/api/grid_rowheight_config.md) + +**Related article**: [Header/footer height](grid/configuration.md#headerfooter-height) -[comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#headerfooter-height) +**Related samples**: +- [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) +- [Grid. Individual height of the header/footer rows](https://snippet.dhtmlx.com/1hf173dk) diff --git a/docs/grid/api/grid_headerrowheight_config.md b/docs/grid/api/grid_headerrowheight_config.md index 70a52299..0a4daa84 100644 --- a/docs/grid/api/grid_headerrowheight_config.md +++ b/docs/grid/api/grid_headerrowheight_config.md @@ -6,13 +6,28 @@ description: You can explore the headerRowHeight config of Grid in the documenta # headerRowHeight -@short: Optional. Sets the height of rows (levels) in the header +### Description -@signature: {'headerRowHeight?: number | (number | "auto")[];'} +@short: Optional. Sets the height of rows in the header -@default: 40 +### Usage -@example: +~~~jsx +headerRowHeight?: number | (number | "auto")[]; +~~~ + +:::tip pro version only +The "auto" value is a PRO feature. +::: + +### Default config + +~~~jsx +headerRowHeight: 40 +~~~ + +### Example +~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ { @@ -28,12 +43,11 @@ const grid = new dhx.Grid("grid_container", { headerRowHeight: [56, "auto", 32], data: dataset, }); +~~~ -@descr: - -**Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) +### Header levels and their height -Grid renders the header as a stack of levels (rows). The number of levels is defined by the longest `header` array among the columns: +Grid renders the header as a stack of **levels** (rows). The number of levels is defined by the longest `header` array among the columns: ~~~jsx columns: [ @@ -44,7 +58,7 @@ columns: [ The `headerRowHeight` property defines how tall those levels are and can be set in two ways: -- as a *number* - the same height, in pixels, is applied to every level of the header: +- as a **number** - the same height, in pixels, is applied to every level of the header: ~~~jsx const grid = new dhx.Grid("grid_container", { @@ -63,7 +77,7 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -- as an *array* - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword, which adjusts the level height to its content: +- as an **array** - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword (**PRO version only**), which adjusts the level height to its content: ~~~jsx const grid = new dhx.Grid("grid_container", { @@ -83,13 +97,13 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -:::tip pro version only -Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. +:::info +Note that the *"auto"* value is a PRO feature. Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. -In the GPL version the array form itself works, individual pixel heights per level are fully supported, but an *"auto"* item is accepted and silently degrades: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values in the GPL version. +In the GPL version, the array form works too: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. ::: -This is how the height of a level is resolved: +### Height resolution rules | `headerRowHeight` | Level | Height | Text wrapping | | -------- | ----- | ------ | ------------- | @@ -100,19 +114,29 @@ This is how the height of a level is resolved: Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. -The total height of the header is calculated as a sum of all level heights in it. +The height of the header is calculated as a sum of all row heights in it. ### Relation to `headerAutoHeight` -The [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes every level of the header fit its content. The array form of `headerRowHeight` is more specific, so it wins: +The [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes **every** level of the header fit its content. The array form of `headerRowHeight` defines the height of each level explicitly, therefore it takes precedence over `headerAutoHeight`: -- if `headerRowHeight` is set as an array, `headerAutoHeight` is ignored for the header entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in -- if `headerRowHeight` is set as a number, `headerAutoHeight` works as before: every level fits its content but is never shorter than `headerRowHeight` +- if `headerRowHeight` is set as an **array**, `headerAutoHeight` is ignored for the header entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in +- if `headerRowHeight` is set as a **number**, `headerAutoHeight` works as before: every level fits its content but is never shorter than `headerRowHeight` -### Export +### Level heights in the export The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. -@changelog: the array value with individual level heights and the *"auto"* keyword were added in v9.4 +**Change log**: the array value with individual level heights and the *"auto"* keyword were added in v9.4 + +**Related API:** +- [`footerRowHeight`](grid/api/grid_footerrowheight_config.md) +- [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) +- [`autoHeight`](grid/api/grid_autoheight_config.md) +- [`rowHeight`](grid/api/grid_rowheight_config.md) + +**Related article**: [Header/footer height](grid/configuration.md#headerfooter-height) -[comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#headerfooter-height) +**Related samples**: +- [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) +- [Grid. Individual height of the header/footer rows](https://snippet.dhtmlx.com/1hf173dk) diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 54d5d885..33431020 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1581,7 +1581,7 @@ columns: [ ] ~~~ -The height of the header/footer of Grid is calculated as a sum of the levels which are included into it. To set the height of the levels, use the [`headerRowHeight`](grid/api/grid_headerrowheight_config.md)/[`footerRowHeight`](grid/api/grid_footerrowheight_config.md) properties, correspondingly. Each of them can be set either as a *number*, which is applied to every level of the zone, or as an *array*, which sizes the levels individually. +The height of the header/footer of Grid is calculated as a sum of rows which are included into it. To set the height of a row inside the header/footer, use the [`headerRowHeight`](grid/api/grid_headerrowheight_config.md)/[`footerRowHeight`](grid/api/grid_footerrowheight_config.md) properties, correspondingly. Each of them can be set either as a **number**, which is applied to every level of the zone, or as an **array**, which sizes the levels individually. The default value of the mentioned properties is 40. @@ -1596,7 +1596,7 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -When the property is set as an array, the item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword, which adjusts the level height to its content: +When the property is set as an array, the item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword (**PRO version only**), which adjusts the level height to its content: ~~~jsx // individual height for each level of the header/footer @@ -1621,10 +1621,10 @@ const grid = new dhx.Grid("grid_container", { :::tip pro version only Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. -In the GPL version the array form itself works, individual pixel heights per level are fully supported, but an *"auto"* item is accepted and silently degrades: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values in the GPL version. +In the GPL version, the array form works too: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. ::: -This is how the height of a level is resolved: +The height of a level is resolved as follows: | `headerRowHeight` / `footerRowHeight` | Level | Height | Text wrapping | | -------- | ----- | ------ | ------------- | @@ -1637,7 +1637,9 @@ Extra array items are ignored: an array longer than the actual number of levels The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. -**Related sample**: [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) +**Related samples**: +- [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) +- [Grid. Individual height of the header/footer rows](https://snippet.dhtmlx.com/1hf173dk) 2. Provide the automatic adjustment of the header/footer height for the content to fit in @@ -1668,10 +1670,10 @@ const grid2 = new dhx.Grid("grid", { **Related sample**: [Grid. Header/footer autoHeight mode](https://snippet.dhtmlx.com/jwz9k66d?tag=grid) -Both configuration options make every level of the zone fit its content. The array form of `headerRowHeight`/`footerRowHeight` is more specific, so it wins: +Both configuration options make **every** level of the zone fit its content. The array form of `headerRowHeight`/`footerRowHeight` defines the height of each level explicitly, therefore it takes precedence over `headerAutoHeight`/`footerAutoHeight`: -- if `headerRowHeight` is set as an array, `headerAutoHeight` is ignored for the header entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in -- if `headerRowHeight` is set as a number, `headerAutoHeight` works as before: every level fits its content but is never shorter than `headerRowHeight` +- if `headerRowHeight` is set as an **array**, `headerAutoHeight` is ignored for the header entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in +- if `headerRowHeight` is set as a **number**, `headerAutoHeight` works as before: every level fits its content but is never shorter than `headerRowHeight` The same pair of rules applies to `footerRowHeight` and `footerAutoHeight`. diff --git a/docs/grid/usage.md b/docs/grid/usage.md index 67984238..f4255360 100644 --- a/docs/grid/usage.md +++ b/docs/grid/usage.md @@ -601,6 +601,8 @@ The returned configuration object may contain the following properties: - `typeConfig` - (*object*) an object containing unique settings for the specific format (filenames, delimiters, themes) - **Grid properties** - any Grid property that should be overridden (e.g., `headerRowHeight`) set as a `key:value` pair, where the *key* is the property name and the *value* is the property value to be applied only to the exported state +You can override `headerRowHeight`/`footerRowHeight` with an array as well, so that the individual level heights differ in the exported file. Note that the callback receives `config.headerRowHeight`/`config.footerRowHeight` either as a *number* or as an *array*. + #### Example 1: Conditional filtering and formatting In this example, sensitive data is excluded for all formats, while for PDF/PNG the headers are converted to the uppercase and HTML templates are disabled: From 32ddc95589a2e53194349441041cccab4f3e4e8f Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Thu, 27 Aug 2026 16:49:19 +0300 Subject: [PATCH 4/5] [update] tidy up header/footer row height docs - levels snippets now use the same columns config as the other examples on the page - number and array forms shown as value fragments, the full config is given once in the Example - PRO restriction of "auto" consolidated in the box next to the signature, the info box keeps the GPL behavior only - Description heading dropped, px units and the comma before the relative clause fixed - container id normalized to grid_container in the autoHeight examples of both API pages and the guide --- docs/grid/api/grid_footerautoheight_config.md | 2 +- docs/grid/api/grid_footerrowheight_config.md | 54 ++++--------------- docs/grid/api/grid_headerautoheight_config.md | 2 +- docs/grid/api/grid_headerrowheight_config.md | 54 +++++-------------- docs/grid/configuration.md | 23 ++++---- 5 files changed, 33 insertions(+), 102 deletions(-) diff --git a/docs/grid/api/grid_footerautoheight_config.md b/docs/grid/api/grid_footerautoheight_config.md index 61f49eea..34e2fc3d 100644 --- a/docs/grid/api/grid_footerautoheight_config.md +++ b/docs/grid/api/grid_footerautoheight_config.md @@ -17,7 +17,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac @default: false @example: -const grid = new dhx.Grid("grid", { +const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], diff --git a/docs/grid/api/grid_footerrowheight_config.md b/docs/grid/api/grid_footerrowheight_config.md index 5595ddb0..c9b02605 100644 --- a/docs/grid/api/grid_footerrowheight_config.md +++ b/docs/grid/api/grid_footerrowheight_config.md @@ -6,8 +6,6 @@ description: You can explore the footerRowHeight config of Grid in the documenta # footerRowHeight -### Description - @short: Optional. Sets the height of rows in the footer ### Usage @@ -17,7 +15,7 @@ footerRowHeight?: number | (number | "auto")[]; ~~~ :::tip pro version only -The "auto" value is a PRO feature. +The "auto" value is a PRO feature. Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. ::: ### Default config @@ -58,55 +56,23 @@ columns: [ ] ~~~ -The `footerRowHeight` property defines how tall those levels are and can be set in two ways: +The `footerRowHeight` property defines the height of those levels. You can set it in two ways: - as a **number** - the same height, in pixels, is applied to every level of the footer: ~~~jsx -const grid = new dhx.Grid("grid_container", { - columns: [ - { - id: "country", width: 200, - header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], - footer: [{ text: "Total", rowspan: 2 }], - }, - { - id: "region", width: 200, - header: ["", { text: "Region" }, { text: "Subregion of the world" }], - footer: [{ text: "Count" }, { text: "The number of the listed countries" }], - }, - ], - footerRowHeight: 56, // both levels are 56px tall - data: dataset, -}); +footerRowHeight: 56 // the height of both levels is 56px ~~~ - as an **array** - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword (**PRO version only**), which adjusts the level height to its content: ~~~jsx -const grid = new dhx.Grid("grid_container", { - columns: [ - { - id: "country", width: 200, - header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], - footer: [{ text: "Total", rowspan: 2 }], - }, - { - id: "region", width: 200, - header: ["", { text: "Region" }, { text: "Subregion of the world" }], - footer: [{ text: "Count" }, { text: "The number of the listed countries" }], - }, - ], - // level 0 -> 40px, level 1 -> adjusts to its content - footerRowHeight: [40, "auto"], - data: dataset, -}); +// level 0 -> 40px, level 1 -> adjusts to its content +footerRowHeight: [40, "auto"] ~~~ :::info -Note that the *"auto"* value is a PRO feature. Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. - -In the GPL version, the array form works too: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. +In the GPL version, the array form still works: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. ::: ### Height resolution rules @@ -115,16 +81,16 @@ In the GPL version, the array form works too: individual pixel heights per level | -------- | ----- | ------ | ------------- | | *number* | any | the number | no | | *array* | a *number* item | the item | no | -| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40 | yes | -| *array* | beyond the array length | 40 | no | +| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40px | yes | +| *array* | beyond the array length | 40px | no | -Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. +Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40px. The height of the footer is calculated as a sum of all row heights in it. ### Relation to `footerAutoHeight` -The [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes **every** level of the footer fit its content. The array form of `footerRowHeight` defines the height of each level explicitly, therefore it takes precedence over `footerAutoHeight`: +The [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md), which turns it on for the whole component, makes **every** level of the footer fit its content. The array form of `footerRowHeight` defines the height of each level explicitly, therefore it takes precedence over `footerAutoHeight`: - if `footerRowHeight` is set as an **array**, `footerAutoHeight` is ignored for the footer entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in - if `footerRowHeight` is set as a **number**, `footerAutoHeight` works as before: every level fits its content but is never shorter than `footerRowHeight` diff --git a/docs/grid/api/grid_headerautoheight_config.md b/docs/grid/api/grid_headerautoheight_config.md index f3157c04..af6bb64c 100644 --- a/docs/grid/api/grid_headerautoheight_config.md +++ b/docs/grid/api/grid_headerautoheight_config.md @@ -17,7 +17,7 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac @default: false @example: -const grid = new dhx.Grid("grid", { +const grid = new dhx.Grid("grid_container", { columns: [ // columns config ], diff --git a/docs/grid/api/grid_headerrowheight_config.md b/docs/grid/api/grid_headerrowheight_config.md index 0a4daa84..6d9dffd0 100644 --- a/docs/grid/api/grid_headerrowheight_config.md +++ b/docs/grid/api/grid_headerrowheight_config.md @@ -6,8 +6,6 @@ description: You can explore the headerRowHeight config of Grid in the documenta # headerRowHeight -### Description - @short: Optional. Sets the height of rows in the header ### Usage @@ -17,7 +15,7 @@ headerRowHeight?: number | (number | "auto")[]; ~~~ :::tip pro version only -The "auto" value is a PRO feature. +The "auto" value is a PRO feature. Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. ::: ### Default config @@ -51,56 +49,28 @@ Grid renders the header as a stack of **levels** (rows). The number of levels is ~~~jsx columns: [ - { id: "country", header: [{ text: "Region", colspan: 2 }, { text: "Country" }] }, // 2 levels - { id: "population", header: ["", { text: "Population" }] }, + { id: "country", header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }] }, // 3 levels + { id: "region", header: ["", { text: "Region" }, { text: "Subregion of the world" }] }, ] ~~~ -The `headerRowHeight` property defines how tall those levels are and can be set in two ways: +The `headerRowHeight` property defines the height of those levels. You can set it in two ways: - as a **number** - the same height, in pixels, is applied to every level of the header: ~~~jsx -const grid = new dhx.Grid("grid_container", { - columns: [ - { - id: "country", width: 200, - header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], - }, - { - id: "region", width: 200, - header: ["", { text: "Region" }, { text: "Subregion of the world" }], - }, - ], - headerRowHeight: 56, // all the three levels are 56px tall - data: dataset, -}); +headerRowHeight: 56 // the height of all the three levels is 56px ~~~ - as an **array** - the levels are sized individually. The item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword (**PRO version only**), which adjusts the level height to its content: ~~~jsx -const grid = new dhx.Grid("grid_container", { - columns: [ - { - id: "country", width: 200, - header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], - }, - { - id: "region", width: 200, - header: ["", { text: "Region" }, { text: "Subregion of the world" }], - }, - ], - // level 0 -> 56px, level 1 -> adjusts to its content, level 2 -> 32px - headerRowHeight: [56, "auto", 32], - data: dataset, -}); +// level 0 -> 56px, level 1 -> adjusts to its content, level 2 -> 32px +headerRowHeight: [56, "auto", 32] ~~~ :::info -Note that the *"auto"* value is a PRO feature. Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. - -In the GPL version, the array form works too: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. +In the GPL version, the array form still works: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. ::: ### Height resolution rules @@ -109,16 +79,16 @@ In the GPL version, the array form works too: individual pixel heights per level | -------- | ----- | ------ | ------------- | | *number* | any | the number | no | | *array* | a *number* item | the item | no | -| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40 | yes | -| *array* | beyond the array length | 40 | no | +| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40px | yes | +| *array* | beyond the array length | 40px | no | -Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. +Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40px. The height of the header is calculated as a sum of all row heights in it. ### Relation to `headerAutoHeight` -The [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md) which turns it on for the whole component, makes **every** level of the header fit its content. The array form of `headerRowHeight` defines the height of each level explicitly, therefore it takes precedence over `headerAutoHeight`: +The [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) config, as well as [`autoHeight`](grid/api/grid_autoheight_config.md), which turns it on for the whole component, makes **every** level of the header fit its content. The array form of `headerRowHeight` defines the height of each level explicitly, therefore it takes precedence over `headerAutoHeight`: - if `headerRowHeight` is set as an **array**, `headerAutoHeight` is ignored for the header entirely, including the levels which the array does not cover. Use the *"auto"* items to opt individual levels in - if `headerRowHeight` is set as a **number**, `headerAutoHeight` works as before: every level fits its content but is never shorter than `headerRowHeight` diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index 33431020..b672a3ad 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1576,8 +1576,8 @@ Grid renders the header and the footer as a stack of levels (rows). The number o ~~~jsx columns: [ - { id: "country", header: [{ text: "Region", colspan: 2 }, { text: "Country" }] }, // 2 levels - { id: "population", header: ["", { text: "Population" }] }, + { id: "country", header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }] }, // 3 levels + { id: "region", header: ["", { text: "Region" }, { text: "Subregion of the world" }] }, ] ~~~ @@ -1587,13 +1587,8 @@ The default value of the mentioned properties is 40. ~~~jsx // the same height for all the levels of the header/footer -const grid = new dhx.Grid("grid_container", { - columns: [ - // columns config - ], - footerRowHeight: 50, - headerRowHeight: 50 -}); +headerRowHeight: 50, +footerRowHeight: 50 ~~~ When the property is set as an array, the item at index *i* describes level *i*, counting from the topmost one. An item can be either a height in pixels or the *"auto"* keyword (**PRO version only**), which adjusts the level height to its content: @@ -1630,10 +1625,10 @@ The height of a level is resolved as follows: | -------- | ----- | ------ | ------------- | | *number* | any | the number | no | | *array* | a *number* item | the item | no | -| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40 | yes | -| *array* | beyond the array length | 40 | no | +| *array* | an *"auto"* item (**PRO version only**) | fits the content, at least 40px | yes | +| *array* | beyond the array length | 40px | no | -Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40. +Extra array items are ignored: an array longer than the actual number of levels does not add levels. A non-positive or non-numeric item falls back to the default 40px. The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. @@ -1647,7 +1642,7 @@ Use the [](grid/api/grid_headerautoheight_config.md) and [](grid/api/grid_footer ~~~jsx // enabling autoheight only in the content -const grid1 = new dhx.Grid("grid", { +const grid1 = new dhx.Grid("grid_container", { columns: [ // columns config ], @@ -1658,7 +1653,7 @@ const grid1 = new dhx.Grid("grid", { }); // enabling autoheight only in the header -const grid2 = new dhx.Grid("grid", { +const grid2 = new dhx.Grid("grid_container", { columns: [ // columns config ], From 37c87676c6eae9953da91f556f73acb2730b6b83 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 28 Aug 2026 17:10:39 +0300 Subject: [PATCH 5/5] [update] note the array row height in related configs - autoHeight, headerAutoHeight and footerAutoHeight document that they are ignored for a zone with an array row height, with the v9.4 entry added to their changelogs - autoHeight page: related comments replaced with visible Related API and Related article blocks - exportConfig and the export guide state that config.headerRowHeight/config.footerRowHeight can be a number or an array - guide example got footers so that footerRowHeight has levels to size, plus per-property level comments - footer page example uses two plain footer levels instead of a rowspan cell - consistency pass: bulleted change logs, no trailing comma after data: dataset, restored numbering of the second way --- docs/grid/api/grid_autoheight_config.md | 16 +++++++++++++--- docs/grid/api/grid_exportconfig_config.md | 4 +++- docs/grid/api/grid_footerautoheight_config.md | 5 ++++- docs/grid/api/grid_footerrowheight_config.md | 15 ++++++++------- docs/grid/api/grid_headerautoheight_config.md | 5 ++++- docs/grid/api/grid_headerrowheight_config.md | 9 +++++---- docs/grid/configuration.md | 19 +++++++++++++++---- docs/grid/usage.md | 4 +++- 8 files changed, 55 insertions(+), 22 deletions(-) diff --git a/docs/grid/api/grid_autoheight_config.md b/docs/grid/api/grid_autoheight_config.md index 031e402d..4074bec0 100644 --- a/docs/grid/api/grid_autoheight_config.md +++ b/docs/grid/api/grid_autoheight_config.md @@ -54,6 +54,8 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ +The autoheight of a zone is ignored when [`headerRowHeight`](grid/api/grid_headerrowheight_config.md)/[`footerRowHeight`](grid/api/grid_footerrowheight_config.md) is set as an array: in that case the height of each level is defined by the corresponding array item, and only the *"auto"* items fit their content. + #### Take into account the information below: - to optimize performance, you should specify `htmlEnable: true` in the configuration object of the column which contains HTML content @@ -63,8 +65,16 @@ const grid = new dhx.Grid("grid_container", { - note that if you decide to change the font type, its size and offsets, correct calculation of the cell's autoHeight can't be ensured -@changelog: added in v7.1 +@changelog: + +- Since v9.4, the autoheight of the header/footer is ignored when `headerRowHeight`/`footerRowHeight` is set as an array +- Added in v7.1 -[comment]: # (@relatedapi: grid/api/grid_data_config.md) +**Related API:** +- [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) +- [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) +- [`headerRowHeight`](grid/api/grid_headerrowheight_config.md) +- [`footerRowHeight`](grid/api/grid_footerrowheight_config.md) +- [`data`](grid/api/grid_data_config.md) -[comment]: # (@related: grid/initialization.md#initialize-grid grid/configuration.md#autoheight-for-rows) +**Related article**: [Autoheight for rows](grid/configuration.md#autoheight-for-rows) diff --git a/docs/grid/api/grid_exportconfig_config.md b/docs/grid/api/grid_exportconfig_config.md index 3fde9df1..beaf925b 100644 --- a/docs/grid/api/grid_exportconfig_config.md +++ b/docs/grid/api/grid_exportconfig_config.md @@ -46,7 +46,9 @@ and returns a configuration object with export parameters. The returned configur - `typeConfig` - (*object*) an object containing unique settings for the specific format (filenames, delimiters, themes) - **Grid properties** - any Grid property that should be overridden (e.g., `headerRowHeight`) set as a `key:value` pair, where the *key* is the property name and the *value* is the property value to be applied only to the exported state -You can override `headerRowHeight`/`footerRowHeight` with an array as well, so that the individual level heights differ in the exported file. Note that the callback receives `config.headerRowHeight`/`config.footerRowHeight` either as a *number* or as an *array*. +:::note +In the callback, `config.headerRowHeight`/`config.footerRowHeight` can be a *number* or an *array*. Pass an array to keep individual level heights in the exported file, see [Header/footer height](grid/configuration.md#headerfooter-height). +::: #### Examples diff --git a/docs/grid/api/grid_footerautoheight_config.md b/docs/grid/api/grid_footerautoheight_config.md index 34e2fc3d..35eabc03 100644 --- a/docs/grid/api/grid_footerautoheight_config.md +++ b/docs/grid/api/grid_footerautoheight_config.md @@ -34,6 +34,9 @@ Redefines the [autoHeight](grid/api/grid_autoheight_config.md) config for the fo Ignored when [`footerRowHeight`](grid/api/grid_footerrowheight_config.md) is set as an array: in that case the height of each level of the footer is defined by the corresponding array item, and only the *"auto"* items fit their content. -@changelog: added in v8.3 +@changelog: + +- Since v9.4, ignored when `footerRowHeight` is set as an array +- Added in v8.3 diff --git a/docs/grid/api/grid_footerrowheight_config.md b/docs/grid/api/grid_footerrowheight_config.md index c9b02605..9504b314 100644 --- a/docs/grid/api/grid_footerrowheight_config.md +++ b/docs/grid/api/grid_footerrowheight_config.md @@ -31,17 +31,17 @@ const grid = new dhx.Grid("grid_container", { { id: "country", width: 200, header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], - footer: [{ text: "Total", rowspan: 2 }], + footer: [{ text: "Total" }, { text: "The number of the listed countries" }], }, { id: "region", width: 200, header: ["", { text: "Region" }, { text: "Subregion of the world" }], - footer: [{ text: "Count" }, { text: "The number of the listed countries" }], + footer: [{ text: "Unique" }, { text: "The number of the distinct regions" }], }, ], // level 0 -> 40px, level 1 -> adjusts to its content footerRowHeight: [40, "auto"], - data: dataset, + data: dataset }); ~~~ @@ -51,8 +51,8 @@ Grid renders the footer as a stack of **levels** (rows). The number of levels is ~~~jsx columns: [ - { id: "country", footer: [{ text: "Total", rowspan: 2 }] }, - { id: "region", footer: [{ text: "Count" }, { text: "The number of the listed countries" }] }, // 2 levels + { id: "country", footer: [{ text: "Total" }, { text: "The number of the listed countries" }] }, // 2 levels + { id: "region", footer: [{ text: "Unique" }, { text: "The number of the distinct regions" }] } ] ~~~ @@ -99,7 +99,8 @@ The [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) config, as we The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. -**Change log**: the array value with individual level heights and the *"auto"* keyword were added in v9.4 +**Change log**: +- the array value with individual level heights and the *"auto"* keyword were added in v9.4 **Related API:** - [`headerRowHeight`](grid/api/grid_headerrowheight_config.md) @@ -109,6 +110,6 @@ The per-level heights are carried over to the [export](grid/usage.md#exporting-d **Related article**: [Header/footer height](grid/configuration.md#headerfooter-height) -**Related samples**: +**Related samples**: - [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) - [Grid. Individual height of the header/footer rows](https://snippet.dhtmlx.com/1hf173dk) diff --git a/docs/grid/api/grid_headerautoheight_config.md b/docs/grid/api/grid_headerautoheight_config.md index af6bb64c..f055f8a8 100644 --- a/docs/grid/api/grid_headerautoheight_config.md +++ b/docs/grid/api/grid_headerautoheight_config.md @@ -34,4 +34,7 @@ Redefines the [autoHeight](grid/api/grid_autoheight_config.md) config for the he Ignored when [`headerRowHeight`](grid/api/grid_headerrowheight_config.md) is set as an array: in that case the height of each level of the header is defined by the corresponding array item, and only the *"auto"* items fit their content. -@changelog: added in v8.3 +@changelog: + +- Since v9.4, ignored when `headerRowHeight` is set as an array +- Added in v8.3 diff --git a/docs/grid/api/grid_headerrowheight_config.md b/docs/grid/api/grid_headerrowheight_config.md index 6d9dffd0..5661e0a2 100644 --- a/docs/grid/api/grid_headerrowheight_config.md +++ b/docs/grid/api/grid_headerrowheight_config.md @@ -39,7 +39,7 @@ const grid = new dhx.Grid("grid_container", { ], // level 0 -> 56px, level 1 -> adjusts to its content, level 2 -> 32px headerRowHeight: [56, "auto", 32], - data: dataset, + data: dataset }); ~~~ @@ -50,7 +50,7 @@ Grid renders the header as a stack of **levels** (rows). The number of levels is ~~~jsx columns: [ { id: "country", header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }] }, // 3 levels - { id: "region", header: ["", { text: "Region" }, { text: "Subregion of the world" }] }, + { id: "region", header: ["", { text: "Region" }, { text: "Subregion of the world" }] } ] ~~~ @@ -97,7 +97,8 @@ The [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md) config, as we The per-level heights are carried over to the [export](grid/usage.md#exporting-data): the XLSX header and footer rows keep their individual heights, and the PDF/PNG snapshot uses the correct total height of the zone. -**Change log**: the array value with individual level heights and the *"auto"* keyword were added in v9.4 +**Change log**: +- the array value with individual level heights and the *"auto"* keyword were added in v9.4 **Related API:** - [`footerRowHeight`](grid/api/grid_footerrowheight_config.md) @@ -107,6 +108,6 @@ The per-level heights are carried over to the [export](grid/usage.md#exporting-d **Related article**: [Header/footer height](grid/configuration.md#headerfooter-height) -**Related samples**: +**Related samples**: - [Grid. Header, footer and rows height](https://snippet.dhtmlx.com/wjcjl80i) - [Grid. Individual height of the header/footer rows](https://snippet.dhtmlx.com/1hf173dk) diff --git a/docs/grid/configuration.md b/docs/grid/configuration.md index b672a3ad..b4de65ce 100644 --- a/docs/grid/configuration.md +++ b/docs/grid/configuration.md @@ -1576,8 +1576,16 @@ Grid renders the header and the footer as a stack of levels (rows). The number o ~~~jsx columns: [ - { id: "country", header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }] }, // 3 levels - { id: "region", header: ["", { text: "Region" }, { text: "Subregion of the world" }] }, + { + id: "country", + header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], // 3 levels in the header + footer: [{ text: "Total" }, { text: "The number of the listed countries" }] // 2 levels in the footer + }, + { + id: "region", + header: ["", { text: "Region" }, { text: "Subregion of the world" }], + footer: [{ text: "Unique" }, { text: "The number of the distinct regions" }] + } ] ~~~ @@ -1600,23 +1608,26 @@ const grid = new dhx.Grid("grid_container", { { id: "country", width: 200, header: [{ text: "Location", colspan: 2 }, { text: "Country" }, { text: "ISO code" }], + footer: [{ text: "Total" }, { text: "The number of the listed countries" }], }, { id: "region", width: 200, header: ["", { text: "Region" }, { text: "Subregion of the world" }], + footer: [{ text: "Unique" }, { text: "The number of the distinct regions" }], }, ], // level 0 -> 56px, level 1 -> adjusts to its content, level 2 -> 32px headerRowHeight: [56, "auto", 32], + // level 0 -> 40px, level 1 -> adjusts to its content footerRowHeight: [40, "auto"], - data: dataset, + data: dataset }); ~~~ :::tip pro version only Measuring the content is available in the PRO version of the DHTMLX Grid (or DHTMLX Suite) package only, exactly like the [`headerAutoHeight`](grid/api/grid_headerautoheight_config.md), [`footerAutoHeight`](grid/api/grid_footerautoheight_config.md) and [`autoHeight`](grid/api/grid_autoheight_config.md) properties. -In the GPL version, the array form works too: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. +In the GPL version, the array form still works: individual pixel heights per level are fully supported. An *"auto"* item is accepted without an error, but it has no effect: the level gets the default height of 40px and its text is not wrapped. Use explicit pixel values instead. ::: The height of a level is resolved as follows: diff --git a/docs/grid/usage.md b/docs/grid/usage.md index f4255360..b27c5bc6 100644 --- a/docs/grid/usage.md +++ b/docs/grid/usage.md @@ -601,7 +601,9 @@ The returned configuration object may contain the following properties: - `typeConfig` - (*object*) an object containing unique settings for the specific format (filenames, delimiters, themes) - **Grid properties** - any Grid property that should be overridden (e.g., `headerRowHeight`) set as a `key:value` pair, where the *key* is the property name and the *value* is the property value to be applied only to the exported state -You can override `headerRowHeight`/`footerRowHeight` with an array as well, so that the individual level heights differ in the exported file. Note that the callback receives `config.headerRowHeight`/`config.footerRowHeight` either as a *number* or as an *array*. +:::note +You can override `headerRowHeight`/`footerRowHeight` with an array, so that the individual level heights differ in the exported file, see [Header/footer height](grid/configuration.md#headerfooter-height). The callback receives `config.headerRowHeight`/`config.footerRowHeight` either as a *number* or as an *array*. +::: #### Example 1: Conditional filtering and formatting