Gridstack - Add new widgets with content

Question

So, I have been playing with Gridstack and was wondering if there was a guide on how to add content to a newly added widget.

I have tested the example that adds a widget on button click. [Knockout.js demo][1] [1]: http://troolee.github.io/gridstack.js/demo/knockout.html which works fine but what I would like to do is add multiple buttons each adding a new widget with separate content. The content is just a DIV ID to some other JS.

Thanks

Your link is not working anymore. – 71GA Aug 10 '20 at 06:31 — 71GA, Aug 10 '20 at 06:31

score 3 · Answer 1 · answered May 27 '17 at 15:22

Here are two Buttons to add two different div contents using gridstack.

<button class="btn btn-default" id="first_widget" value="FirstWidget" href="#">First Widget</button>
<button class="btn btn-default" id="second_widget" value="SecondWidget" href="#">Second Widget</button>

In script initialize this way:

$('#first_widget').click(function(){
                var el = $.parseHTML("<div><div class=\"grid-stack-item-content\"/> First Widget Content <div/>");
                var grids = $('.grid-stack').data('gridstack');
                grids.add_widget(el, 1, 1, 4, 1, true);
            });

    $('#second_widget').click(function(){
                var el = $.parseHTML("<div><div class=\"grid-stack-item-content\"/> Second Widget Content / Charts <div/>");
                var grids = $('.grid-stack').data('gridstack');
                grids.add_widget(el, 1, 1, 4, 1, true);
            });

Thanks for this Sarat. This adds the content (Text etc) but it doesn't seem to display any javascript content either by referencing Div or Class. They load independently on the page but fail to load within the grid containers. Any Ideas? — stonk, Jun 13 '17 at 09:05
Hey @stutray. You need to refer your JS content to div or class like you mentioned to the grid-stack-item-content. $('#widget').click(function(){ //define_div(); var el = $.parseHTML("
Content Header

"); var grids = $('.grid-stack').data('gridstack'); grids.addWidget(el, 4, 0, 4, 4, true); }); Now Use your script to do changes on the div ID — Sarat Chandra, Jun 14 '17 at 07:52

score 1 · Answer 2 · edited May 23 '17 at 11:45

1

Assuming that grid is your gridstack variable:

grid.add_widget( jQuery( '<div class="grid-stack-item"><div class="grid-stack-item-content">' + node.content + '</div></div>' ), node.x, node.y, node.width, node.height );

Answer found here: how-to-build-grid-from-gridstack-with-saved-html

edited May 23 '17 at 11:45

Community

1
1

answered Feb 13 '17 at 23:08

Florin Marin

398
5
14

Gridstack - Add new widgets with content

2 Answers2

Content Header