haltu
Grid of Grids
Hi, Thank you haltu for making this awesome library. I was wandering if it is possible to do a grid nested in another grid. I'm trying to figure it out myself, but it isn't exactly doing what it is supposed to do https://codepen.io/MarleenAndela/pen/qoWEwq Any idea's?
Hi @MarleenAndela! Yep it's possible. The kanban demo on the Muuri website has a grid inside a grid. You can see the source code for that here: https://codepen.io/niklasramo/pen/ppeMbK
Hi @niklasramo, thanks for replying! Can I add another layer? So a grid inside a grid inside a grid? Or is there any way to somehow use a JSON array in combination with the grid?
Well there's nothing technically stopping you from adding as many layers as you wish. There's no built-in support to set the grid up with JSON though.
@niklasramo I'm trying to do something similar but am running into an issue. I have a grid and some, but not all, of those grid elements contain another grid. I can't seem to drag an item (not containing a grid) from the top level grid into one of the nested grids. The item containing the nested grid always swaps place with the dragging item. I can't get a send or receive event to trigger.
Edit to clarify a bit. Another way to ask the question is: How would you modify the kanban demo to allow dragging one of the lists and dropping it inside of another list?
Any advice on how I could tackle this?
I'll try to add a demo of this to muuri's codepen collection: https://codepen.io/collection/AWopag/... when I have some extra time on my hands
@niklasramo I have made an advanced version of yours which provides deep filtering and searching without killing the parents. I think this would be something nice to have integrated natively.
https://codepen.io/muuvmuuv/pen/MWWYqdj
I'll try to add a demo of this to muuri's codepen collection: https://codepen.io/collection/AWopag/... when I have some extra time on my hands
@niklasramo
Just wondering if you ever got the chance to do this demo. I've looked through the codepen examples and I couldn't find anything (I may have overlooked it though). I'm indeed wondering how to do what @AndrewMorsillo said in his comment. I'm looking to see how I can remove the container vs item division, so that a container can be an item, and an item can be a container. Do you think it's possible?
@TheAussieStew Unfortunately no, there's no live example of this yet :( But yep, in theory this should be very much doable.
The main reason that drag and drop is working nicely only in one level (not nested) is the default dragSortPredicate, as it's not designed to handle nested grid architecture. So the first thing to do would be implementing a custom dragSortPredicate function. I'd love to explore this issue more sometime, but it remains to be seen when I get the time and inspiration to do that. So I'd be happy to see the community explore this and build some demos and provide feedback/ideas/improvement ideas to make it easier for everyone else to implement :)
Ah perfect, it's good to know it should work in theory! I'll look into modifying the predicate :)
On Sun, 27 Dec 2020, 6:44 am Niklas Rämö, [email protected] wrote:
@TheAussieStew https://github.com/TheAussieStew Unfortunately no, there's no live example of this yet :( But yep, in theory this should be very much doable.
The main reason that drag and drop is working nicely only in one level (not nested) is the default dragSortPredicate https://github.com/haltu/muuri#grid-option-dragsortpredicate, as it's not designed to handle nested grid architecture. So the first thing to do would be implementing a custom dragSortPredicate function. I'd love to explore this issue more sometime, but it remains to be seen when I get the time and inspiration to do that. So I'd be happy to see the community explore this and build some demos and provide feedback/ideas/improvement ideas to make it easier for everyone else to implement :)
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/haltu/muuri/issues/154#issuecomment-751389583, or unsubscribe https://github.com/notifications/unsubscribe-auth/AG22WUOKDIPIIEZTQY4UN4TSWY4JXANCNFSM4EUD6A2A .