javascript - How can I change the number of columns in Gridster? -

i have a gridster based layout start set number of columns , fixed number of tiles. there way change number of columns once has been set up? -- example starting 3 columns :

(tile1 | tile2 | tile3
tile4 | tile5 | tile6)

and changing 2 column layout:

(tile1 | tile2
tile3 | tile4
tile5 | tile6)

the change driven user interaction.

i have tried use like:

gridster = $("#gridster-container").gridster({    widget_margins: [30, 30],    widget_base_dimensions : [ 200, 170 ],    max_cols:numberofcolumns,    avoid_overlapped_widgets: true }).data('gridster');  // user interaction  gridster.options.max_rows = 2;  gridster.init(); 

but not seem work...

i have tried manually changing data-row , data-col values new positions, , called init() (and not called init).

i have tried changing gridster code adding

    // hack     if (max_cols && max_cols < this.cols) {         this.cols = max_cols;     } 

to method fn.generate_grid_and_stylesheet (just after line:

    if (max_cols && max_cols >= min_cols && max_cols < this.cols) {         this.cols = max_cols;     } 

).

i can tiles move the correct position using of these options, subsequent dragging behaviour is... odd.

i have set jsfiddle (http://jsfiddle.net/qt6qr/) explain mean (please excuse gridster.min.js in line @ top of fidddle, couldn't find cdn use it...).

thanks in advance

i spent couple of hours , ran across this piece of code. put in .js file , did:

var gr = $(elem).gridster(options).data('gridster');  // update options , call @ later point:  gr.resize_widget_dimensions(options); 

and worked.

here's code:

(function($) {     $.gridster.generate_stylesheet = function(opts) {         var styles = '';         var max_size_x = this.options.max_size_x;         var max_rows = 0;         var max_cols = 0;         var i;         var rules;          opts || (opts = {});         opts.cols || (opts.cols = this.cols);         opts.rows || (opts.rows = this.rows);         opts.namespace || (opts.namespace = this.options.namespace);         opts.widget_base_dimensions || (opts.widget_base_dimensions = this.options.widget_base_dimensions);         opts.widget_margins || (opts.widget_margins = this.options.widget_margins);         opts.min_widget_width = (opts.widget_margins[0] * 2) +             opts.widget_base_dimensions[0];         opts.min_widget_height = (opts.widget_margins[1] * 2) +             opts.widget_base_dimensions[1];           /* generate css styles cols */         (i = opts.cols; >= 0; i--) {             styles += (opts.namespace + ' [data-col="'+ (i + 1) + '"] { left:' +                 ((i * opts.widget_base_dimensions[0]) +                 (i * opts.widget_margins[0]) +                 ((i + 1) * opts.widget_margins[0])) + 'px;} ');         }          /* generate css styles rows */         (i = opts.rows; >= 0; i--) {             styles += (opts.namespace + ' [data-row="' + (i + 1) + '"] { top:' +                 ((i * opts.widget_base_dimensions[1]) +                 (i * opts.widget_margins[1]) +                 ((i + 1) * opts.widget_margins[1]) ) + 'px;} ');         }          (var y = 1; y <= opts.rows; y++) {             styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +                 (y * opts.widget_base_dimensions[1] +                 (y - 1) * (opts.widget_margins[1] * 2)) + 'px;}');         }          (var x = 1; x <= max_size_x; x++) {             styles += (opts.namespace + ' [data-sizex="' + x + '"] { width:' +                 (x * opts.widget_base_dimensions[0] +                 (x - 1) * (opts.widget_margins[0] * 2)) + 'px;}');         }          return this.add_style_tag(styles);     };      $.gridster.add_style_tag = function(css) {         var d = document;         var tag = d.createelement('style');          tag.setattribute('generated-from', 'gridster');          d.getelementsbytagname('head')[0].appendchild(tag);         tag.setattribute('type', 'text/css');          if (tag.stylesheet) {             tag.stylesheet.csstext = css;         } else {             tag.appendchild(document.createtextnode(css));         }         return this;     };      $.gridster.resize_widget_dimensions = function(options) {         if (options.widget_margins) {             this.options.widget_margins = options.widget_margins;         }          if (options.widget_base_dimensions) {              this.options.widget_base_dimensions = options.widget_base_dimensions;         }          this.min_widget_width  = (this.options.widget_margins[0] * 2) + this.options.widget_base_dimensions[0];         this.min_widget_height = (this.options.widget_margins[1] * 2) + this.options.widget_base_dimensions[1];          var serializedgrid = this.serialize();         this.$widgets.each($.proxy(function(i, widget) {             var $widget = $(widget);             this.resize_widget($widget);         }, this));          this.generate_grid_and_stylesheet();         this.get_widgets_from_dom();         this.set_dom_grid_height();          return false;     }; })(jquery);