Nested grid support with content update

adumesny · adumesny · commit 09d19a0621d9 · 2023-07-09T10:17:38.000-07:00
* fix #2384 * you can now update the widget content while having a nested grid * added an example showing the issue
diff --git a/spec/e2e/html/2357_rem.html b/spec/e2e/html/2357_rem.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <head>
   <title>REM demo</title>
-  <link rel="stylesheet" href="../../../demo.css"/>
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
   <script src="../../../dist/gridstack-all.js"></script>
 </head>
 <body>
diff --git a/spec/e2e/html/2384_update_content.html b/spec/e2e/html/2384_update_content.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<head>
+  <title>Nested grid update content</title>
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+  <link rel="stylesheet" href="../../../dist/gridstack-extra.min.css"/>
+  <style type="text/css">
+    .grid-stack {
+      background: lightgoldenrodyellow;
+    }
+    .grid-stack-item-content {
+      color: #2c3e50;
+      text-align: center;
+      background-color: #18bc9c;
+    }
+    .grid-stack.grid-stack-nested {
+      position: absolute;
+      inset: 20px 0 0 0; 
+      border: 1px solid black;
+    }
+  </style>
+  <script src="../../../dist/gridstack-all.js"></script>
+</head>
+<body>
+  <h1>Nested grid when updating content</h1>
+  <div>
+    <button onClick="updateContent()">Update Subgrid</button>
+    <button onClick="move()">move Subgrid</button>
+  </div>
+  <br/>
+  <div class="grid-stack"></div>
+  <script type="text/javascript">
+    var options = {
+      cellHeight: 70,
+      acceptWidgets: true,
+      margin: 5,
+      children: [
+        {x:0, y:0, w:2, h:2, content: 'original content', subGridOpts: {
+          children: [{x:0, y:0, content: '1'}, {x:1, y:0, content: '2'}], cellHeight: 50, column: 2, margin: 5, acceptWidgets: true,
+        }},
+      ]
+    };
+
+    var grid = GridStack.init(options);
+
+    updateContent = function() {
+      const n = grid.engine.nodes[0];
+      grid.update(n.el, {content: "updated content"});
+    }
+
+    move = function() {
+      const n = grid.engine.nodes[0];;
+      grid.update(n.el, {x: n.x+1});
+    }
+  </script>
+</body>
+</html>
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1170,8 +1170,8 @@ export class GridStack {
     }
 
     GridStack.getElements(els).forEach(el => {
-      if (!el || !el.gridstackNode) return;
-      let n = el.gridstackNode;
+      let n = el?.gridstackNode;
+      if (!n) return;
       let w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items
       delete w.autoPosition;
 
@@ -1191,17 +1191,15 @@ export class GridStack {
       }
 
       // check for content changing
-      if (w.content) {
-        let toRemove = el.querySelectorAll('.grid-stack-item-content > :not(.grid-stack-nested, style)');
-        const subGrid = el.querySelector('.grid-stack-item-content > .grid-stack-nested')
+      if (w.content !== undefined) {
         const itemContent = el.querySelector('.grid-stack-item-content');
-        if (toRemove) {
-          toRemove.forEach(child => itemContent.removeChild(child));
+        if (!itemContent || itemContent.innerHTML === w.content) return;
+        itemContent.innerHTML = w.content;
+        // restore any sub-grid back
+        if (n.subGrid?.el) {
+          itemContent.appendChild(n.subGrid.el);
+          if (!n.subGrid.opts.styleInHead) n.subGrid._updateStyles(true); // force create
         }
-        const tempEl = document.createElement("div");
-        tempEl.innerHTML = w.content;
-        tempEl.childNodes.forEach(childNode => itemContent.insertBefore(childNode, subGrid));
-
         delete w.content;
       }
 
