We recently had a requirement of implementing a new Dashboard inside Envisio. The new dashboard needs to be customisable, meaning the end users can add, remove, resize and drag-n-drop widgets on the dashboard. The configuration of the user dashboard needs to be memorisable.
I went through a few options and settled on Gridster. It fits our requirements very well after some tweaking. The only complaint is that Gridster isn’t reponsive, which is less of a concern for our app.
To set it up, first load it using
Bowerfile, which is enabled by the
Load the JS and CSS into the corresponding manifest files.
How to setup the dashboard as well as the widget HTML and how to initialise Gridster is very subjective. To highlight how I got serialisation, resizing working, I’ll disect the JS and explain a little.
In order to remember user configuration, we needed to pay attention to the
An issue I ran into was when resizing, the scrollable content loaded inside each grid does not resize. When I want to reduce the widget size, The content height doesn’t seem to be adjusted and it will stick out. To overcome this, I pulled some dodgy hacks by tapping into the
resize.start callback to put a tint over the widget that’s being resize to hide the ugliness.
Your mileage may vary, but the aboves are a few obstacles I encountered (amongst many others …). There’s also this nice comparison article talking about various alternative plugins to Gridster.