Using Gridster, we have created a grid with resizable widgets using the resize.enabled config option.

After the user finishes resizing a Gridster widget, we would like to get new final size of the widget. How can we do this?

Using Gridster, we have created a grid with resizable widgets using the resize.enabled config option.

After the user finishes resizing a Gridster widget, we would like to get new final size of the widget. How can we do this?

• javascript
• jquery
• gridster

2 Answers 2

I have recently been working with gridster resizing too. Here is how I grabbed the size

 $(function () { //DOM Ready
    $scope.gridster = $(".gridster ul").gridster({
        ...
        resize: {
            enabled: true,
            start: function (e, ui, $widget) {
                ...
            },
            stop: function (e, ui, $widget) {
                var newHeight = this.resize_coords.data.height;
                var newWidth = this.resize_coords.data.width;
                ...
            }
        },
        ...
    }).data('gridster');
});

The 'newHeight' and 'newWidth' can be read within the resize-stop event. You can also explore the 'this' instance to get the sizes in units, rather than pixels.

If you want the new size in Gridster blocks, instead of in pixels, you have a couple of choices.

Firstly, your Gridster instance gets two properties added to it that contain this information after the resize event:

• .resize_last_sizex - the new width of the most recently resized widget, in grid blocks
• .resize_last_sizey - the new height of the most recently resized widget, in grid blocks

However, the existence of these is presently undocumented and it's not clear to me whether client code is supposed to use them.

Perhaps a cleaner approach is to use the .serialize() method, passing it the widget that was just resized. You can get the widget from the arguments passed to the .resize.stop handler. You can use the .size_x and .size_y properties of the objects returned by .serialize() to get size of the newly resized widget in grid blocks.

Example:

var gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 100],
    widget_margins: [5, 5],
    helper: 'clone',
    resize: {
        enabled: true,
        stop: function (e, ui, $widget) {
            var newDimensions = this.serialize($widget)[0];

            alert("New width: " + newDimensions.size_x);
            alert("New height: " + newDimensions.size_y);

            // Alternative approach; these properties are undocumented:
            // alert("New width: " + this.resize_last_sizex);
            // alert("New height: " + this.resize_last_sizey);
        }
    }
}).data('gridster');

Here's a jsfiddle demonstrating the above code.