Gantt grid resizing not working with gantt.config.layout

I am trying to configure the Gantt chart to allow grid resizing (both individual columns and the complete grid). I am using the GPL licensed standard edition 5.1.0 which I downloaded from the following link



With the above code, the resizing does not work. But if I change the import to use the Gantt code from the cdn as follows, resizing works.



Use of the cdn version is restricted to the the site so that option is not available to me. How can I get the grid resizing to work with the standard GPL licensed version? Is there or will there be a GPL licensed 5.1.2 release?

It is not working for me here too, what should I try?

Hello everyone,
Grid resizing is a PRO feature: … l#resizing
The second code contains a link to the Pro version that can be used on the website, for example there:
If you use it on your own page, you should see a warning that you shouldn’t use it outside website:

If you need the resizing feature you can buy the Pro version (commercial or enterprise), request a trial license or implement the feature by yourself using current API and JavaScript. Here is an example:

I want to implement the function in your last example, but I set the layout, grid_width is not work, how should I deal with it?

Hi @virgil!

If I understood you correctly, you tried to set gantt.config.layout and gantt.config.grid_width properties to this snippet
and grid_width doesn’t work.

If it’s so, I’ve tried to reproduce your issue in this snippet and it seems to be ok:

Please, pay attention to the HTML tab. I’ve set the paths to the Gantt script and CSS styles in this way:

<script src=""></script>;
<link rel="stylesheet" href="">;

Please, reproduce the issue in the snippet. Then click on the “share” button and send me the link.

Hello, guldmi!

This is how my code is written:
gantt.config.layout = {
css: ‘gantt_container’,
cols: [
width: 500,
min_width: 300,
rows: [
{view: ‘grid’, scrollX: ‘gridScroll’, scrollable: true, scrollY: ‘scrollVer’},
{view: ‘scrollbar’, id: ‘gridScroll’, group: ‘horizontal’}
{resizer: true, width: 1},
rows: [
{view: ‘timeline’, scrollX: ‘scrollHor’, scrollY: ‘scrollVer’},
{view: ‘scrollbar’, id: ‘scrollHor’, group: ‘horizontal’}
{view: ‘scrollbar’, id: ‘scrollVer’}

my grid’s column is too much,I need to scroll in grid.
In this case, this function is not I don’t know how to solve this.


Hi @virgil!

Note that you should specify the configuration of the layout before Gantt initialization. If you make changes in the layout, you need to reinitialize Gantt.

Please check this sample with changing layout width property and reinitialization Gantt Chart:


Thank you for helping me solve this problem. If the amount of data is large, will frequent use of _reinit() affect performance?

Hi @virgil!

Yes, _reinit() method affects performance because it would remove the gantt.$root DOM elements and then would add the new ones