addWidget() now supports recursive grids

* fix gridstack#1682
* updated nested demo to show adding nested grid

demo/nested.html

@@ -22,6 +22,7 @@
     <h1>Nested grids demo</h1>
     <p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>
     <p>Note: initial v3 HTML5 release doesn't support 'dragOut:false' constrain so use jq version if you need that.</p>
+    <a class="btn btn-primary" onClick="addNested()" href="#">Add Widget</a>
     <a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>
     <a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>
     <a class="btn btn-primary" onClick="save()" href="#">Save</a>
@@ -53,6 +54,10 @@ <h1>Nested grids demo</h1>
     // create and load it all from JSON above
     let grid = GridStack.addGrid(document.querySelector('.container-fluid'), json);
 
+    addNested = function() {
+      grid.addWidget({x:0, y:0, w:3, h:3, content:"nested add", subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}});
+    }
+
     addNewWidget = function(selector) {
       let subGrid = document.querySelector(selector).gridstack;
       let node = {

doc/CHANGES.md

@@ -56,6 +56,7 @@ Change log
 ## 4.1.0-dev
 
 - fix [#1704](https://github.com/gridstack/gridstack.js/issues/1704) scrollbar fix broken in 4.x
+- add [#1682](https://github.com/gridstack/gridstack.js/issues/1682) `addWidget()` now supports recursive grids like init/addGrid() does.
 
 ## 4.1.0 (2021-4-7)
 

src/gridstack.ts

@@ -415,7 +415,7 @@ export class GridStack {
     let domAttr = this._readAttr(el);
     options = {...(options || {})};  // make a copy before we modify in case caller re-uses it
     Utils.defaults(options, domAttr);
-    this.engine.prepareNode(options);
+    let node = this.engine.prepareNode(options);
     this._writeAttr(el, options);
 
     if (this._insertNotAppend) {
@@ -427,6 +427,13 @@ export class GridStack {
     // similar to makeWidget() that doesn't read attr again and worse re-create a new node and loose any _id
     this._prepareElement(el, true, options);
     this._updateContainerHeight();
+
+    // check if nested grid definition is present
+    if (node.subGrid && !(node.subGrid as GridStack).el) { // see if there is a sub-grid to create too
+      let content = node.el.querySelector('.grid-stack-item-content') as HTMLElement;
+      node.subGrid = GridStack.addGrid(content, node.subGrid as GridStackOptions);
+    }
+
     this._triggerAddEvent();
     this._triggerChangeEvent();
 
@@ -538,10 +545,6 @@ export class GridStack {
         } else {
           w = this.addWidget(w).gridstackNode;
         }
-        if (w.subGrid) { // see if there is a sub-grid to create too
-          let content = w.el.querySelector('.grid-stack-item-content') as HTMLElement;
-          w.subGrid = GridStack.addGrid(content, w.subGrid as GridStackOptions);
-        }
       }
     });