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" style="width: 100%" cols="100" rows="20" readonly="readonly"></textarea>
  </div>
  <script src="events.js"></script>
  <script type="text/javascript">
    let serializedData = [
      {x: 0, y: 0, w: 2, h: 2},
      {x: 2, y: 1, w: 2, h: 3, 
      content: `<button onclick=\"alert('clicked!')\">Press me</button><div>text area</div><div><textarea></textarea></div><div>Input Field</div><input type="text"><div contenteditable=\"true\">Editable Div</div><div class=\"no-drag\">no drag</div>`},
      {x: 4, y: 1},
      {x: 1, y: 3},
      {x: 2, y: 3, w:3},
    ];
    serializedData.forEach((n, i) => {
      n.id = String(i);
      n.content = `<button onclick="removeWidget(this.parentElement.parentElement)">X</button><br> ${i}<br> ${n.content ? n.content : ''}`;
    });
    let serializedFull;

    let grid = GridStack.init({
      minRow: 1, // don't let it collapse when empty
      cellHeight: 80,
      float: true,
      draggable: { cancel: '.no-drag'} // example of additional custom elements to skip drag on
    }).load(serializedData);
    addEvents(grid);

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

    // 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);
    }

    // setTimeout(() => loadGrid(), 1000); // TEST force a second load which should be no-op
  </script>
</body>
</html>