Saving / Loading Grid System

[burgoyne]

After setting up my grid, I have a button that can save the placement of the tiles. It takes in the x/y coordinates, and the height/width and saves them as a json string. Then you can move the tiles around, and press the load button to bring them back to how they were saved.

Here is a fiddle to show my program:
https://jsfiddle.net/xqLfr4ja/

Reproduce problem:
Click Edit UI, then click Chart 1, then click Chart 2
Click Edit UI, then click Save
Click Edit UI, then click Load (notice all the tiles contents have been changed to the default tile)

My problem is with this line (js: 150):
myGrid.load(JSON.parse($('#tile-placement').val()), '#default-tile');

When loading the tiles in, they are always sized right, and in the correct position, but they all have the "#default-tile" contents. How can I change that to load the proper tile contents? I am assuming I need to pass the id into the json I save, but I am not sure how.

[radiolips]

When you're saving, you should be saving the contents, I assume? I need a little more clarity on this. I'm also a little concerned that this one is bordering on asking someone to do your homework for you...

[burgoyne]

Not homework, I've just been stumped for a while and haven't been able to get it properly working. I have been searching, and trying different things, but I can't get it to load the contents.

In my example, I load a default tile (just says default tile), and then I give the user the option to add two other tiles, both with different contents. One says chart 1, the other says chart 2. If the user configures the tiles how they want, and saves them, when they are loaded again, they all load in as the default tile because of line 150 in my JS.

I'm wondering how I can go about saving the contents of the tiles to my json string along with the x/y coordinates, and height/width values. I assume I do this by loading the tile id with the x, y, height, and width values? But how would I get that id? Or is there a different way I should be doing that?

[radiolips]

In this function, you can use all normal DOM manipulation:

    function save() {
        return $.makeArray($(id + ' > .grid-stack-item:visible')).map(function (v) {
            var n = $(v).data('_gridstack_node');
            return n ? { x: n.x, y: n.y, width: n.width, height: n.height } : null;
        });
    }

So you can do something with the contents of v, which is the DOM element.

[burgoyne]

If I add id: n.id, to the second return line in that method, and add id to line 150 in JS, the load button doesn't work.

How I originally had it, this is the json returned (for 3 widgets):
[{"x":0,"y":4,"width":2,"height":2},{"x":0,"y":2,"width":2,"height":2},{"x":0,"y":0,"width":2,"height":2}]

So I would need to add the id to each of those widgets in that json string, right? I would also need to change line 150 in JS from '#default-tile', to something that pulls an id matching the id in json? Or could I just write line 150 differently to pull the id straight from the json string? Sorry, I don't have much JS experience.

[burgoyne]

Just thought I would say that I have resolved my issue.

in the addTile function, I changed the addWidget line to this:
gridObj.addWidget(tile, x, y, w, h, null, null, null, null, null, defaultTile);

Then in the save function:
var gsId = $(v).data('gs-id'); return n ? { x: n.x, y: n.y, width: n.width, height: n.height, gsId } : null;

Then the load function:
$.each(data, function (k, v) { addTile(v.gsId || defaultTile, v.x, v.y, v.width, v.height); });

And finally the #save-grid.click function:
myGrid.load(JSON.parse($('#tile-placement-string').val()));

Now it's saving/ loading as it should!