DailyJS

DailyJS

The JavaScript blog.


Tagfuelux
Featured

tutorials bootstrap fuelux

Connecting Fuel UX Datagrid to the Flickr API

Posted on .

Fuel UX (GitHub: ExactTarget / fuelux, License: MIT) extends the revolutionary Twitter Bootstrap with some additional JavaScript controls. One of these controls is the Datagrid, and today I'm going to show you how to add the Datagrid to a page and connect it to a third party API.

Demo

Step One: Basic Fuel UX Page

There are a couple of resources I recommend for getting started with a basic Fuel UX page:

Once you have Fuel UX on your page, you're ready to add the Datagrid!

Step Two: Adding the Datagrid

Just like in Bootstrap, you can add most Fuel UX controls to a page by simply adding some markup and they will be instantiated automatically.

View the markup for this example

Since the Datagrid needs to be connected to some data to be useful, we will need a little JavaScript to instantiate the control.

$('#MyGrid').datagrid({
  dataSource: new FlickrDataSource({

    // Column definitions for Datagrid
    columns: [{
      property: 'image',
      label: 'Image',
      sortable: false
    },{
      property: 'title',
      label: 'Title',
      sortable: false
    }],

    // Create IMG tag for each returned image
    formatter: function (items) {
      $.each(items, function (index, item) {
        item.image = '<img src="' + flickrUrl(item) + '"></a>';
      });
    }
  })
});

Step Three: Provide the Data Source

To connect the Datagrid to some data, we just need a data source to act as an adapter. The data source's responsibilities are:

  1. Provide column info
  2. Provide data when requested by the Datagrid

For this example, I created a simple datasource to communicate with the Flickr API.

View the data source for this example

Conclusion

I hope this tutorial is helpful in getting your own use of the Datagrid off the ground, and in using Fuel UX in general. The Fuel UX contributors and I are excited to have you on board! Next steps: