Save gridster layout using angularjs

Question

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 that I store charts array to database and fetch it. Is it possible to store widget col,row and size to specific widget so I could then give the size-x and size-y with angular style {{chart.xsize}}. When creating widget I could then assign default size values and save only after user has resized or dragged widget. Or is this completely wrong way to do this? How else I could store the widget sizes and positions to database?

I have ng-repeat for my widgets like this:

  <div ng-if="chart.type === settings.types.LINEAR_GAUGE">
      <div class="panel c8y" gridster-item size-x="2" size-y="1">
        <div class="panel-heading">
          <h3 class="panel-title">{{chart.title}}</h3>
          <button class="btn btn-danger pull-right btn-xs" ng-click="onClickDelete($index)"><span class="glyphicon glyphicon-remove"/></button>
        </div>
        <div class="panel-body">
          <c8y-linear-gauge dp="chart.dp" measurement="chart.data[0].measurement"/>
        </div>
      </div>
  </div>

score 0 · Accepted Answer · answered Aug 19 '16 at 15:27

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.

Thank you, this is what I was thinking to do, but my logic was just bit wrong. Now it saves the layout and sizes nicely! — Shnigi, Aug 22 '16 at 07:37
@Shnigi help me if u can on https://stackoverflow.com/questions/49769507/align-gridster-items-using-row-and-col-values-angularjs — Abhishek Sharma, Apr 11 '18 at 10:13

Save gridster layout using angularjs

1 Answers1

Linked