Gridster inside Gridster

Question

I want nested gridster (gridster indside gridster).Just similar to Nested Gridstack

For this I wrote my Gridster code by reading some online content.But I am not getting expected results.

HTML Code

<div id="demo1" class="gridster">

    <ul id="grid1">
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>1</h3></li>
        <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>2</h3></li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>3</h3></li>
        <div id="demo-2">
            <ul id="grid2">
                <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>1</h3></li>
                <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>2</h3></li>
                <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>3</h3></li>

            </ul>
            </div>
        <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>10</h3></li>
        <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>11</h3></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"><button class="delete-button" style="float: right;">-</button><h3>12</h3></li>
</ul>
</div>

JS Code

gridster1 = $("#demo-2 > ul#grid2").gridster({
            widget_base_dimensions: [20, 10],
            widget_margins: [2, 2],
             helper: 'clone',
             resize: {
             enabled: true
             }
        }).data('gridster');

gridster0 = $("#demo-1 > ul#grid1").gridster({
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5],
             helper: 'clone',
            resize: {
                enabled: true
                }
        }).data('gridster');

I tried a lot but completely clueless about how to proceed with this. Any kind of help will be really good

If question requires any more information then please feel free to ask — NewBie, Mar 07 '18 at 07:56

score 0 · Answer 1 · answered Mar 23 '21 at 13:14

For me by adding some delay for 2nd gridster

setTimeout(function() {
    gridster1 = $("#demo-2 > ul#grid2").gridster({
            widget_base_dimensions: [20, 10],
            widget_margins: [2, 2],
             helper: 'clone',
             resize: {
             enabled: true
             }
        }).data('gridster');

},1000);
    gridster0 = $("#demo-1 > ul#grid1").gridster({
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5],
             helper: 'clone',
            resize: {
                enabled: true
                }
        }).data('gridster');

Gridster inside Gridster

1 Answers1