Constructing fuelux datagrid datasource with custom backbone collection

Question

I am trying to build datagrid with sorting, searching and paging enabled. Therefore, I am using fuelux-datagrid.

MY backbone view looks like this:

var app = app || {};
$(function ($) {
'use strict';   

// The Players view
// ---------------
app.PlayersView = Backbone.View.extend({
    template: _.template( $("#player-template").html() ),
        initialize: function () {
        if(this.collection){
            this.collection.fetch();
        }
        this.listenTo(this.collection, 'all', this.render);
    },
    render: function () {           
        this.$el.html( this.template );
        var dataSource = new StaticDataSource({
            columns: [
                {
                    property: 'playername',
                    label: 'Name',
                    sortable: true
                },
                {
                    property: 'age',
                    label: 'A',
                    sortable: true
                }
            ],
            data: this.collection.toJSON(),
            delay: 250
        });

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

The player template just contain the template as given in fuelux datagrid . My routing code somewhere instantiate app.playerview with collection as

 new app.PlayersView({
            collection : new app.PlayersCollection
        }));

My players collection contains list of player model as below

 [{
  "id":1,
  "playername":"rahu",
  "age":13

 },
{
  "id":2,
  "playername":"sahul",
  "age":18

},
{
  "id":3,
  "playername":"ahul",
  "age":19

 }]

My datasource class/function to construct datasoruce with columns and data method is as given in datasource constructor

However, I get the error the " datasource in not defined ". Can anybody help me? I just wanted to hack the code so that instead of datasource constructed from local data.js in given example, I want to construct the datasource so that it takes data from playercollection.

Also, how to add the one extra column so that we can put edit tag insdie and its should be able to edit the particular row model on clicking that edit.

I have been stucking around these a lot. It would be great help to figure out the answer.

Answer 1

I was stucking around datasource. I modified the datasource as follows and then it worked.

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

StaticDataSource.prototype = {

    columns: function () {
        return this._columns;
    },

    data: function (options, callback) {
        var self = this;

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

            // SEARCHING
            if (options.search) {
                data = _.filter(data, function (item) {
                    var match = false;

                    _.each(item, function (prop) {
                        if (_.isString(prop) || _.isFinite(prop)) {
                            if (prop.toString().toLowerCase().indexOf(options.search.toLowerCase()) !== -1) match = true;
                        }
                    });

                    return match;
                });
            }

            // FILTERING
            if (options.filter) {
                data = _.filter(data, function (item) {
                    switch(options.filter.value) {
                        case 'lt5m':
                            if(item.population < 5000000) return true;
                            break;
                        case 'gte5m':
                            if(item.population >= 5000000) return true;
                            break;
                        default:
                            return true;
                            break;
                    }
                });
            }

            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: start, end: end, count: count, pages: pages, page: page });

        }, this._delay)
    }
};

Infact, I just removed following code and its associated braces.

(function (root, factory) {
if (typeof define === 'function' && define.amd) {
    define(['underscore'], factory);
} else {
    root.StaticDataSource = factory();
}
}(this, function () {

I dont know what exactly the above code is doing an what dependdencies they have over.