Gridster inside gridster

[rodrianderson]

It's possible to insert a <gridster> inside a <gridster-item> element?

Something like:

<gridster> <!-- outter -->
<gridster-item> <!-- item from outter -->
<gridster> <!-- inner -->
<gridster-item> <!-- item from inner gridster -->
</gridster-item>
</gridster>
</gridster-item>
</gridster>

sry for the confusion :x

[rodrianderson]

When using Drag, the function is called twice "addWidgetFromDrag(field, $event)", would have solution?

[swiety85]

Hi, I've tried it and it seams that most of things works. I only found an issue with resize handler and maybe with drag handler if it's the same for both - parent and nested gridster.
Except of that it seams to work correctly.
I will provide fix for problems above in nearest release.
I don't see problem with addWidgetFromDrag, can you provide same code or better - some ready to use example?

[rodrianderson]

I know your component does not have this functionality, but I'd like to implement it.

I created a component for Gridster ' </ gridster>'

as follows

[rodrianderson]

I do not know if it is now easier to understand?

[swiety85]

Yes, problem is clear now. Sorry for late response.
What is expected behaviour. Would it be enough to provide some validation, which gridster accept which prototype-item?

[rodrianderson]

It's possible to insert a <gridster> inside a <gridster-item> element?

`widgets: Array<any> = [
     {
        x: 1, y: 0, w: 2, h: 2,
        dragAndDrop: false,
        resizable: true,
        title: 'Gridster in gridster',
		widgets2: 
		[
			{
				x: 0, y: 0,
				w: 2, h: 2,
				dragAndDrop: true,
				resizable: true,
				title: 'gridster item or gridster'
			},
			{
				x: 1, y: 0, w: 2, h: 2,
				dragAndDrop: true,
				resizable: true,
				title: 'gridster item or gridster'
			},
			{
				x: 1, y: 1, w: 2, h: 2,
				dragAndDrop: true,
				resizable: true,
				title: 'gridster item or gridster'
			}
		]
    }
];`

[rodrianderson]

Good morning, could you help me with this doubt?

[swiety85]

I will try to provide solution for this problem this month.

[rodrianderson]

thank you!

[cmark11]

What is the status of this? I am interested in this too. If possible to make sure that like non-nested grids that gridster nested grids can be rendered dynamically/programatically using object, that would significantly increase utility and futureproof.

gridstack/gridstack.js#95

[swiety85]

I'm currently working on that. Since this is not trivial problem it takes time to implement.
@cmark11 Please provide clearer explanation of what you expect, best with some example.

[richardlnnr]

I have the same problem that @rodrianderson reported

[richardlnnr]

@swiety85 can I help you from something?
I had find a bug at gridList.ts in fixItemsPositions method.
The this.items has an element with itemPrototype as GridsterItemPrototypeDirective and $element null.

        this.items.forEach((itm: GridListItem) => {
            const cachedItem = gridList.items.filter(cachedItm => {
                return cachedItm.$element === itm.$element;
            })[0];
            // When itm.$element is null, the cachedItem will be undefined and the next line will crash
            itm.setValueX(cachedItem.x, options.breakpoint);
            itm.setValueY(cachedItem.y, options.breakpoint);
            itm.w = cachedItem.w;
            itm.h = cachedItem.h;
            itm.autoSize = cachedItem.autoSize;
        });

For fire this event, just resize a component in the demo.

[swiety85]

@richardlnnr Sorry, but I can't reproduce this bug. Can you provide more details how to reproduce it?

[richardlnnr]

Run your demo, drag a component inside "Basic form inputs 2" and resize the "Basic form inputs 2"

After this steps, see the console.

[swiety85]

Yes, sure. Current master branch does not support dragging with nested gridsters.
I work on this feature on this branch: https://github.com/swiety85/angular2gridster/tree/123-Gridster-inside-gridster?files=1. I did not release it yet because I found some problematic bugs, I have to fix first. Thanx for patience

