Gridstack dynamically created widgets are not dragging

Question

I'm using GridStack library for creating a responsive layout for my widgets. Here is my function in which I'm creating widget on button click

function AddWidget()
    {
        var grid =  $('.grid-stack').data('gridstack');

        var html = '<div class="grid-stack-item-content">';
        html += '<div class="col-md-3"> <label> Sample Textbox </label></div>';
        html += '<div class="col-md-9"> <input type="text" class="form-control" /> </div>';
        html += '</div>';

        grid.addWidget($(html), 0, 0, 4, 1)
    }

Widget is creating successfully. I'm able to resize it too. But the problem is that they are not draggable. I can see ui-draggable class on my widget items html but they are not dragging.

If I already define widgets in my layout and then initialize stackgrid those are working fine.

Answer 1

Checkout the Gridstack float grid demo here http://gridstackjs.com/demo/float.html

Adding another div fixes your issue - you need to have the div with class="grid-stack-item-content" nested inside another div. This top div will be initialised as the widget.

For example:

function AddWidget()
{
    var grid =  $('.grid-stack').data('gridstack');
    var html = '<div>'
    html += '<div class="grid-stack-item-content">';
    html += '<div class="col-md-3"> <label> Sample Textbox </label></div>';
    html += '<div class="col-md-9"> <input type="text" class="form-control" /> </div>';
    html += '</div></div>';

    grid.addWidget($(html), 0, 0, 4, 1)
}

This fixes your issue and correctly add a widget you can now drag as normal. Hope that helps!

Answer 2

When you need help and people give you wrong information, it gets even worse, if you don't know where to go, don't indicate, in addition to being disrespectful, it forces people to look for things that don't exist.

Probably your mistake was the same as mine, I ignored a parent div, including <div class="grid-stack-item-content"> directly, when it shouldn't, because it is the daughter of <div class="grid-stack-item">, see the correct formatting:

<div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content"><input type="text"></div>
        </div>
    </div>

Put it in the click function and see if it works for you:

<script>
$grid = $('.grid-stack'); 
const widget = '<div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes"><div class="grid-stack-item-content"><input type="text" class="form-control"></div></div>';
$grid.data('gridstack').addWidget(widget);
</script>

Answer 3

You can try

let grid = GridStack.init();
let customContent = '<span>My custom content</span>';

const DEFAULT_HEIGHT = 2;
const DEFAULT_WIDTH = 2;


grid.addWidget({w: DEFAULT_WIDTH, h: DEFAULT_HEIGHT, content: customContent});

Answer 4

For me jQuery was being loaded on the page elsewhere and was causing a conflict with the part of GridStack that adds the resize element after adding a widget, additionally causing any subsequent JS to fail.

I got around this by removing the <script> tag to add the GridStack JS and used the below instead:

    window.addEventListener("load", function(){
        jQuery.getScript("https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.all.js", function(){;
            // your GridStack code
        })
    })

The framework author plans on removing jQuery soon, fortunately!