Resetting Gridster to the original positions

Question

With http://gridster.net/, how can I move all the tiles to their original position (undo user changes)?

Answer 1

I didn't find a built-in function to reset the grid to the original positions, but I found a solution. We have two types of tiles - content items and content categories. We use data-content-item-id and data-content-category-id attributes to define their unique id (you can also use the id attribute).

$(document).ready(function() {
    var gridster;

    function create_gridster() {
        gridster = $(".gridster div.gridster-container").gridster({
            widget_selector: ".gridster div.gridster-container div.thumbnail",
            widget_margins: [5, 5],
            widget_base_dimensions: [103, 70],
            min_cols: 6,
            max_cols: 6,
            min_rows: 4,
            serialize_params: function($w, wgd) {
                if ($w.hasClass("content-item")) {
                    return {
                        type: "content_item",
                        tile_id: parseInt($w.attr("data-content-item-id")),
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };
                } else if ($w.hasClass("content-category")) {
                    return {
                        type: "content_category",
                        tile_id: parseInt($w.attr("data-content-category-id")),
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };
                }
            }
        }).data('gridster');
    }

    create_gridster();
    var original_grid_data = gridster.serialize();

    $("a.reset-preview-locations").click(function() {
        if (!confirm("Are you sure you want to reset your changes and use saved locations?")) {
            return false;
        }
        for (var i = 0; i < original_grid_data.length; i++) {
            switch (original_grid_data[i].type) {
                case "content_item":
                    var thumbnail_element = $(".gridster div.gridster-container div.content-item.thumbnail[data-content-item-id='" + original_grid_data[i].tile_id.toString() + "']");
                    thumbnail_element.attr("data-row", original_grid_data[i].row.toString());
                    thumbnail_element.attr("data-col", original_grid_data[i].col.toString());
                    break;

                case "content_category":
                    var thumbnail_element = $(".gridster div.gridster-container div.content-category.thumbnail[data-content-category-id='" + original_grid_data[i].tile_id.toString() + "']");
                    thumbnail_element.attr("data-row", original_grid_data[i].row.toString());
                    thumbnail_element.attr("data-col", original_grid_data[i].col.toString());
                    break;

            }
        }
        gridster.destroy(false);
        create_gridster();
        return false;
    });
});