Merge pull request #1668 from adumesny/develop

serialization of nested grid

Author: adumesny

demo/nested.html

@@ -24,6 +24,9 @@ <h1>Nested grids demo</h1>
     <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="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>
+    <a class="btn btn-primary" onClick="destroy()" href="#">Clear</a>
+    <a class="btn btn-primary" onClick="load()" href="#">Load</a>
     <br><br>
     <!-- grid will be added here -->
   </div>
@@ -41,17 +44,16 @@ <h1>Nested grids demo</h1>
       minWidth: 300, // min to go 1 column mode
       margin: 1
     };
-    let opts = {cellHeight: 70, children: [
+    let json = {cellHeight: 70, children: [
       {y:0, content: 'regular item'},
       {x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}},
       {x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, class: 'nested2', ...subOptions}},
     ]};
 
     // create and load it all from JSON above
-    GridStack.addGrid(document.querySelector('.container-fluid'), opts);
+    let grid = GridStack.addGrid(document.querySelector('.container-fluid'), json);
 
     addNewWidget = function(selector) {
-      grid = document.querySelector(selector).gridstack;
       let node = {
         x: Math.round(12 * Math.random()),
         y: Math.round(5 * Math.random()),
@@ -62,6 +64,18 @@ <h1>Nested grids demo</h1>
       grid.addWidget(node);
       return false;
     };
+
+    save = function() {
+      json = grid.save(true, true);
+    }
+    destroy = function() {
+      grid.destroy();
+      grid = undefined;
+    }
+    load = function() {
+      grid = GridStack.addGrid(document.querySelector('.container-fluid'), json);
+    }
+
   </script>
 </body>
 </html>

doc/CHANGES.md

@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [4.0.0-dev](#400-dev)
 - [4.0.0 (2021-3-19)](#400-2021-3-19)
 - [3.3.0 (2021-2-2)](#330-2021-2-2)
 - [3.2.0 (2021-1-25)](#320-2021-1-25)
@@ -48,6 +49,10 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
+## 4.0.0-dev
+
+- fix [#1661](https://github.com/gridstack/gridstack.js/issues/1661) serialization of nested grid
+
 ## 4.0.0 (2021-3-19)
 
 - fix [#149](https://github.com/gridstack/gridstack.js/issues/149) [#1094](https://github.com/gridstack/gridstack.js/issues/1094) [#1605](https://github.com/gridstack/gridstack.js/issues/1605) [#1534](https://github.com/gridstack/gridstack.js/issues/1534) re-write of the **collision code - fixing 6 years old most requested request**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "4.0.0",
+  "version": "4.0.0-dev",
   "description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",

src/gridstack-dd.ts

@@ -1,4 +1,4 @@
-// gridstack-GridStackDD.get().ts 4.0.0
+// gridstack-GridStackDD.get().ts 4.0.0-dev
 // (c) 2021 Alain Dumesny - see root license
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { GridStackDDI } from './gridstack-ddi';

src/gridstack-ddi.ts

@@ -1,4 +1,4 @@
-// gridstack-ddi.ts 4.0.0
+// gridstack-ddi.ts 4.0.0-dev
 // (c) 2021 Alain Dumesny - see root license
 import { GridItemHTMLElement } from './types';
 

src/gridstack-engine.ts

@@ -1,4 +1,4 @@
-// gridstack-engine.ts 4.0.0
+// gridstack-engine.ts 4.0.0-dev
 // (c) 2021 Alain Dumesny - see root license
 import { Utils } from './utils';
 import { GridStackNode, ColumnOptions, GridStackPosition, GridStackMoveOpts } from './types';

src/gridstack.ts

@@ -1,4 +1,4 @@
-// gridstack.ts 4.0.0
+// gridstack.ts 4.0.0-dev
 /*!
  * (c) 2021 Alain Dumesny - see root license
  */
@@ -164,8 +164,10 @@ export class GridStack {
 
     // create grid class and load any children
     let grid = GridStack.init(opt, el);
-    if (opt.children) {
-      grid.load(opt.children);
+    if (grid.opts.children) {
+      let children = grid.opts.children;
+      delete grid.opts.children;
+      grid.load(children);
     }
     return grid;
   }

src/h5/dd-base-impl.ts

@@ -1,4 +1,4 @@
-// dd-base-impl.ts 4.0.0
+// dd-base-impl.ts 4.0.0-dev
 // (c) 2021 Alain Dumesny - see root license
 export type EventCallback = (event: Event) => boolean|void;
 export abstract class DDBaseImplement {

src/h5/dd-draggable.ts

@@ -1,4 +1,4 @@
-// dd-draggable.ts 4.0.0
+// dd-draggable.ts 4.0.0-dev
 // (c) 2021 Alain Dumesny - see root license
 import { DDManager } from './dd-manager';
 import { DDUtils } from './dd-utils';

src/h5/dd-droppable.ts

@@ -1,4 +1,4 @@
-// dd-droppable.ts 4.0.0
+// dd-droppable.ts 4.0.0-dev
 // (c) 2021 Alain Dumesny - see root license
 import { DDDraggable } from './dd-draggable';
 import { DDManager } from './dd-manager';