Skip to content

grid_adjust_config.md

Latest commit

 

History

History
79 lines (59 loc) · 3.11 KB

grid_adjust_config.md

File metadata and controls

79 lines (59 loc) · 3.11 KB
sidebar_label adjust
title JavaScript Grid - adjust Config
description You can explore the adjust config of Grid in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.

adjust

@short: Optional. Defines whether the width of columns is automatically adjusted to the width of their content

Usage

adjust?: "header" | "footer" | "data" | boolean;

@default: false

@descr:

:::info You can't enable autoHeight and adjust properties at the same time, as they are mutually exclusive. :::

Example

const grid = new dhx.Grid("grid_container", {
    columns: [
        // columns config
    ],
    adjust: true,
    data: dataset
});

Related sample: Grid. Adjust columns by header, data, all

The property can be specified to one of the available adjustment modes:

"header" adjusts the columns to the width of their header
"footer" adjusts the columns to the width of their footer
"data" adjusts the columns to the width of their content
true combines the above mentioned modes and adjusts the column to the bigger value

The adjust property has a priority over the autoWidth property if it is specified either for a grid or for its 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:

  • 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 added to cells. You need to set the content attribute of the header/footer properties to one of the following modes: "avg" | "sum" | "max" | "min" | "count", otherwise text will be calculated

Related API: adjustColumnWidth()

Related article: Autosize for columns

@changelog: added in v6.4