diff --git a/docs/grid/api/grid_adjust_config.md b/docs/grid/api/grid_adjust_config.md index 4393a704..1f19ac7c 100644 --- a/docs/grid/api/grid_adjust_config.md +++ b/docs/grid/api/grid_adjust_config.md @@ -8,11 +8,23 @@ description: You can explore the adjust config of Grid in the documentation of t @short: Optional. Defines whether the width of columns is automatically adjusted to the width of their content -@signature: {'adjust?: "header" | "footer" | "data" | boolean;'} +#### Usage + +~~~ts +adjust?: "header" | "footer" | "data" | boolean; +~~~ @default: false -@example: +@descr: + +:::info +You can't enable `autoHeight` and `adjust` properties at the same time, as they are mutually exclusive. +::: + +#### Example + +~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ // columns config @@ -20,8 +32,7 @@ const grid = new dhx.Grid("grid_container", { adjust: true, data: dataset }); - -@descr: +~~~ **Related sample**: [Grid. Adjust columns by header, data, all](https://snippet.dhtmlx.com/zfrpe22d) @@ -52,7 +63,7 @@ The `adjust` property has a priority over the [`autoWidth`](../../../grid/config The width the columns will be adjusted to also depends on the values of the [`minWidth/maxWidth`](../../../grid/api/api_gridcolumn_properties/) properties if they are set for a column. -**Note** that: +#### 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 - you can also specify `htmlEnable:true` in the configuration object of Grid @@ -60,6 +71,7 @@ The width the columns will be adjusted to also depends on the values of the [`mi - in case of complex HTML data, usage of the `adjust` config may lead to incorrect size calculations - the enabled `adjust` config (including the "header", "footer", "data" modes) adjusts the width of columns taking into account the [`template`](grid/api/api_gridcolumn_properties.md) added to cells. You need to set the **content** attribute of the [`header/footer`](grid/api/api_gridcolumn_properties.md) properties to one of the following modes: "avg" | "sum" | "max" | "min" | "count", otherwise **text** will be calculated + **Related API**: [`adjustColumnWidth()`](grid/api/grid_adjustcolumnwidth_method.md) **Related article**: [Autosize for columns](grid/configuration.md#autosize-for-columns) diff --git a/docs/grid/api/grid_autoheight_config.md b/docs/grid/api/grid_autoheight_config.md index 75ff5eb4..031e402d 100644 --- a/docs/grid/api/grid_autoheight_config.md +++ b/docs/grid/api/grid_autoheight_config.md @@ -12,11 +12,23 @@ This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) pac @short: Optional. Makes long text split into multiple lines based on the width of the column, controls the automatic height adjustment of the header/footer and cells with data -@signature: {'autoHeight?: boolean;'} +#### Usage + +~~~ts +autoHeight?: boolean; +~~~ @default: false -@example: +@descr: + +:::info +You can't enable `autoHeight` and `adjust` properties at the same time, as they are mutually exclusive. +::: + +#### Example + +~~~jsx const grid = new dhx.Grid("grid_container", { columns: [ // columns config @@ -24,8 +36,7 @@ const grid = new dhx.Grid("grid_container", { autoHeight: true, data: dataset }); - -@descr: +~~~ **Related sample**: [Grid. Rows auto height](https://snippet.dhtmlx.com/zkcsyazg) @@ -51,6 +62,7 @@ const grid = new dhx.Grid("grid_container", { - in case of complex HTML data, usage of the `autoHeight` config may lead to incorrect size calculations - 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 [comment]: # (@relatedapi: grid/api/grid_data_config.md) diff --git a/docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md b/docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md index fe149c77..39df7703 100644 --- a/docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md +++ b/docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md @@ -8,16 +8,20 @@ description: You can explore the adjust config of Grid column in the documentati @short: Optional. Defines whether the width of a column is automatically adjusted to its content -### Usage +#### Usage -~~~jsx +~~~ts adjust?: "data" | "header" | "footer" | boolean; ~~~ @default: false @descr: -### Example +:::info +You can't enable `autoHeight` and `adjust` properties at the same time, as they are mutually exclusive. +::: + +#### Example ~~~jsx const grid = new dhx.Grid("grid_container", { @@ -30,8 +34,10 @@ const grid = new dhx.Grid("grid_container", { }); ~~~ -- The `adjust` property has a priority over the `autoWidth` property if it is specified either for the grid or for the column, and over the `width` property of the column. -- The width the columns will be adjusted to also depends on the values of the `minWidth/maxWidth` properties if they are set for a column. +#### Take into account the information below: + +- the `adjust` property has a priority over the `autoWidth` property if it is specified either for the grid or for the column, and over the `width` property of the column +- the width the columns will be adjusted to also depends on the values of the `minWidth/maxWidth` properties if they are set for a column :::note Note that if you change the font type, size, or offsets, the correct calculation of the `adjust` property of a cell may not be guaranteed.