Skip to main content

autoHeight

Pro version only

This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.

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

autoHeight?: boolean;

Default value: false

Example

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

Related sample: Grid. Rows auto height

You can control the autoheight of the header/footer separately with the help of the headerAutoHeight and footerAutoHeight configuration options of Grid. For example, you can disable autoheight of the header and the footer, while it is enabled for the whole Grid:

const grid = new dhx.Grid("grid", {
    columns: [
        // columns config
    ],
    data: dataset,
    autoHeight: true, // enable autoHeight in the data (content)
    headerAutoHeight: false, // disable autoHeight in the header
    footerAutoHeight: false, // disable autoHeight in the footer
});

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 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

Change log:

added in v7.1