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

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?

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

@adumesny

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

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

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.

This functional requirement greatly improves the flexibility of nested layout!

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

adumesny commented on Nov 28, 2023

vmihailenco commented on Nov 29, 2023

vmihailenco commented on Nov 29, 2023

adumesny commented on Mar 30, 2024

carvinlo commented on Jul 30, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions