Repository navigation
Quickish question: How do you update the number of columns the grid is using dynamically? #227
Description
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
Activity
laurentsorin commentedon Oct 14, 2015
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 commentedon Feb 19, 2016
We can expose a method to modify this on the fly, but as @Booster78 says, you'll also need to change the CSS.
gridstack#227 Add setGridWidth(gridWidth) method. Attempts to intelli…
radiolips commentedon Feb 20, 2016
Using gridstack v.0.2.5 you may now use the grid's
.setGridWidthmethod 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 commentedon Sep 6, 2017
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 commentedon Oct 26, 2017
setGridWidth seems to be working now, it had to be different problem causing items to overlap 🤔