<li><a href="react-hooks.html">ReactJS (Hooks)</a></li>

<li><a href="vue2js.html">Vue2.js</a></li>

<li><a href="web-comp.html">Web Component</a></li>

<title>Nested grids demo (ES6)</title>

<p>This example uses new v3.1 API to load the entire nested grid from JSON, and shows dragging between nested grid items (pink) vs dragging higher grid items (green)</p>

<p>Note: initial v3.0.0 HTML5 release doesn't support 'dragOut:false' constrain so this uses JQ version for now, otherwise recommend you use h5 version.</p>

<a class="btn btn-primary" onClick="addNewWidget('.nested1')" href="#">Add Widget Grid1</a>

<a class="btn btn-primary" onClick="addNewWidget('.nested2')" href="#">Add Widget Grid2</a>

<!-- grid will be added here -->

let sub1 = [ {w:3}, {w:3}, {w:3}, {w:3}, {w:3}, {w:3}];

let sub2 = [ {w:3}, {x:0, y:1, w:3}];

let count = 0;

[...sub1, ...sub2].forEach(d => d.content = String(count++));

let subOptions = {

itemClass: 'sub', // style sub items differently and use to prevent dragging in/out

let layout = {cellHeight: 70, children: [

{w:1, content: 'regular item'},

{x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}},

{x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, class: 'nested2', ...subOptions}},

]};

// create and load it all from JSON above

GridStack.addGrid(document.querySelector('.container-fluid'), layout);

addNewWidget = function(selector) {

grid = document.querySelector(selector).gridstack;

h: Math.round(1 + 3 * Math.random()),

content: count++

grid.addWidget(node);

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Gridstack.js React integration example</title>

<link rel="stylesheet" href="demo.css" />

<script src="../node_modules/gridstack/dist/gridstack-h5.js"></script>

<!-- Scripts to use react inside html -->

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

<div>

<h1>Using GridStack.js with React hooks</h1>

<p>

As with any virtualDOM-based framework, you need to check if Reacthas rendered the DOM (or any updates to it)

<strong>before</strong> you initialize GridStack or call its methods. This example shows how to make rendered

components widgets:

</p>

<ol>

<li>Render items, each with a reference</li>

<li>Convert each rendered item to a widget using the reference and the <a

href="https://github.com/gridstack/gridstack.js/tree/develop/doc#makewidgetel">

makeWidget</a> function</li>

</ol>

</div>

<div>

<h2>Controlled stack</h2>

<div id="controlled-stack"></div>

</div>

<div>

<h2>Uncontrolled stack</h2>

<div id="uncontrolled-stack"></div>

</div>

<script type="text/babel">

const { useState, useEffect, createRef, useRef } = React

const Item = ({ id }) => <div>I am item: {id}</div>

//

// Controlled example

//

const ControlledStack = ({ items, addItem }) => {

const refs = useRef({})

const gridRef = useRef()

if (Object.keys(refs.current).length !== items.length) {

items.forEach(({ id }) => {

refs.current[id] = refs.current[id] || createRef()

})

}

useEffect(() => {

gridRef.current =

gridRef.current ||

GridStack.init(

{

float: true,

},

'.controlled'

)

const grid = gridRef.current

grid.batchUpdate()

grid.removeAll(false)

items.forEach(({ id }) => grid.makeWidget(refs.current[id].current))

grid.commit()

}, [items])

return (

<div>

<button onClick={addItem}>Add new widget</button>

<div className={`grid-stack controlled`}>

{items.map((item, i) => {

return (

<div ref={refs.current[item.id]} key={item.id} className={'grid-stack-item'}>

<div className="grid-stack-item-content">

<Item {...item} />

</div>

</div>

)

})}

</div>

</div>

)

}

const ControlledExample = () => {

const [items, setItems] = useState([{ id: 'item-1' }, { id: 'item-2' }])

return (

<ControlledStack

items={items}

addItem={() => setItems([...items, { id: `item-${items.length + 1}` }])}

/>

)

}

//

// Uncontrolled example

//

const UncontrolledExample = () => {

const gridRef = useRef()

const [state, setState] = useState({

count: 0,

info: '',

items: [

{ x: 2, y: 1, h: 2 },

{ x: 2, y: 4, w: 3 },

{ x: 4, y: 2 },

{ x: 3, y: 1, h: 2 },

{ x: 0, y: 6, w: 2, h: 2 },

],

})

useEffect(() => {

gridRef.current =

gridRef.current ||

GridStack.init(

{

float: true,

cellHeight: '70px',

minRow: 1,

},

'.uncontrolled'

)

const grid = gridRef.current

grid.on('dragstop', (event, element) => {

const node = element.gridstackNode

setState(prevState => ({

...prevState,

info: `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`,

}))

let timerId

window.clearTimeout(timerId)

timerId = window.setTimeout(() => {

setState(prevState => ({

...prevState,

info: '',

}))

}, 2000)

})

}, [])

return (

<div>

<button

onClick={() => {

const grid = gridRef.current

const node = state.items[state.count] || {

x: Math.round(12 * Math.random()),

y: Math.round(5 * Math.random()),

w: Math.round(1 + 3 * Math.random()),

h: Math.round(1 + 3 * Math.random()),

}

node.id = node.content = String(state.count)

setState(prevState => ({

...prevState,

count: prevState.count + 1,

}))

grid.addWidget(node)

}}

>

Add Widget

</button>

<div>{JSON.stringify(state)}</div>

<section class="grid-stack uncontrolled"></section>

</div>

)

}

ReactDOM.render(<ControlledExample />, document.getElementById('controlled-stack'))

ReactDOM.render(<UncontrolledExample />, document.getElementById('uncontrolled-stack'))

<a onClick="saveFullGrid()" class="btn btn-primary" href="#">Save Full</a>

<a onClick="loadFullGrid()" class="btn btn-primary" href="#">Load Full</a>

<div id="gridCont"><div class="grid-stack"></div></div>

let serializedFull;

// 2.x method - just saving list of widgets with content (default)

grid.load(serializedData, true); // update things

// 2.x method

delete serializedFull;

// 3.1 full method saving the grid options + children (which is recursive for nested grids)

saveFullGrid = function() {

serializedFull = grid.save(true, true);

serializedData = serializedFull.children;

document.querySelector('#saved-data').value = JSON.stringify(serializedFull, null, ' ');

}

// 3.1 full method to reload from scratch - delete the grid and add it back from JSON

loadFullGrid = function() {

if (!serializedFull) return;

grid.destroy(true); // nuke everything

grid = GridStack.addGrid(document.querySelector('#gridCont'), serializedFull)

}