How do I provide data for a Fuel UX Datagrid from Rails?
I would like to use the Fuel UX Datagrid to display some of the data that I am pulling from my database. The page is served from a ruby server on a rails server.
Sample javascript code to construct a data object:
var dataSource = new StaticDataSource({
columns: [{
property: 'toponymName',
label: 'Name',
sortable: true
}, {
property: 'countrycode',
label: 'Country',
sortable: true
}, {
property: 'population',
label: 'Population',
sortable: true
}, {
property: 'fcodeName',
label: 'Type',
sortable: true
}],
data: sampleData.geonames,
delay: 250
});
$('#MyGrid').datagrid({
dataSource: dataSource,
stretchHeight: true
});
$('#datagrid-reload').on('click', function () {
$('#MyGrid').datagrid('reload');
});
If I understand the code, I am going to define my columns and some attributes on the columns object inside the dataSource variable, and the data object is loaded using sampleData.geonames.
Sample sample here
What can I do using rails conventions to replace sampleData.geonames? I tried to set it up in several ways to load rail objects here.
For example, I changed the properties fields of my columns to match some of the properties of my User model. I tried to replace
data: sampleData.geonames,
to
data: <%= @users.to_json %>,
I'm a little gems and version limited, currently using Rails 2.3.
Thanks for any help.
source to share
If you would like the datagrid to make a background AJAX request to load data from your application, check out this tutorial, which is closer to what you need:
http://dailyjs.com/2012/10/29/fuel-ux
This will ensure that the page is loaded immediately, followed by asynchronous data loading.
If you'd rather stick with the StaticDataSource approach, just embed a small script in your page like this:
<script>
var myData = { ... };
</script>
Then download this with:
var dataSource = new StaticDataSource({
columns: [ ... ],
data: myData,
delay: 250
});
source to share