From bee6ff6e310a0620aad97f128896d3c351e7c4ec Mon Sep 17 00:00:00 2001
From: Kevin Dietrich <hallo@kevin-dietrich.com>
Date: Mon, 26 Oct 2015 12:31:06 +0100
Subject: [PATCH] API make_widget functionality

---
 README.md        | 18 ++++++++++++++++++
 src/gridstack.js |  9 +++++++++
 2 files changed, 27 insertions(+)

diff --git a/README.md b/README.md
index 675da5e..66ad6a9 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ 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)
+    - [make_widget(el)](#make_widgetel)
     - [batch_update()](#batch_update)
     - [cell_height()](#cell_height)
     - [cell_height(val)](#cell_heightval)
@@ -238,6 +239,23 @@ var grid = $('.grid-stack').data('gridstack');
 grid.add_widget(el, 0, 0, 3, 2, true);
 ```
 
+### make_widget(el)
+
+If you add elements to your gridstack container by hand, you have to tell gridstack afterwards to make them widgets. If you want gridstack to add the elements for you, use `add_widget` instead.
+Makes the given element a widget and returns it.
+
+Parameters:
+
+- `el` - element to convert to a widget
+
+```javascript
+$('.grid-stack').gridstack();
+
+$('.grid-stack').append('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="1"></div>')
+var grid = $('.grid-stack').data('gridstack');
+grid.make_widget('gsi-1');
+```
+
 ### batch_update()
 
 Initailizes batch updates. You will see no changes until `commit` method is called. 
diff --git a/src/gridstack.js b/src/gridstack.js
index afd7843..53b0fcb 100644
--- a/src/gridstack.js
+++ b/src/gridstack.js
@@ -735,6 +735,15 @@
         return el;
     };
 
+    GridStack.prototype.make_widget = function(el) {
+        el = $(el);
+        this._prepare_element(el);
+        this._update_container_height();
+        this._trigger_change_event(true);
+
+        return el;
+    };
+
     GridStack.prototype.will_it_fit = function(x, y, width, height, auto_position) {
         var node = {x: x, y: y, width: width, height: height, auto_position: auto_position};
         return this.grid.can_be_placed_with_respect_to_height(node);