2

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.

Aamir Ali
  • 171
  • 3
  • 11

4 Answers4

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!

Steve Quinn
  • 26
  • 2
  • Your demo is not working. It has same behaviour as it had in my code. The widget is created but its not moving or dragging – Aamir Ali Oct 05 '18 at 10:11
  • @AamirAli: Did you find a solution for this? Because the selected answer does not solve the issue for me. – Grogu Oct 18 '21 at 17:52
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>
Macedo_Montalvão
  • 463
  • 6
  • 14
0

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/gridstack@1.1.0/dist/gridstack.all.js", function(){;
            // your GridStack code
        })
    })

The framework author plans on removing jQuery soon, fortunately!

Kohaku
  • 39
  • 6
0

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});
PululuK
  • 113
  • 1
  • 6