Backgrid1

by erichbschulz

HTML

<script src="http://wyuenho.github.com/backgrid/assets/js/jquery.js"></script>
<script src="http://wyuenho.github.com/backgrid/assets/js/underscore.js"></script>
<script src="http://wyuenho.github.com/backgrid/assets/js/backbone.js"></script>
<script src="http://wyuenho.github.com/backgrid/lib/backgrid.js"></script>
<link rel="stylesheet" href="http://wyuenho.github.com/backgrid/lib/backgrid.css">
<link rel="stylesheet" href="http://wyuenho.github.com/backgrid/assets/css/bootstrap.css">
<h1>First Grid</h1><div id="grid"></div>

JavaScript

var Election = Backbone.Model.extend({});

var collection = Backbone.Collection.extend({
    model: Election
});

var sampleData = [{
    name: 'Dheeraj Aggarwal',
    description: 'Really liked backgrid :)'
}];
var models = new collection([]);
//var models = new collection(sampleData);//try to initialize in this way, then it works fine
var columns = [{
    name: "select",
    label: "",
    cell: "boolean",
    sortable: false
}, {
    name: "name",
    label: "Name",
    cell: "string"
}, {
    name: "description",
    label: "Description",
    cell: "string"
}];

var grid = new Backgrid.Grid({
    columns: columns,
    collection: models
    //footer: Backgrid.Extension.Paginator
});
$('#grid').append(grid.render().$el);

var elections = [{
    name: 'A1',
    description: 'B'
}, {
    name: 'A2',
    description: 'B'
}, {
    name: 'A3',
    description: 'B'
} ];

grid.insertRow({
    name: 'A',
    description: 'B'
});
_.each(elections,grid.insertRow);