multiple nested grids with regular HTML items in between

[josephclawrence]

I am working on a project with a lot of tab widgets. Each parent tab widget is a GridStack item in a parent GridStack layout, capable of being moved and resized. Each tab widget has at least two tabs.

Ideally, I would also like each tab to be a nested GridStack, capable of holding multiple GridStack items. This is currently impossible because I can have a maximum of 1 nested GridStack inside each tab widget GridStack item.

Is this something that is currently being considered, or could be considered, for further development?

Thank you.

[adumesny]

sounds like a dup of #1943 - anything can be done with the right donation. I just don't have free bandwidth these days.

[josephclawrence]

OK, thank you - how can I contact you privately? I don't think this is a duplicate, since I'm talking about multiple nested GridStacks at the same hierarchical level, not more and more deeply nested GridStacks.

[adumesny]

you mean like https://gridstackjs.com/demo/nested.html already does ? parent has 2 items that are subgrids (darker yellow).

Not sure why you would want subGrid property to be an array - that woudl also break today's API and complicate the code to handle either types so very unlikely. if you wanted to move a bunch of subGrids as one, then you could do that today with a parent item that has multiple subgrids items - 2 nested subgrids, hence dup of the other request ? (which I thought would work but didn't test in the demo code).

[josephclawrence]

No, I mean multiple nested gridstacks inside one grid stack item, whereas that example has multiple items in the parent gridstack, and each item can have at most one nested gridStack (at least at the same hierarchical level). I can see what you are getting at, but not sure it will work for my use case, which is tabs (e.g. https://getbootstrap.com/docs/5.1/components/navs-tabs/#tabs) So the whole tab widget would be a gridStack item, within a parent gridStack layout. And then I want each individual tab content pane (of which only one at a time is visible…) to contain a gridStack layout. Currently it seems that this would mean that you would need a nested gridStack inside the parent tab gridStack item, and then multiple gridStack items, one for each tab pane…but wouldn’t that break it, since they will not be adjacent in the html. Each would be ‘nested’ within the html for its own tab. Joe Lawrence

…

On 30 Mar 2022, 16:43 +0200, Alain Dumesny ***@***.***>, wrote: you mean like https://gridstackjs.com/demo/nested.html already does ? parent has 2 items that are subgrids (darker yellow). Not sure why you would want subGrid property to be an array - that woudl also break today's API and complicate the code to handle either types so not clean. if you wanted to move a bunch of subGrids as one, then you could do that today with a parent item that has multiple subgrids items - 2 nested subgrids, hence dup of the other request ? (which I thought would work but didn't test in the demo code). — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[adumesny]

draw a picture of what you are looking for...

[josephclawrence]

Sure thing - attached. I hope that helps. One assumption I am making is that gridStack items need to be adjacent in the HTML, since that is how I have always seen it, and assume it needs to work…am I correct in that assumption? That is why I think I need multiple nested gridStacks in order to achieve what I need. Thanks! Joe https://user-images.githubusercontent.com/1594261/161275656-3ee2a077-4bde-4b09-a404-38a2bf18b432.jpg

[adumesny]

I think you can do what you pictured with multiple grids, not nested in the lib way per say (since there are parent tabs in between).

the only question is what is the interaction between the dark orange items and yellow items (both grid items) ? you may or not be able to drag an orange item into the pink grid container, or you can prevent that (can only accept certain class types).

[josephclawrence]

I’m pretty sure I tried that, but when the HTML for a grid is nested inside another item, then the library automatically initialises it as a nested grid. When it then finds another one, nested inside the same parent gridStack item, it initialises that one, which overwrites the previous, since there is only space for one. For my use case I do want to be able to freely drag between the parent and nested gridStacks, i.e. I would want to drag an orange item into the pink container. Joe Lawrence

…

On 04 Apr 2022, 16:26 +0200, Alain Dumesny ***@***.***>, wrote: I think you can do what you pictured with multiple grids, not nested in the lib way per say (since there are parent tabs in between). the only question is what is the interaction between the dark orange items and yellow items (both grid items) ? you may or not be able to drag an orange item into the pink grid container, or you can prevent that (can only accept certain class types). — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[adumesny]

ok, sounds like the lib would have to handle separate but nested DOM grids with regular items in between then. If want this, then you need to provide a simple example of the above html with code, and ping me directly for donation for that feature...

Otherwise you might be able to init each grid (start with children) directly with a unique id and hope it doesn't find the nested part...

[v1talii-dev]

+1, the functionality that @josephclawrence wrote about would be very useful.

[adumesny]

closing since there are no responses