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

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>