Category: Backgrid.js

Create a Backgrid populated with data from Parse.com and have it auto save back to Parse when a field is edited:

//load my Parse.com Class called "parts"
var Part = Parse.Object.extend("parts", {
  //save the data back to parse.com when it changes
  initialize: function() {
    Parse.Object.prototype.initialize.apply(this,arguments); this.on("change", function (model,options) {
     if (options && options.save === false) return;
     model.save()
    });
  }
});

var Parts = Parse.Collection.extend({
  model: Part
});

var columns = [{
    name: "id",
    label: "ID",
    editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
    cell: Backgrid.IntegerCell.extend({
      orderSeparator: ''
    })
}, {
    name: "name",
    label: "Name",
    cell: "string"
}, {
    name: "description",
    label: "description",
    cell: "string"
}];

var parts = new Parts();

// Initialize a new Grid instance
var grid = new Backgrid.Grid({
  columns: columns,
  collection: parts
});

// Render the grid and attach the root to your HTML document
$("#results-grid").append(grid.render().el);

// Fetch some countries from the url
parts.fetch({reset: true});