Gridstack.js get positions from JSON

Question

I'm working now with Gridstack.js and it's good for me, but (there is always a but) does someone knows how i can position the grid-stack-item as defined in a JSON array?

Example HTML

<div class="grid-stack">
    <div id="1" class="grid-stack-item">
            <div class="grid-stack-item-content"></div>
    </div>
    <div id="2" class="grid-stack-item">
            <div class="grid-stack-item-content"></div>
    </div>
    <div id="3" class="grid-stack-item">
            <div class="grid-stack-item-content"></div>
    </div>
</div>

My JSON

 [{"widgetId":"1","x":0,"y":2,"width":3,"height":4},{"widgetId":"2","x":1,"y":6,"width":3,"height":1},{"widgetId":"3","x":0,"y":7,"width":3,"height":4}]

I can not find anything about that in the documentation. And i am afraid i is not possible.

Uhh ok, maybe i can use the "add_widget(el, x, y, width, height, auto_position)" to do that? Just looping through the JSON with a function? Or isn't that the way to do it? — D3F, Jan 16 '15 at 11:36

score 1 · Answer 1 · edited Jun 22 '20 at 03:16

I also had a terrible headache figuring out how to make this possible. I get my grid data from a jQuery post which returns JSON data and builds te positions array. In your case this could be:

    var seri_data = [];
    this.serialized_data = seri_data;

    jQuery.post( 'yourfile.php', function( data ) {
            
        jQuery.each( data, function( key, value ) {

            seri_data.push({
                'id'        : this.widgetId,
                 'x'        : this.x,
                 'y'        : this.y,
                 'width'    : this.width,
                 'height'   : this.height,
             });
            
         });
            
     });

Use the code below, it's the base of the gridstack serialization demo example which can be found here. Open that page's source and look at the load function part... Change it's code with the code provided below.

 _.each( items, function( node ) { this.grid.add_widget( jQuery( '<div data-gs-id="widget_' + node.id + '" class="grid-stack-item"><div class="grid-stack-item-content"></div></div>' ), node.x, node.y, node.width, node.height ); }, this );

Gridstack.js get positions from JSON

1 Answers1

Linked