grid_elastic_columns

adjusts the width of columns inside a scrollable grid

boolean grid_elastic_columns;

Example

gantt.config.grid_elastic_columns = true;
...
gantt.init("gantt_here");


Default value:

false
Details

The property works only when a grid has a horizontal scrollbar.

By default, dhtmlxGantt doesn't adjust the size of columns during resizing of the whole grid.

Therefore, when the width of the grid increases, the width of columns will remain the same. As a result, an empty space will appear on the right side of the grid. In case the width of the grid decreases, the horizontal scroll will be displayed in the grid.

To make columns dependent on the grid size, set grid_elastic_columns to true:

gantt.config.grid_elastic_columns = true;

Related sample:  Elastic columns of Grid

Now, if the width of the grid is changed, the width of columns will be also resized:

  • if you widen the grid, the columns will expand to fit the size of the grid and occupy all the remaining space
  • if you reduce the width of the grid, the columns will shrink until they reach their minimal width. When all columns reach minimum, the horizontal scroll will appear in the grid.

Change log

added in v7.0

Back to top