row() method for setting new min/max-rows and reflow like column() method.

[PeterEhses]

In the API a method column(column: number | 'auto', layout: ColumnOptions = 'moveScale') exists that updates the number of columns and, if any child elements exceed the bounds of the new grid, reflows all items. I'm in need of a function that does the same, but for the number of rows, e.g. row(minRow, maxRow).

I have statically set the number of rows using minRow / maxRow in the options object. Right now I'm changing opts.minRow, opts.maxRow, engine.minRow, engine.maxRow to change the number of rows, but this doesn't cause the child elements to reflow. Alternatively, a function to cause the reflow could be exposed.

[adumesny]

funny, there isn't a column('auto') - I'll fix the doc (it is a gridOption though for nested ones)

I could add that row() method (if you're willing to pay for it) but a minRow would not change layout (but update both internal values), and how would a maxRow (which needs to update the CSS as well) exactly force a relayout ? re-pack the elements to fill any void space, try keep the order of items the same and see if still fit into maxRow ? or ??? that is not well defined and could get complicated...

[PeterEhses]

That's weird, I'm using this one on a grid object created through grid = GridStack.init(... and it's working.

Right now, dragging breaks when there's child elements beyond the maxRow, so just pushing these children up so they stay within bounds would be fine for me, just like column() seems to do here:

the element longer than columns is not rendered anymore, everything else gets rearranged with overlap where necessary.

I'd be expecting the same behaviour for row(), except pushing up instead of left.

[adumesny]

I meant column('auto') isn't correct (I just fixed the doc)

[adumesny]

there should be no overlap ever, and if you have maxRow then sizing the column down will get you in trouble as things may not fit anymore with the current heuristics (I'm not surprised there might be bugs as I have don't test with maxRow which complicates things a LOT), and possibly could NEVER fit - so not defined what to do (eg: have 2 items with maxRow=1 and go from 12 column to 1 would have to force two items vertically but that is > maxRow so something has to give (clear maxRow or prevent < 2 column). gets complicated quickly...

Anyway if you are willing to donate for this we can discuss further.

[Meierschlumpf]

I found a pretty easy way to achive the minrow / maxrow issue without rewriting gridstack.js. You can just update the property gs-min-row / gs-max-row of the grid-stack-element and set it to the corrsponding value. Additionally I would suggest to use a height of 100%.

Good luck! @PeterEhses

[adumesny]

@Meierschlumpf do not update the gs- fields directly. GS will not know of those changes internally and things will break once you drag things around. Always use supplied APIs.

[koljada]

In some older version setGridHeight api method existed. Is it possible to bring it back? Currently as a workaround I'm using:

grid.destroy(false);
grid = GridStack.init(myOptions);

[adumesny]

@koljada it's always possible given the right donation - as mentioned above, a reflow can get very complicated quickly to work generally in all cases (this is a lib, not a specific use case).

[LFCCarvalho]

@adumesny Is it feasible to add a simple row method that resizes the grid (internally and change classes) but doesn't reflow the items?

There is a completely inefficient workaround for this right now:

const savedVersion = grid.save();
grid.destroy(removeDom = false);

< Remove all the classes >

grid = Gridstack.init( ... options with new minRow and maxRow)

grid.load(savedVersion);

[adumesny]

@LFCCarvalho you can set teh min/maxRow vars (and engine) yourself if you are not changing any layout, and will take affect next time you do something.