Gridstack - If I destroy the grid before reinitialisation the later fails

Question

THE CODE

Note: All the functions posted here are inside a same file interface.js.

I added an event listener which is executed every time window resizes:

window.addEventListener("resize",
    function(_resize){
        _window_resize_handler(_resize);
    }
);

When event resize happens the handler function _window_resize_handler() which determines (a) if window is wide enough and (b) if we are on mobile / desktop. Based on this it calls one of the two Gridstack.js initialisation functions (one is for desktop and one for mobile):

function _window_resize_handler(_resize){

    // Screen properties
    let _dpi = window.devicePixelRatio;
    let _sw = screen.width;
    let _sh = screen.height;
    let _ss = _sw + _sh;
    let _ar;
    let _sww;

    // Window properties
    let _ww = window.innerWidth;

    // We calculate the aspect ratio in landscape format - this is the only one we need.
    if (_sw > _sh){
        _ar = _sw / _sh;
    }
    else{
        _ar = _sh / _sw;
    }

    // We set the longer dimension of the two to be screen width.
    if (_sw > _sh){
        _sww = _sw;
    }
    else{
        _sww = _sh;
    }

    // If window width is too narrow we use Gridstack's one-column mode regardless of the device.
    // Otherwise we let screen properties decide.
    if (_ww < 768){
        _gridstack_init_mobile();
    }
    else if( ((_ar < 1.78) && (_dpi < 2.5 ) && (_sww > 768)) || (_ss > 2000)){  
        _gridstack_init_desktop();
    }
    else{
        _gridstack_init_mobile();
    }

}

The Gridstack.js initialisation functions are like this:

For desktop:

function _gridstack_init_desktop(){

    // Create global object "grid" with window.
    window.grid = GridStack.init({
        acceptWidgets: false,                         
        alwaysShowResizeHandle: true,               
        animate: false,                               
        auto: true,                       
        // cellHeight: "15.45rem", 
        // column: 12,                               
        disableDrag: false,                          
        disableOneColumnMode: true, 
        disableResize: false,                        
        draggable: true,                  
        dragOut: false,                   
        float: true,                      
        handle: '.grid-stack-item-content',
        handleClass: 'grid-stack-item-content',
        itemClass: 'grid-stack-item',          
        maxRow: 6,                             
        minRow: 6,                             
        minWidth: 768,                         
        oneColumnDomSort: false,               
        placeholderClass: 'grid-stack-placeholder', 
        placeholderText: '',                        
        resizable: {                                
            autoHide: false,
            handles: 'n, nw, w, sw, s, se, e, ne'
        },
        removeable: false,                          
        removeTimeout: 2000,                        
        //row: 6,                                   
        rtl: false,                    
        staticGrid: false,             
    });

    grid.column(12);
    grid.cellHeight("15.45rem");


}

For mobile:

function _gridstack_init_mobile(){

    // Create global object "grid" with window.
    window.grid = GridStack.init({
        acceptWidgets: false, 
        alwaysShowResizeHandle: true,
        animate: false,                               
        auto: true,                                  
        // cellHeight: "15.45rem",                   
        // column: 12,                              
        disableDrag: false,                         
        disableOneColumnMode: false,                
        disableResize: false,                      
        draggable: true,                            
        dragOut: false,                               
        float: true,                                  
        handle: '.grid-stack-item-content',          
        handleClass: 'grid-stack-item-content',       
        itemClass: 'grid-stack-item',                
        maxRow: 72,                                   
        minRow: 6,                                    
        minWidth: 768,                                
        oneColumnDomSort: false,                      
        placeholderClass: 'grid-stack-placeholder',   
        placeholderText: '',                          
        resizable: {                                  
            autoHide: false,
            handles: 'n, nw, w, sw, s, se, e, ne'
        },
        removeable: false,                            
        removeTimeout: 2000,                          
        //row: 6,                       
        rtl: false,            
        staticGrid: false,     
        verticalMargin: "0",   
    });

    grid.column(1);
    grid.cellHeight("47.15vh");

}

---

THE RESULTS

This partialy works but only if inside Chrome dev tools I tweak between screens that all trigger the _gridstack_init_mobile(). These are mostly screens for mobile phones:

When I choose e.g. iPad screen that triggers the _gridstack_init_desktop() something goes wrong during the initialisation and I get 1 column instead of 12 (picture on the left). But if I refresh everything is fine and I get 12 columns (picture on the right):

---

MY SPECULATION

My speculation is that I need to destroy the grid object (if it exists) before I re-initialize it again as a Gridstack object. This is why I tried to put this part of code at the top of _gridstack_init_mobile() and _gridstack_init_mobile():

if (document.getElementsByClassName('grid-stack').length != 0){
    grid.destroy();
}

But I get an error:

interface.js:372 Uncaught ReferenceError: grid is not defined
    at _gridstack_init_desktop (interface.js:372)
    at _window_resize_handler (interface.js:359)
    at interface.js:8

Anyone has any idea?

Answer 1

why do you need to destroy if all you need is change the column number ? (for which there is an API). removeAll(removeDOM = true) would remove gridstack info otherwise. you can change any property even if there isn't an api grid.opts.maxRow=72 , you just won't have any code execute to a change if one was required until the next action happens.

if there is a bug in the lib you should create a minimal reproduceable case and post it as a bug rather than expect someone to read your stack overflow Q... also you fail to say what rev your are using. Try 2.0.0, and from a glance you are using 12 columns but the grid initially comes out with 1 column - also you can't init the same grid multiple times but you can set column(1), removing the dom elements will nuke everything, and you don't even show what your dom starts with. Also don't init with the options in the world, only non default (hard to read otherwise).