Save Gridster Layout Using Angularjs

I am creating dashboard application with Gridster: https://github.com/ManifestWebDesign/angular-gridster I would like to save my layout to database using JSON. What I do know, is t

Solution 1:

I've actually built several angular dashboards using angular-gridster, and save the layout back to the database. Here is how I do it:

    <div gridster="gridsterOpts">
        <ul>
                <li
                    gridster-item
                    row="element.posY"
                    col="element.posX"
                    size-x="element.width"
                    size-y="element.height"
                    ng-repeat="element in elements track by $index">
                    <div class="element-title">
                        <!--some header stuff goes here-->
                    </div>
                    <div class="element-useable-area">
                        <!--Main widget stuff goes here-->
                    </div>
                </li>
        </ul>
    </div>

So I have an array called elements where I am storing my widget objects. Each object in the array includes properties for the height and width and size. So, something like this:

{
    posY: 0,
    posX: 0,
    width: 100,
    height: 100,
    templateUrl: ...,
    data: ...
}

Fortunately because of angular binding, when the user changes the gidster item size or position, it changes the property value too! Its important to note that the elements array is appended to a $sessionStorage object from the ngStorage framework I use, so that all the changes will be persisted if the page refreshes.

Eventually, when the user saves the dashboard, I write an object to the database which includes the elements array. Thus saving all the location and size info. The next time you call that object from the database, and populate the elements array with its data, you get back the same dashboard.