Don't get serialized grid data after resizing boxes

I am trying to get serialized data after changing the size and position of the boxes. But I am only getting download data. How to get serialized data after resizing fields. And I also want to get the text (value in the field) of the window.

This is my code:

  $(function() {

  var gridster = $(".gridster > ul").gridster({
      widget_margins: [10, 10],
      widget_base_dimensions: [230, 160],
      helper: 'clone',
      resize: {
          enabled: true,

      },
      serialize_params: function($w, wgd) {
          return {
              id: $($w).attr('.drop'),
              col: wgd.col,
              row: wgd.row,
              size_x: wgd.size_x,
              size_y: wgd.size_y
          };
      }

  }).data('gridster');

  //serialization//

  var gridster = $(".gridster > ul").gridster().data('gridster');
  gridData = gridster.serialize();
  /*alert(gridData.toSource())*/

  $('.js-seralize').on('click', function() {
      alert(gridData.toSource());
  });

  //delete//

  $(".del_img").click(function() {
      gridster.remove_widget($(this).parent());
  });
});

      

        
        
        
      

    

Please check this link

Please, help.

Thanks in advance.

// tried something like this //

var finalserializer="[";
$(.re_boxes).each(function(){
var xaxisval = $(this).attr("data-sizex");
var yaxisval = $(this).attr("data-sizey");
var colval = $(this).attr("data-col");
var rowval = $(this).attr("data-row");
var coltitle = $(this).children("a").text();
var currentfinal = "{col:"+colval+"row:"+rowval+"xsize:"+xaxisval+"ysize:"+yaxisval+"coltitle:"+coltitle+"}"
finalserializer = finalserializer+currentfinal;
});
finalserializer=finalserializer+"]"
 });

$('.js-seralize').on('click', function() {
                    alert(gridData.toSource())
             });