Repository navigation
How to store layout content as well using save() method? #1418
Description
I am using gridstack.js v2.0 and trying to build a dashboard. I have posted a part of my html below
<div class="grid-stack-item ui-draggable-handle ui-resizable" data-gs-x="0" data-gs-y="0" data-gs-width="6" data-gs-height="4" data-gs-id="0">
<div class="grid-stack-item-content ui-draggable-handle cardProperty">
<object class="chart" style="height:100%; width:100%; " data="/path/to/svg" type="image/svg+xml"></object>
</div>
</div>
<div class="grid-stack-item ui-draggable-handle ui-resizable" data-gs-x="7" data-gs-y="0" data-gs-width="4" data-gs-height="2" data-gs-id="1">
<div class="grid-stack-item-content ui-draggable-handle cardProperty">
<object class="chart" style="height:100%; width:100%; " data="/path/to/svg" type="image/svg+xml"></object>
</div>
</div>
I am able to render it properly and drag and resize works just fine. Now I need to save and load the layout and so I use local storage. This is what I do
simpleGrid = GridStack.init({
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator
.userAgent),
resizable: {
handles: 'e, se, s, sw, w, n'
},
animate: true,
acceptWidgets: true,
dragIn: '.newWidget', // class that can be dragged from outside
dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' },
removable: '#trash', // drag-out delete class
removeTimeout: 100,
});
serializedData = simpleGrid.save();
localStorage.setItem("grid-layout", JSON.stringify(serializedData, null, ' '))
To load, it's as simple as
serializedData = localStorage.getItem("grid-layout"))
console.log("load serializedData", serializedData)
But when I print the output of the serialised data, this is how it looks like
[
{
"x": 0,
"y": 0,
"width": 6,
"height": 4,
"id": "0"
},
{
"x": 7,
"y": 0,
"width": 4,
"height": 2,
"id": "1"
}
]
What I observed is that it doesn't store the content of grid items. In earlier version, one could do something like this
$('.grid-stack-item.ui-draggable').each(function () {
var $this = $(this);
items.push({
x: $this.attr('data-gs-x'),
y: $this.attr('data-gs-y'),
w: $this.attr('data-gs-width'),
h: $this.attr('data-gs-height'),
content: $('.grid-stack-item-content', $this).html()
});
});
localStorage.setItem("grid-layout", JSON.stringify(items))
Here one could store the content and retrieve it later. But from v2.0 onwards gridstackjs has provided save() and load() functionalities that do way with writing these extra lines of code and the subsequent jquery dependency. However it doesn't store the layout content anymore. Is there any way to store the content as well? Or am I missing out something?
Activity
adumesny commentedon Oct 26, 2020
no, I did not store the html content as that may be very app specific. saving the html might not work and be sufficient for some app (like my angular based app) that is why I save the id (and all other attributes) so app can fill in their custom content as well.
But I supposed I could by default save content (I already added the option to
load()custom content (in upcoming version as I found it handy for the demos) so yeah let me do that...Souvikray commentedon Oct 26, 2020
Ok great. Yes you could give an optional parameter to
save()that could take in a boolean value to save the html content. So any user who wants store the html content may optionally pass this parameter. This would be a great addition to this awesome library.adumesny commentedon Oct 26, 2020
don't forget to contribute $ or time to help this lib! since you are Ray$$$ :)
Souvikray commentedon Oct 27, 2020
@adumesny haha sure mate!
save() will now optionally save grid HTML content
adumesny commentedon Oct 27, 2020
will be in next release...
V2: save() will now optionally save grid HTML content