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?
I am using gridstack.js v2.0 and trying to build a dashboard. I have posted a part of my html below
I am able to render it properly and
dragandresizeworks just fine. Now I need tosaveandloadthe layout and so I use local storage. This is what I doTo load, it's as simple as
But when I print the output of the serialised data, this is how it looks like
What I observed is that it doesn't store the content of grid items. In earlier version, one could do something like this
Here one could store the content and retrieve it later. But from v2.0 onwards
gridstackjshas providedsave()andload()functionalities that do way with writing these extra lines of code and the subsequentjquerydependency. 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?