From a50156787b6f620d9f3088a385d3e49293a402be Mon Sep 17 00:00:00 2001
From: Pavel Reznikov <pashka.reznikov@gmail.com>
Date: Sun, 1 Mar 2015 23:10:46 -0800
Subject: [PATCH] save to array sample

---
 README.md | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/README.md b/README.md
index 7dfb400..fd10eca 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,7 @@ Inspired by [gridster.js](http://gridster.net). Built with love.
   - [Touch devices support](#touch-devices-support)
   - [Use with knockout.js](#use-with-knockoutjs)
   - [Change grid width](#change-grid-width)
+  - [Save grid to array](#save-grid-to-array)
   - [Load grid from array](#load-grid-from-array)
   - [Override resizable/draggable options](#override-resizabledraggable-options)
   - [IE8 support](#ie8-support)
@@ -472,6 +473,29 @@ For 4-column grid it should be:
 
 and so on.
 
+## Save grid to array
+
+Because gridstack doesn't track any kind of user-defined widget id there is no reason to make serialization to be part
+of gridstack API. To serialize grid you can simply do something like this (let's say you store widget id inside `data-custom-id` 
+attribute):
+
+```javascript
+var res = _.map($('.grid-stack .grid-stack-item:visible'), function (el) {
+    el = $(el);
+    var node = el.data('_gridstack_node');
+    return {
+        id: el.attr('data-custom-id'),
+        x: node.x,
+        y: node.y,
+        width: node.width,
+        height: node.height
+    };
+});
+alert(JSON.stringify(res));
+```
+
+You can also use `onchange` event if you need to save only changed widgets right away they have been changed. 
+
 ## Load grid from array
 
 ```javascript
@@ -497,6 +521,8 @@ _.each(serialization, function (node) {
 });
 ```
 
+If you're using knockout there is no need for such method at all.
+
 ## Override resizable/draggable options
 
 You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle