Subject of the issue

I'm just getting started with Gridstack, looks awesome!
I think I got the save part down, but the load from the generated JSON just won't work.
Via a load button I call the load function with (for now) a hardcoded JSON string.
The widget's dimensions etc. are not how I saved them.

Basically what i need is when the page is loaded, the widgets are rearranged to the stored JSON value. The function in the docs clears all widgets and then creates new ones. If it's possible it just has to rearrange the current widgets to their stored place and dimensions.

Your environment

Version 1.1.1
Chrome (latest)

Steps to reproduce

https://www.smilejet.net/app/js/dashboard-grid/test.html

function loadData() {
  var serializedData = [{ "x": "0", "y": "0", "w": "2", "h": "2", "id": "chart1" },
  { "x": "2", "y": "0", "w": "4", "h": "2", "id": "chart2" },
  { "x": "6", "y": "0", "w": "4", "h": "2", "id": "chart3" },
  { "x": "0", "y": "2", "w": "12", "h": "3", "id": "chart4" }];

  // I remove the "grid.removeAll"
  var data = JSON.parse(serializedData); //Getting the content
  var items = $('.grid-stack').find('.grid-stack-item'); //An item is now a grid-stack-item
  $.each(items, function (key, gridItem) { //Foreach item, i'll set the attributs as saved
    $(gridItem).attr('data-gs-x', data[key].x);
    $(gridItem).attr('data-gs-y', data[key].y);
    $(gridItem).attr('data-gs-width', data[key].width);
    $(gridItem).attr('data-gs-height', data[key].height);
  }, this);
};

Expected behaviour

When click on LOAD button, the current widgets should rearrange to the right positions and dimensions. No delete all widgets and then recreate them like the example.

Actual behaviour

When clicking on LOAD, something happens but it's not the right position/dimensions.