FuelUX datagrid not loading (using example)

Question

I'm new to FuelUX so I was trying to get this to work, based on the example provided:

require(['jquery','data.js', 'datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) {

    var dataSource = new StaticDataSource({
            columns: [{property:"memberid",label:"LidId",sortable:true},{property:"name",label:"Naam",sortable:true},{property:"age",label:"Leeftijd",sortable:true}],
            data: sampleData.memberdata,
            delay: 250
        });

        $('#MyGrid').datagrid({
            dataSource: dataSource,
            stretchHeight: true
        });

    });
});

With this as the data:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(factory);
    } else {
        root.sampleData = factory();
    }
}(this, function () {
    return {
        "memberdata": [{
            "memberid": 103,
            "name": "Laurens  Natzijl",
            "age": "25"
        }, {
            "memberid": 104,
            "name": "Sandra Snoek",
            "age": "25"
        }, {
            "memberid": 105,
            "name": "Jacob Kort",
            "age": "25"
        }, {
            "memberid": 106,
            "name": "Erik  Blokker",
            "age": "25"
        }, {
            "memberid": 107,
            "name": "Jacco  Ruigewaard",
            "age":"25"
        },{  /* etc */ }]
    }
}));

I've got no console errors, no missing includes. Everthing works just fine - it even looks like it's loading. Except nothing shows up in the datagrid but '0 items'.

Any suggestions? I think I did everything the example provided...

EDIT: 14:33 (Amsterdam) There seems to be a difference when I put this in console:

My page:

require(['jquery','data.js','datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) {
    var dataSource = new StaticDataSource({
            columns: [{property:"memberid",label:"LidId",sortable:true},{property:"name",label:"Naam",sortable:true},{property:"age",label:"Leeftijd",sortable:true}],
            data: sampleData.memberdata,
            delay: 250
        });
    console.debug(dataSource);
});

1st row in console:

function localRequire(deps, callback, errback) { /* etc */ }

2nd row in console:

StaticDataSource {_formatter: undefined, _columns: Array[3], _delay: 250, _data: Array[25], columns: function…}

FuelUX Example:

require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) {
    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
    });
    console.debug(dataSource);
});

1st row in console:

StaticDataSource {_formatter: undefined, _columns: Array[4], _delay: 250, _data: Array[146], columns: function…}

2nd row in console:

function (deps, callback, errback, relMap) { /* etc */ }

Maybe this will help you help me :)

Answer 1

I had the exact same issue, when tried to integrate with Django. The issue I believe is on this line :

require(['jquery','data.js','datasource.js', 'fuelux/all'], function ($, sampleData, StaticDataSource) {

I was not able to specify file extension, my IDE (pycharm), would mark "red", when used "data.js", so it needs to stay without an extension, such as "sample/data"

What I end up doing to make it work, is downloading the full fuelux directory from github in /var/www/html on a plain Apache setup ( no django, to avoid URL.py issues for static files ) and everything works using their example. Here are the steps to get you started :

cd /var/www/html git clone https://github.com/ExactTarget/fuelux.git and you will end up with fuelux in /var/www/html/fuelux/

in your browser, navigate to : http://foo.com/fuelux/index.html ( assuming your default document root is /var/www/html )

good luck!

Answer 2

Adding on to creatovisguru's answer:

In his JSFiddle example, pagination is broken. To fix it, change the following line:

callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });

Answer 3

I didn't see all of the information I needed to provide a finite answer. The real magic is the datasource.js file (which you had not provided).

I thought an easier way of demonstrating all the necessary pieces would be to put together a JSFiddle showing your data in use and all the pieces that were necessary.

Link to JSFiddle of Fuel UX Datagrid sample with your data

Adam Alexander, the author of the tool, also has written a valuable example of using the dataGrid DailyJS Fuel UX DataGrid

// DataSource Constructor
var StaticDataSource = function( options ) {
this._columns = options.columns;
this._formatter = options.formatter;
this._data = options.data;
this._delay = options.delay;
};

StaticDataSource.prototype = {
columns: function() {
    return this._columns
},
data: function( options, callback ) {
    var self = this;

    var data = $.extend(true, [], self._data);

    // SEARCHING
    if (options.search) {
        data = _.filter(data, function (item) {
            for (var prop in item) {
                if (!item.hasOwnProperty(prop)) continue;
                if (~item[prop].toString().toLowerCase().indexOf(options.search.toLowerCase())) return true;
            }
            return false;
        });
    }

    var count = data.length;

    // SORTING
    if (options.sortProperty) {
        data = _.sortBy(data, options.sortProperty);
        if (options.sortDirection === 'desc') data.reverse();
    }

    // PAGING
    var startIndex = options.pageIndex * options.pageSize;
    var endIndex = startIndex + options.pageSize;
    var end = (endIndex > count) ? count : endIndex;
    var pages = Math.ceil(count / options.pageSize);
    var page = options.pageIndex + 1;
    var start = startIndex + 1;

    data = data.slice(startIndex, endIndex);

    if (self._formatter) self._formatter(data);

    callback({ data: data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
}
};

If you were to provide your markup and what your "datasource.js" file contains, I may be able to help you further.

I think the demonstration provides much information on any pieces you may not have understood.