Gridster

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 bower-rails gem.

# Bowerfile
asset 'gridster'

Load the JS and CSS into the corresponding manifest files.

# application.js
//= require gridster/dist/jquery.gridster

# application.css
*= require gridster/dist/jquery.gridster

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 serialize_params, resize.stop and draggable.stop options.

home_gridster = $(".gridster ul.grid").gridster(
  # lines omitted
  serialize_params: ($w, wgd) ->
    col:    wgd.col,
    row:    wgd.row,
    size_x: wgd.size_x,
    size_y: wgd.size_y,
    key:    $($w).data('key') #this key is important, it'll be saved and used on server side
  resize:
    enabled: true
    start:
      # lines omitted
    stop: (event, ui, $widget) ->
      # lines omitted
      save_grid_configuration(home_gridster.serialize())
  draggable:
    stop: (event, ui) ->
      save_grid_configuration(home_gridster.serialize())
).data('gridster')

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.

home_gridster = $(".gridster ul.grid").gridster(
  # lines omitted
  resize:
    enabled: true
    start:
      $widget.children('.panelbox-heading').hide()
      $widget.children('.panelbox-body').hide()
      $widget.addClass('resizing')
    stop: (event, ui, $widget) ->
      set_grid_widget_height($widget)
      $widget.children('.panelbox-heading').show()
      $widget.children('.panelbox-body').show()
      $widget.removeClass('resizing')

      save_grid_configuration(home_gridster.serialize())
  # lines omitted
).data('gridster')

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.

Published: 2014-11-26
blog comments powered by Disqus