demo: nested drop

more for #2590

Author: adumesny

demo/nested.html

@@ -59,10 +59,11 @@ <h1>Nested grids demo</h1>
       minRow: 2, // don't collapse when empty
       acceptWidgets: true,
       id: 'main',
+      subGridOpts: subOptions, // all sub grids will default to those
       children: [
         {x:0, y:0, content: 'regular item'},
-        {x:1, y:0, w:4, h:4, sizeToContent: true, subGridOpts: {children: sub1, id:'sub1_grid', class: 'sub1', ...subOptions}},
-        {x:5, y:0, w:3, h:4, subGridOpts: {children: sub2, id:'sub2_grid', class: 'sub2', ...subOptions}},
+        {x:1, y:0, w:4, h:4, sizeToContent: true, subGridOpts: {children: sub1, id:'sub1_grid', class: 'sub1'}},
+        {x:5, y:0, w:3, h:4, subGridOpts: {children: sub2, id:'sub2_grid', class: 'sub2'}},
       ]
     };
 
@@ -108,12 +109,11 @@ <h1>Nested grids demo</h1>
       // if we don't have a prevNode that means it came from toolbar, which today is the only nested case (else check for some node.el.getAttribute or some custom field...)
       if (prevNode) return;
 
-      // clear the content and make it a subgrid
+      // clear the content then make it a subgrid
       n.el.querySelector('.grid-stack-item-content').innerHTML = '';
-
-      // let nodeToAdd = { subGridOpts: {children: [{content: 'nest 1'}, {content: 'nest 2'}], ...subOptions }} TODO that is correct info ?
-      let nodeToAdd = { ...subOptions, subGridOpts: subOptions, children: [{content: 'nest 1'}, {content: 'nest 2'}]}
+      let nodeToAdd = { children: [{content: 'nest 1'}, {content: 'nest 2'}]};
       let subgrid = n.grid.makeSubGrid(n.el, nodeToAdd, undefined, false);
+      
       // add a listener to the subgrid to allow widgets to be added into this newly created nested widget
       subgrid.on('dropped', droppedHandler);
     }

doc/CHANGES.md

@@ -111,7 +111,8 @@ Change log
 * feat: [#2574](https://github.com/gridstack/gridstack.js/pull/2574) Allow cell height in cm and mm units
 * fix: [#2577](https://github.com/gridstack/gridstack.js/issues/2577) ui-resizable-s/-n style fix
 * fix: [#2576](https://github.com/gridstack/gridstack.js/issues/2576) column('none') now ignores layouts
-* fix: [#2560](https://github.com/gridstack/gridstack.js/issues/2560) nested grid fix (enter can call leave which can call enter again).
+* fix: [#2560](https://github.com/gridstack/gridstack.js/issues/2560) nested grid fix (enter can call leave which can call enter again) - Thank you [v1talii-dev](https://github.com/v1talii-dev)
+* doc: nested.htm now has nested create and drag&drop example - Thank you [fredericrous](https://github.com/fredericrous)
 
 ## 10.0.1 (2023-12-10)
 * fix: [#2552](https://github.com/gridstack/gridstack.js/issues/2552) DOM init doesn't sizeToContent

src/gridstack.ts

@@ -530,7 +530,7 @@ export class GridStack {
       grid = grid.parentGridItem?.grid;
     }
     //... and set the create options
-    ops = Utils.cloneDeep({...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts)});
+    ops = Utils.cloneDeep({...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts || {})});
     node.subGridOpts = ops;
 
     // if column special case it set, remember that flag and set default