From 09d19a0621d919b66e18fb7aca0b47ac575b53f0 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 9 Jul 2023 10:17:38 -0700 Subject: [PATCH] Nested grid support with content update * fix #2384 * you can now update the widget content while having a nested grid * added an example showing the issue --- spec/e2e/html/2357_rem.html | 2 +- spec/e2e/html/2384_update_content.html | 56 ++++++++++++++++++++++++++ src/gridstack.ts | 20 +++++---- 3 files changed, 66 insertions(+), 12 deletions(-) create mode 100644 spec/e2e/html/2384_update_content.html diff --git a/spec/e2e/html/2357_rem.html b/spec/e2e/html/2357_rem.html index c0c2e0f38..86d409693 100644 --- a/spec/e2e/html/2357_rem.html +++ b/spec/e2e/html/2357_rem.html @@ -1,7 +1,7 @@ REM demo - + diff --git a/spec/e2e/html/2384_update_content.html b/spec/e2e/html/2384_update_content.html new file mode 100644 index 000000000..b1444e204 --- /dev/null +++ b/spec/e2e/html/2384_update_content.html @@ -0,0 +1,56 @@ + + + Nested grid update content + + + + + + +

Nested grid when updating content

+
+ + +
+
+
+ + + diff --git a/src/gridstack.ts b/src/gridstack.ts index 442b98702..0ca0d0749 100644 --- 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; }