Gridstack.js Get Positions From Json

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 HT

Solution 1:

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( '<divdata-gs-id="widget_' + node.id + '"class="grid-stack-item"><divclass="grid-stack-item-content"></div></div>' ), node.x, node.y, node.width, node.height ); }, this );