Get new size of Gridster widget after resize

Question

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?

Answer 1

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.