SlickGrid rails integration with Bootstrap support.
Integrates mleibman/SlickGrid into your rails app.
SlickGrid is a superb editable grid, but integration into Rails was a bit messy and jQuery UI themes didn't always look too good on Bootstrap themed pages.
This gem takes care of:
- Fixes hardcoded pathing in SlickGrid that breaks Rails asset pipeline
- Eases jquery.drag.drag/drop integration (with akiatoji/jquery-dragdrop-rails)
- Less based integration with Bootstrap (with seyhunak/twitter-bootstrap-rails)
- Bootstrap styling with minimal markup changes (credits to reeblazs/SlickGrid-touch)
Add to your application's Gemfile:
gem 'jquery-dragdrop-rails'
gem 'slickgrid-bootstrap-rails'
Then execute:
$ bundle
SlickGrid uses jQuery UI so you need it in your assets. slickgrid-bootstrap-rails doesn't have any direct support to pull in jQuery UI. It's up to you how you do it, this is so that you can add themed jQuery UI assets yourself.
Alternatively, you can use joliss/jquery-ui-rails.
Bring in SlickGrid
//= require slickgrid-bootstrap-rails
Bring in SlickGrid styles
/*= slickgrid-bootstrap-rails
Enable Bootstrap styling for SlickGrid.
@import "slickgrid-bootstrap";
<div id="myGrid" class="bootstrap-slickgrid" style="height: 400px"></div>
The class bootstrap-slickgrid applies Bootstrap styling. You can leave it off if you just want jQuery UI theme.
Sample CoffeeScript that populates above grid:
formatter = (row, cell, value, columnDef, dataContext) ->
value
grid = undefined
data = []
columns = [
id: "title"
name: "Title"
field: "title"
minWidth: 30
formatter: formatter
,
id: "duration"
name: "Duration"
field: "duration"
minWidth: 30
,
id: "%"
name: "% Complete"
field: "percentComplete"
width: 100
resizable: false
formatter: Slick.Formatters.PercentCompleteBar
,
id: "start"
name: "Start"
field: "start"
minWidth: 60
,
id: "finish"
name: "Finish"
field: "finish"
minWidth: 60
,
id: "effort-driven"
name: "Effort Driven"
sortable: false
width: 120
minWidth: 60
maxWidth: 120
cssClass: "cell-effort-driven"
field: "effortDriven"
formatter: Slick.Formatters.Checkmark
]
options =
enableCellNavigation: true
enableColumnReorder: false
forceFitColumns: true
rowHeight: 35
$ ->
i = 0
while i < 5
d = (data[i] = {})
d["title"] = "<a href='#' tabindex='0'>Task</a> " + i
d["duration"] = "5 days"
d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110))
d["start"] = "01/01/2009"
d["finish"] = "01/05/2009"
d["effortDriven"] = (i % 5 is 0)
i++
grid = new Slick.Grid("#myGrid", data, columns, options)
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
Bootstrap integration is from reeblazs/SlickGrid-touch