Make gridster resize on window resize

A couple of days ago I had a problem with gridster and resizing when the window size changes. This isn't a fully responsive solution but it did the trick for what I had to do. Keep in mind that per default gridster only creates css for 10 columns, meaning having 11 columns will have the widgets placed wrong. Unless of course you provide css for the extra columns (which was not needed in my scenario).

I have created a JSFiddle for it here.

Basically I add a resize event to the window and remove and add the gridster HTML every time it is resized:

Javascript

var li = '<li><p>Hello world</p></li>'; 

var content = []; //creating dummy data
for (var i = 0; i < 20; i++){
   content.push(li);
}

var drawGrid = function(){

  var gridsterContainer = $('.gridster-container');
  gridsterContainer.empty(); //important to remove the ul element
  var ul = $('<ul></ul>');
  gridsterContainer.append(ul);
  var gridster = ul.gridster({
    widget_margins: [2, 2],
    widget_base_dimensions: [60, 60],
    max_cols: 20,
    min_cols:1
  }).data('gridster');

  for (var k = 0; k < content.length; k++){
     gridster.add_widget(content[k]);
  }
};

$(window).resize(function(){ //actual resize event binding
     drawGrid(content);
});

drawGrid(content); //draw grid on load

HTML

<div class="gridster-container gridster">

</div>

CSS

li {
  background-color:lightblue;
  text-align:center;
}

ul {
  list-style-type: none;
}

That is it!

Let me know in the comments if this was of help to you :)