How to define sub-grid in HTML and initialize it later in JS

[vmihailenco]

I am trying to initialize a sub-grid from HTML attributes, but can't find many examples except this one.

I am trying something like this (https://jsfiddle.net/0wvsym1j/2/):

<div class="grid-stack" id="gs">
  <div gs-w="6" gs-h="4" gs-auto-position="true" class="grid-stack-item grid-stack-sub-grid">
    <div class="grid-stack-item-content">
      <div class="grid-stack grid-stack-nested">
        <div gs-w="3" gs-h="2" gs-auto-position="true" class="grid-stack-item">
          <div class="grid-stack-item-content">
            <div>
              Subgrid
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

And then initialize it separately:

let grid = GridStack.init(options, '#gs')
let subgrids = GridStack.initAll({
    ...options,
    column: 'auto',
  },
  '.grid-stack-nested'
)

Could someone suggest a proper way?

[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 = GridStack:init(options, myMainGridElement)

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...

Update: I fixed your example, which should work but again if I doesn't I would need to get donation to look into it as DOM is not my focus.

[carvinlo]

This functional requirement greatly improves the flexibility of nested layout!