add batch_update/commit methods

README.md

@@ -26,9 +26,11 @@ Inspired by [gridster.js](http://gridster.net). Built with love.
     - [onresizestop(event, ui)](#onresizestopevent-ui)
   - [API](#api)
     - [add_widget(el, x, y, width, height, auto_position)](#add_widgetel-x-y-width-height-auto_position)
+    - [batch_update()](#batch_update)
     - [cell_height()](#cell_height)
     - [cell_height(val)](#cell_heightval)
     - [cell_width()](#cell_width)
+    - [commit()](#commit)
     - [disable()](#disable)
     - [enable()](#enable)
     - [get_cell_from_pixel(position)](#get_cell_from_pixelposition)
@@ -218,6 +220,10 @@ var grid = $('.grid-stack').data('gridstack');
 grid.add_widget(el, 0, 0, 3, 2, true);
 ```
 
+### batch_update()
+
+Initailizes batch updates. You will see no changes until `commit` method is called. 
+
 ### cell_height()
 
 Gets current cell height.
@@ -235,6 +241,10 @@ grid.cell_height(grid.cell_width() * 1.2);
 
 Gets current cell width.
 
+### commit()
+
+Finishes batch updates. Updates DOM nodes. You must call it after `batch_update`.
+
 ### disable()
 
 Disables widgets moving/resizing. This is a shortcut for:
@@ -616,6 +626,7 @@ Changes
 
 #### v0.2.3 (development version)
 
+- add `batch_update`/`commit` methods
 - add `update` method
 - allow to override `resizable`/`draggable` options
 - add `disable`/`enable` methods

src/gridstack.js

@@ -67,6 +67,23 @@
 
         this.nodes = items || [];
         this.onchange = onchange || function () {};
+
+        this._update_counter = 0;
+        this._float = this.float;
+    };
+
+    GridStackEngine.prototype.batch_update = function () {
+        this._update_counter = 1;
+        this.float = true;
+    };
+
+    GridStackEngine.prototype.commit = function () {
+        this._update_counter = 0;
+        if (this._update_counter == 0) {
+            this.float = this._float;
+            this._pack_nodes();
+            this._notify();
+        }
     };
 
     GridStackEngine.prototype._fix_collisions = function (node) {
@@ -188,6 +205,9 @@
     };
 
     GridStackEngine.prototype._notify = function () {
+        if (this._update_counter) {
+            return;
+        }
         var deleted_nodes = Array.prototype.slice.call(arguments, 1).concat(this.get_dirty_nodes());
         deleted_nodes = deleted_nodes.concat(this.get_dirty_nodes());
         this.onchange(deleted_nodes);
@@ -502,6 +522,9 @@
     };
 
     GridStack.prototype._update_container_height = function () {
+        if (this.grid._update_counter) {
+            return;
+        }
         this.container.height(this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) - this.opts.vertical_margin);
     };
 
@@ -789,6 +812,15 @@
         return {x: Math.floor(relativeLeft / column_width), y: Math.floor(relativeTop / row_height)};
     };
 
+    GridStack.prototype.batch_update = function () {
+        this.grid.batch_update();
+    };
+
+    GridStack.prototype.commit = function () {
+        this.grid.commit();
+        this._update_container_height()
+    };
+
     scope.GridStackUI = GridStack;
 
     scope.GridStackUI.Utils = Utils;