CODEWITHSUNDEEP
javascriptruby-on-railsfuelux
naveed
naveed

Reputation: 68

How to provide data to Fuel UX datagrid from Rails?

I'd like to use the Fuel UX datagrid to display some data I am retrieving from my database. The page is served from a ruby on rails server.

The javascript example code for building the 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 am understanding the code, I am going to be defining my columns and some attributes in the columns object inside of the dataSource variable, and the data object is being loaded by sampleData.geonames.

The sampleData is here

What can I do using the rails conventions to replace the sampleData.geonames? I tried tweaking this a few ways to load rails objects in to here.

For example, I modified my columns' property fields to correspond to some properties of my User model. I tried replacing the

data: sampleData.geonames,

to

data: <%= @users.to_json %>,

I'm a little restricted on gems and versions, currently using Rails 2.3.

Thanks for any help.

Upvotes: 3

Views: 2640

Answers (1)

Adam Alexander
Adam Alexander

Reputation: 15180

If you want the datagrid to make a background AJAX request to load the data from your app, please see this tutorial which will be closer to what you need:

http://dailyjs.com/2012/10/29/fuel-ux

This would have the benefit of an immediate page load followed by asynchronous loading of data.

If you would rather stick with the StaticDataSource approach just embed a small script on your page similar to this:

<script>
  var myData = { ... };
</script>

Then, load that with:

var dataSource = new StaticDataSource({
  columns: [ ... ],
  data: myData,
  delay: 250
});

Upvotes: 1

Related Questions