Quickish question: How do you update the number of columns the grid is using dynamically?

[playingwithbandits]

When you create a new grid I know that you can define the number of columns by setting the 'width' in the options array.

For example:
$('.grid-stack').gridstack( {width: 3} );

Is there a way, through jQuery, to update this value to 2 for example.

I have tried:
$('.grid-stack').gridstack({ width: 2 });
$('.grid-stack').data('gridstack').width = 2;

Any ideas? Thanks

[laurentsorin]

Try this :
$('.grid-stack').data('gridstack').grid.width = 2;

It's a little hack (because it doesn't use a public method...)

And don't forget to change css class in the grid to grid-stack-2

[radiolips]

We can expose a method to modify this on the fly, but as @Booster78 says, you'll also need to change the CSS.

[radiolips]

Using gridstack v.0.2.5 you may now use the grid's .setGridWidth method to change the number of columns on the fly. You will not need to alter any CSS. If you already have widgets on the dashboard, it will attempt to resize/reposition them to retain their aspect ratios. Please note that the reposition/resize feature is experimental for the time being. You will see odd behavior when switching from 12 columns to 11, for example.
Example usage:
$('.grid-stack').data('gridstack').grid.setWidth(2); // set number of columns to 2.

[luckylooke]

Example usage should be:
$('.grid-stack').data('gridstack').setGridWidth(2); // set number of columns to 2.
but it is buggy.. there should be a method for global fix of collisions because some grid changes causes items to overlap. :/

[luckylooke]

setGridWidth seems to be working now, it had to be different problem causing items to overlap 🤔