3

I want use Gridster for my web site, but i need to add lot of widgets with "add_widget" command. I do a test and i think there is a problem with "add_widget" function : grid is more and more slow and there are memory leak.

You can see that in this video : grister problem video

However, as you can see on the video, if i add widget at beginning (not with add_widget function) there is no problem. Can you help me ? Something wrong with my code ?

Thanks in advance !

user944696
  • 61
  • 1
  • 7
  • Which version are you using? This might have something to do with it: https://github.com/ducksboard/gridster.js/pull/125 – belens Aug 22 '13 at 22:41

3 Answers3

8

In my own experience, the main culprit was using the autogenerate_stylesheet setting. The problem is that it regenerates the css on every call to add_widget(), and this just absolutely kills browsers. Additionally, gridster has/had a bug where stylesheets get duplicated, filling the <head> with tons of duplicate style rules, making it tough on the browser(this bug was supposedly fixed, but my experience was that the fix only worked in specific scenarios, definitely not in mine).

When I used gridster, my widgets were always the same size. So, in my case, I was able to generate the stylesheet once, never needing to regenerate it.

I don't think its part of the public api, but you can just call generate_stylesheet() method once manually.

var gridster = $(".gridster ul").gridster({
    autogenerate_stylesheet: false,
    widget_base_dimensions: [140, 140],
    //other options...
}).data('gridster');

gridster.generate_stylesheet({rows: 30; cols: 8});

//freely call gridster.add_widget(...); as many times as you like

Since you're only going to generate the stylesheet once, you need to make sure gridster will generate style rules for enough rows and columns to accommodate all your widgets, otherwise once you exceed the range, you'll experience broken layouts. Just supply an upper bound on rows and cols when calling generate_stylesheet(opts). If you don't, it seems like it defaults to whatever value your gridster instance is using for max_rows and max_cols.

The nice thing is by manually generating the stylesheet, is that you completely avoid the duplicate style bug too.

The exponential slowdown will be gone. Happy gridstering.

goat
  • 31,486
  • 7
  • 73
  • 96
5

I know I'm a bit late on this but I had the same problem and none of the above solutions worked.

However, I found that I was generating the size and coordinates of the widgets as a string rather than an integer on the back-end.

By making sure they were integers I managed to speed things up loads.

Tom
  • 12,776
  • 48
  • 145
  • 240
  • Yes this is the cause of the problem! As the last comment on this Issue thread tells, a fix to this is to use parseInt(val) on each coordinate and size you pass into the add_widget call. https://github.com/ducksboard/gridster.js/issues/166 – Johncl Oct 22 '15 at 07:41
1

The best way to fix it, is not to disable the autogenerated stylesheet, but to edit the fn.generate_stylesheet function in jquery.gridster.js

At the end of the function, just before these lines: 

    return this.add_style_tag(styles);
};

add this line:

this.remove_style_tags();

The final result would look like this:

    this.remove_style_tags();
    return this.add_style_tag(styles);
};

With this, each time a stylesheet is generated, the previous one is removed, so there no duplication problem!

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
Superdrac
  • 1,208
  • 17
  • 29
  • While this is a great option for many people, it's still much slower than generating the stylesheet once. I had tried this before resorting to disabling auto generation. – goat May 31 '14 at 04:57
  • If the widgets size's change & container size too, we can't use your method – Superdrac May 31 '14 at 16:55