Creating Widgets with SubGrid only works with addGrid but not with addWidget

[santiagoamo]

Subject of the issue

If I create a Widgets with nested subgrid works properly with addGrid but not with addWidget

Your environment

gridstack-h5.js (same like demos width h5)
jQuery JavaScript Library v3.6.0

Steps to reproduce

https://jsfiddle.net/itnasag/xdL3ahky/21/

Expected behavior

Add widgets with subgrid using addWidget

Actual behavior

When I use addGrid I can found the div grid-stack-nested, but if add new widgets dinamically with addWidget, the subgrid is not created, I can't add sub-widgets and i can't found the div grid-stack-nested. With the save method I can see the subgrids created, but not rendered in the DOM

In deep explanation:

Hi!

I'm traying to create dinamically new widgets with Subgrid, but don't work for me.

If I add widgets with subgrids at the beggining works perfect with addGrid (for example 4 widgets with subnets initialiced):

var configComponentes = {
cellHeight: 30,
column: 4,
acceptWidgets: '.grid-stack-item.gs-componente-simple',
minWidth: 200,
margin: 2,
itemClass: 'gs-componente-simple',
};

let items = {
itemClass: 'gs-widget-simple',
cellHeight: 70,
margin: 5,
children:
[
{auto_position: true, w: 4, h: 2, id: 'gs-widget-1', content: 'Widget 1', subGrid: {children: [], class: 'gs-widget-1', ...configComponentes}},
{auto_position: true, w: 4, h: 4, id: 'gs-widget-2', content: 'Widget 2', subGrid: {children: [], class: 'gs-widget-2', ...configComponentes}},
{auto_position: true, w: 2, h: 2, id: 'gs-widget-3', content: 'Widget 3', subGrid: {children: [], class: 'gs-widget-3', ...configComponentes}},
{auto_position: true, w: 2, h: 2, id: 'gs-widget-4', content: 'Widget 4', subGrid: {children: [], class: 'gs-widget-4', ...configComponentes}},
]
};

var dashboard = GridStack.addGrid(document.querySelector('#dashboard'), items);

Inside div 'grid-stack-item-content' of every widget I can found a div with class 'grid-stack-nested', where I can add widgets without problems.

But if I the user adds new widgets with a buttom, widget is created but subgrid is not created (div with class 'grid-stack-nested', where I can add nested widgets not found):

dashboard.addWidget({
w: Math.floor(2 + 3 * Math.random()),
h: Math.floor(2 + 3 * Math.random()),
auto_position: true,
id: 'gs-widget-' + id,
content: 'Widget ' + id,
subGrid: {
children:[],
class: 'gs-widget-' + id,
...configComponentes
}
});

(id is a number pass by a function, 5,6,7,8.....)

If I use 'dashboard.save(false)', I can found the subGrids of the widgets created by the user with a button. Is like the div container of the nested grid are not rendered.

I try to use 'update()' to render the nested grid , but dont solve the problem.

Thanks!!

[adumesny]

yeah, I did not make addWidget() recursive but it could, like init() and addGrid().

[santiagoamo]

Thanks!!, but, How can I add a nested structure (subGrid) before create a new Widget?

[adumesny]

I would need to add this feature - you can donate to help move this request along... else you might be able to addWidget + addGrid as child of the widget might work. I don't have bandwidth to look right now otherwise.

[adumesny]

added to next release. don't forget to donate if you find lib useful!