Merge pull request #2878 from adumesny/master

adumesny · web-flow · commit 135f9199d704 · 2024-11-25T12:26:21.000-08:00
sub-grid inherit parent opts by default
diff --git a/demo/demo.css b/demo/demo.css
@@ -44,12 +44,18 @@ h1 {
 .grid-stack {
   background: #FAFAD2;
 }
+.grid-stack.grid-stack-static {
+  background: #eee;
+}
 
 .sidebar > .grid-stack-item,
 .grid-stack-item-content {
   text-align: center;
   background-color: #18bc9c;
 }
+.ui-draggable-disabled.ui-resizable-disabled > .grid-stack-item-content {
+  background-color: #777;
+}
 
 .grid-stack-item-removing {
   opacity: 0.5;
diff --git a/demo/nested.html b/demo/nested.html
@@ -25,6 +25,11 @@ <h1>Nested grids demo</h1>
       <div class="sidebar-item grid-stack-item">Drag nested</div>
     </div>
     <br />
+    <div>
+      <span>Grid Mode: </span>
+      <input type="radio" id="static" name="mode" value="true" onClick="setStatic(true)"><label for="static">static</label>
+      <input type="radio" id="edit" name="mode" value="false" checked onClick="setStatic(false)"><label for="edit">editable</label>
+    </div>
     <span>entire save/re-create:</span>
     <a class="btn btn-primary" onClick="save()" href="#">Save</a>
     <a class="btn btn-primary" onClick="destroy()" href="#">Destroy</a>
@@ -39,17 +44,19 @@ <h1>Nested grids demo</h1>
   </div>
   <script src="events.js"></script>
   <script type="text/javascript">
+    let staticGrid = false;
     let sub1 = [ {x:0, y:0}, {x:1, y:0}, {x:2, y:0}, {x:3, y:0}, {x:0, y:1}, {x:1, y:1}];
     let sub2 = [ {x:0, y:0, h:2}, {x:1, y:1, w:2}];
     let count = 0;
     [...sub1, ...sub2].forEach(d => d.content = String(count++));
     let subOptions = {
-      cellHeight: 50, // should be 50 - top/bottom
-      column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
-      acceptWidgets: true, // will accept .grid-stack-item by default
-      margin: 5,
+      // by default we inherit from parent, but you can override any sub-grid options here
+      // column: 'auto', // DEFAULT size to match container. make sure to include gridstack-extra.min.css
     };
     let options = { // main grid options
+      staticGrid, // test - force children to inherit too if we set to true above ^^^
+      // disableDrag: true,
+      // disableResize: true,
       cellHeight: 50,
       margin: 5,
       minRow: 2, // don't collapse when empty
@@ -80,6 +87,11 @@ <h1>Nested grids demo</h1>
     ];
     GridStack.setupDragIn('.sidebar-item', undefined, sidebarContent);
 
+    function setStatic(val) {
+      staticGrid = val;
+      grid.setStatic(staticGrid);
+    }
+
     function addWidget() {
       grid.addWidget({x:0, y:100, content:"new item"});
     }
diff --git a/doc/CHANGES.md b/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/)*
 
+- [11.1.0-dev (TBD)](#1110-dev-tbd)
 - [11.1.0 (2024-11-17)](#1110-2024-11-17)
 - [11.0.1 (2024-10-21)](#1101-2024-10-21)
 - [11.0.0 (2024-10-20)](#1100-2024-10-20)
@@ -116,6 +117,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 11.1.0-dev (TBD)
+* fix: [#2877](https://github.com/gridstack/gridstack.js/pull/2877) make sure sub-grid inherit parent opts by default, with subgrid defaults.
+
 ## 11.1.0 (2024-11-17)
 * feat: [#2864](https://github.com/gridstack/gridstack.js/issues/2864) added `GridStackOptions.layout` for nested grid reflow during resize. default to 'list'.
 * fix: [#2859](https://github.com/gridstack/gridstack.js/pull/2859) re-enabled tests and fix numerous issues found (see CL). Also thank you [lmartorella](https://github.com/lmartorella) for getting me going and starting it.
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -518,7 +518,12 @@ export class GridStack {
       grid = grid.parentGridNode?.grid;
     }
     //... and set the create options
-    ops = Utils.cloneDeep({ ...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts || {}) });
+    ops = Utils.cloneDeep({
+      // by default sub-grid inherit from us | parent, other than id, children, etc...
+      ...this.opts, id: undefined, children: undefined, column: 'auto', columnOpts: undefined, layout: 'list', subGridOpts: undefined,
+      ...(subGridTemplate || {}),
+      ...(ops || node.subGridOpts || {})
+    });
     node.subGridOpts = ops;
 
     // if column special case it set, remember that flag and set default
