How to define sub-grid in HTML and initialize it later in JS about gridstack.js

[adumesny]

you can't init nested by dom attr. my focus has been dynamic grids (since they need to read/write them) using API options eg: https://gridstackjs.com/demo/nested.html, not dom values (which doesn't support all options anyway). see slack channel, someone also was trying...

[vmihailenco]

@adumesny I am on Slack, but can't find anything similar using the search...

Is it possible to initialize GridStack using API and content from HTML? I am looking for something like:

let grid = new GridStack(options)

let items = document.queryElementsByClass('grid-stack-item')
for (let item of items) {
    grid.makeWidget(item)
}

let subgrids = document.queryElementsByClass('grid-stack-nested')
for (let subgrid of subgrids) {
    grid.makeSubGrid(subgird, suboptions)
}

The use case is to render components using Vue.js and then initialize GridStack on top of it using DOM attributes or JS API.

[vmihailenco]

This almost works, but the positioning and sizing is off: https://jsfiddle.net/kznc3vr7/2/

[adumesny]

if you want to donate for this feature (init nested from DOM) it could be added, but frankly not of my radar...