demo/serialization.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Serialization demo</title>

  <link rel="stylesheet" href="demo.css"/>
  <script src="../dist/gridstack-all.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>Serialization demo</h1>
    <a onClick="saveGrid()" class="btn btn-primary" href="#">Save</a>
    <a onClick="loadGrid()" class="btn btn-primary" href="#">Load</a>
    <a onClick="saveFullGrid()" class="btn btn-primary" href="#">Save Full</a>
    <a onClick="loadFullGrid()" class="btn btn-primary" href="#">Load Full</a>
    <a onClick="clearGrid()" class="btn btn-primary" href="#">Clear</a>
    <br/><br/>
    <div id="gridCont"><div class="grid-stack"></div></div>
    <hr/>
    <textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
  </div>

  <script type="text/javascript">
    let grid = GridStack.init({
      minRow: 1, // don't let it collapse when empty
      cellHeight: '7rem'
    });
    
    grid.on('added removed change', function(e, items) {
      if (!items) return;
      let str = '';
      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
      console.log(e.type + ' ' + items.length + ' items:' + str );
    });

    let serializedData = [
      {x: 0, y: 0, w: 2, h: 2, id: '0'},
      {x: 3, y: 1, h: 2, id: '1', content: "<button onclick=\"alert('clicked!')\">Press me</button><div>text area</div><div><textarea></textarea></div><div>Input Field</div><input type='text'>"},
      {x: 4, y: 1, id: '2'},
      {x: 2, y: 3, w: 3, id: '3'},
      {x: 1, y: 3, id: '4'}
    ];
    serializedData.forEach((n, i) =>
      n.content = `<button onClick="removeWidget(this.parentElement.parentElement)">X</button><br> ${i}<br> ${n.content ? n.content : ''}`);
    let serializedFull;

    // 2.x method - just saving list of widgets with content (default)
    function loadGrid() {
      grid.load(serializedData, true); // update things
    }

    // 2.x method
    function saveGrid() {
      delete serializedFull;
      serializedData = grid.save();
      document.querySelector('#saved-data').value = JSON.stringify(serializedData, null, '  ');
    }

    // 3.1 full method saving the grid options + children (which is recursive for nested grids)
    function saveFullGrid() {
      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
    function loadFullGrid() {
      if (!serializedFull) return;
      grid.destroy(true); // nuke everything
      grid = GridStack.addGrid(document.querySelector('#gridCont'), serializedFull)
    }

    function clearGrid() {
      grid.removeAll();
    }

    function removeWidget(el) {
      // TEST removing from DOM first like Angular/React/Vue would do
      el.remove();
      grid.removeWidget(el, false);
    }

    loadGrid();
  </script>
</body>
</html>