Skip to main content

autoHeight

Optional. Makes long text split into multiple lines based on the width of the column, controls the automatic height adjustment for the header/footer and cells with data

autoHeight?: boolean;

Default value: false

Example

const treegrid = new dhx.TreeGrid("treegrid_container", {
    columns: [
        // columns config
    ],
    autoHeight: true,
    data: dataset
});

Related sample: TreeGrid. Rows auto height

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

const treegrid = new dhx.TreeGrid("treegrid", {
    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 TreeGrid
  • 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