[richardlnnr]

I'm using a 123-Gridster-inside branch.
Sometimes, the gridster position is wrong :-)

[swiety85]

Exactly, this is one of the issue I have to fix. 😊

[richardlnnr]

Can I help you to fix this things? :-)

[swiety85]

Problem seams to be hard to fix but fill free to give it a try. I will try to focus on this problem this week. I will let you know as soon as I will have any progress.

[swiety85]

The problem you found is already fixed. It's pushed. There is still some problem with dragging the item prototype after couple time moving out and over gridster area - especially when you drag to the very bottom of the window. After the drop, collision detection is not working with some items, similar to your example above.

[swiety85]

It seems that it works now. Can you pull changes on 123-Gridster-inside-gridster branch and check if it's working fine for you now? Thanx!

[richardlnnr]

It seems much better, Thanx :-D
I found more two bugs.

The first occur when floating is enabled. (This is a bug?)

And this

[swiety85]

I fixed these issues. Please give it the next try. I also fixed some issues with resizing - have a look at it as well.
There is one known to me issue that is not fixed: when you will have an item with long content (with scroll) and you will drag under this item, the main (parent) girdster will not react because "item nested gridster" will catch it. It happens because of overflowed content.
It seems to be not so easy to fix. I will have a look at that still in this week.
If it's urgent for you fill free to find a solution for this problem on your own as well.
Thx!

[richardlnnr]

Good morning.
You're amazing.
That's working very well.

[swiety85]

Thx for the compliments. :)
I provided some additional fixes and adjustments. The problem mentioned above is also fixed.
You asked me if you can help me, so... I would appreciate if you will test it once again (in general) and approve it that I can soon release this feature.

[richardlnnr]

That's all right. I have only a CSS change in the demo.
The gridster area is not showing.

When I comment this CSS code in app.component.css

:host {
    position: absolute;
    /*
    display: flex;
    display: -webkit-inline-box;
    flex-direction: column;
    */
    height: 100%;
    width: 100%;
    overflow: hidden;
}

The Gridster appears.

[richardlnnr]

I have two questions :-)

It's possible to prevent an child gridster to interact with an specific gridsterItemPrototype?
Example: The gridsterItemPrototype "Drag me (clone) 1x1" can be dragged in any gridster.
But the gridsterItemPrototype "Drag me (clone) 1x2" can be dragged only on the main gridster.
Has a way to do this?

It's possible to drag an element into main gridster to child gridster? And the opposite also.

[swiety85]

I have no clue why your gridster area is not visible. I didn't change anything in CSS. I can't reproduce it in any browser. Did you change anything in styles or ViewEncapsulation?
About two questions - both things are not supported by now. I can provide these features but not altogether in one merge. Just create separate issues.
P.S. Could you tell me what is your use case of having "nested gridster" functionality?

[richardlnnr]

When I launch the demo in Google Chrome and Edge, and the gridster area is on the right (No CSS change)

About two questions, I'll create issues to make this features :-)
In reply your question, I have a simple element on the first prototype, it's only a label and can be dragged in any gridster.
And in the second prototype I have a more complex element with a Gridster inside.
I need to prevent a insertion of a element that is a gridster inside a child gridster.

Could I open the two issues?
Thanks for all your help :-)

[richardlnnr]

I have seen a bug, but I don't know exactly how to reproduce it.
I'll open an issue with this, I think this was not generated by this change.

[swiety85]

Please also create two issues for these two question you have. Thanx!
Can you tell me which version of Chrome you use? Did you have this problem before my last changes?

[richardlnnr]

65.0.3325.181 (Oficial Version) 64 bits.
I have the last changes in my workspace.

[richardlnnr]

Thanks @swiety85
You're amaizing :-)

[delashum]

How do you actually use the gridster inside of another? I did what seemed intuitive but when dragging a prototype it adds a new item to both parent and child and throws a bunch of errors. Is there somewhere I can look to see an example of some sort of documentation of this?