How to store layout content as well using `save()` method?

[Souvikray]

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?

[adumesny]

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]

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]

don't forget to contribute $ or time to help this lib! since you are Ray$$$ :)

[Souvikray]

@adumesny haha sure mate!

[adumesny]

will be in next release...