Windows Resize

[mrupload]

Hello How can I update gridster on windows resize and re initialize it ? I search for responsive gridster but I fail to do responsive gridster

Can you tell me exact code that I must use ?

[ascendantofrain]

Here is what I've been using....although it comes with one small bug that I've noticed. When resizing the browser, the preview-holder doesn't get resized as the main panels do. This is based on a three column grid hence all of the math being used.

        var gridsterWidth = $('.gridster').width(),
            widgetWidth = (gridsterWidth / 3) - 23,
            widgetHeight = widgetWidth / 2.1667,
            widgetDimensions = [widgetWidth, widgetHeight];

        var gridster = function (dx) {
            $(element).gridster({
                draggable: {
                    handle: '.handle'
                },
                helper: 'clone',
                max_cols: 3,
                widget_margins: [10, 10],
                widget_base_dimensions: dx
            }).data('gridster');
        };

        gridster(widgetDimensions);

        $(window).smartresize(function () {
            $(element).gridster().data('gridster').destroy();

            var newGridsterWidth = $('.gridster').width(),
                newWidgetWidth = (newGridsterWidth / 3) - 23,
                newWidgetHeight = newWidgetWidth / 2.1667,
                newWidgetDimensions = [newWidgetWidth, newWidgetHeight];

            gridster(newWidgetDimensions);
        });

[rinkurajat]

@mrupload and @ascendantofrain - Please refer #436

[ascendantofrain]

Here is a better version of my previous code using Knockout JS.

ko.bindingHandlers.gridster = {
    buildGrid: function (e) {
        $(e).gridster().data('gridster').destroy();

        var gridsterWidth = $('.gridster').width(),
            widgetWidth = (gridsterWidth / 3) - 23,
            widgetHeight = widgetWidth / 2.1667,

            gridster = function(dx) {
                $(e).gridster({
                    draggable: {
                        handle: '.handle'
                    },
                    max_cols: 3,
                    widget_margins: [10, 10],
                    widget_base_dimensions: dx
                }).data('gridster');
            };

        gridster([widgetWidth, widgetHeight]);
    },
    init: function (element) {
        $(window).smartresize(function () { ko.bindingHandlers.gridster.buildGrid(element); });
        ko.bindingHandlers.gridster.buildGrid(element);
    },
    update: function(element, valueAccessor) {
        var options = ko.unwrap(valueAccessor());
        ko.bindingHandlers.gridster.buildGrid(element);
    }
};