Skip to content

Nested grid support with content update #2387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Jul 9, 2023
Merged

Nested grid support with content update #2387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion spec/e2e/html/2357_rem.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
56 changes: 56 additions & 0 deletions spec/e2e/html/2384_update_content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 9 additions & 11 deletions src/gridstack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
}

Expand Down