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

Question

I just started using the Gridster jQuery plugin and I am having problems using gridster.serialize (). According to the site, it is supposed to create an array of JavaScript objects with the positions of all widgets, ready for encoding as a JSON string.

I have only the base code:

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

With the appropriate 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 I don’t quite understand how the gridster.serialize () function works. I'm just trying to write the current size / position of all the fragments in my grid and put it in some kind of array. Does anyone have any idea?

EDIT: Here is the site .

Answer 1

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())
        });