Connecting Fuel UX Datagrid to the Flickr API

2012-10-29 00:00:00 +0000 by Alex R. Young

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.


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.

  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


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: