not sure how to use gridster.serialize() with Gridster jQuery plugin

Question

I've just started using the Gridster jQuery plugin and I'm having trouble using gridster.serialize(). According to the site, it is supposed to create a JavaScript array of objects with positions of all the widgets, ready to be encoded as a JSON string.

I just have some basic code:

        $(function(){ //DOM Ready
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140]
            });
        });

With corresponding HTML:

    <div class="gridster">
        <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">1</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">1</li>

        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">2</li>
        <li data-row="2" data-col="2" data-sizex="3" data-sizey="2">2</li>

        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">3</li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1">3</li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1">3</li>
        </ul>
    </div>

And it's not entirely clear to me how the gridster.serialize() function is suppose to work. I'm just trying to record the current size/position of all the tiles in my grid and put it into an array of some kind. Anyone have any ideas?

EDIT: Here's the site.

score 16 · Accepted Answer · edited Apr 19 '16 at 08:25

Got it.

        var gridster = $(".gridster ul").gridster().data('gridster');
        $(function(){ //DOM Ready
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140],
                serialize_params: function($w, wgd) { 
                    return { 
                           id: $w.attr('id'), 
                           col: wgd.col, 
                           row: wgd.row, 
                           size_x: wgd.size_x, 
                           size_y: wgd.size_y 
                    };
                }
            })
            var gridster = $(".gridster ul").gridster().data('gridster');
            gridData = gridster.serialize();
            alert(gridData.toSource())
        });

not sure how to use gridster.serialize() with Gridster jQuery plugin

1 Answers1