How to use ruby on rails to load slickgrid - ruby-on-rails-3

Question

I'd like to have a grid on a rails application using slickgrid.
My initial problem I think is not having a best practice on where or how to load the grid with data from the sql database.
In the *.html.erb file, do I use javascript and embed ruby code (is this even possible)?
Is anyone out there using slickgrid, or anything comparable, with a ruby on rails application?
Any simple coding examples are highly appreciated!

Answer 1

I used this post to generate a JavaScript file dynamically. It looks like:
var columns = ...
var options = ...
$(function() {
var data = [];
data[0] = {...};
data[1] = {...};
data[2] = {...};
...
var grid = new Slick.Grid($("#my_grid"), data, columns, options);
});
I was be able to load data from database into the SlickGrid. However, currently I do experience a hang problem with the columnpicker (I hope you don't need it).

Answer 2

There are a couple of ways to get the data into SlickGrid. The easiest is probably an AJAX call. If the data is static you could embed it in the page, but that's probably less useful and more difficult than just doing it with AJAX.
The first thing you'll need is a route you can access that will return your data to the browser, preferably in JSON format so it's easy to handle on the client side.
Assuming the data you want to return is just a simple collection we'll use the example of a Users list.
class UsersController < ApplicationController
def index
#users = User.all
respond_to { |format|
format.json { render :json => #users }
}
end
end
We'll assume you can get to this at the URL http://example.com/users/
Now that we have a way to get the data we can pull the data on the browser side using JavaScript. My example is going to use jQuery, but any JavaScript framework is going to have an easy way to make an AJAX call.
Note that SlickGrid needs a place to put your data. So I'll assume you have a line like this in your HTML: <div id="slickGrid"></div>
# We need to wait for the DOM to be loaded so we wrap our AJAX call in a
# jQuery call that's the equivalent of document.ready()
jQuery(function() {
# getJSON is a jQuery convenience function for doing an AJAX call
# that fetches some JSON data.
jQuery.getJSON('http://example.com/users', function(data) {
grid = new Slick.Grid("#slickGrid", data, columns, options);
$("#slickGrid").show();
});
});
You can get more examples of how to use SlickGrid from the Github repository:
https://github.com/mleibman/SlickGrid/wiki/_pages
For more on how to do AJAX calls with jQuery here's the docs for the more general jQuery.ajax() function:
http://api.jquery.com/jQuery.ajax/
And the getJSON function that I used specifically:
http://api.jquery.com/jQuery.getJSON/

Answer 3

We can load data in browser in Json format. So, I used it to parse into "user_data" array.
eg. localhost:3000/users.json
var user_data = <%= #users.to_json.html_safe %>;