Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 17 additions & 5 deletions docs/grid/api/grid_adjust_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,31 @@ 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
],
adjust: true,
data: dataset
});

@descr:
~~~

**Related sample**: [Grid. Adjust columns by header, data, all](https://snippet.dhtmlx.com/zfrpe22d)

Expand Down Expand Up @@ -52,14 +63,15 @@ 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
- `htmlEnable: true` allows calculating the content of simple HTML templates by excluding HTML markup and calculating internal content
- 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)
Expand Down
20 changes: 16 additions & 4 deletions docs/grid/api/grid_autoheight_config.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,31 @@ 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
],
autoHeight: true,
data: dataset
});

@descr:
~~~

**Related sample**: [Grid. Rows auto height](https://snippet.dhtmlx.com/zkcsyazg)

Expand All @@ -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)
Expand Down
16 changes: 11 additions & 5 deletions docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md
Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand All @@ -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.
Expand Down
Loading