How to pass the editable cell content after edited in backgrid.js

Question

Here is my grid.js that populates the data from database.I got all codes set and everything is working fine. After the editable field is clicked i want that specific data to be passed to the backend. How can i achieve that?

As it is an example from here, i didnt create the JSFIDDLE

The documentation says BackGrid.CellEditor and some codes says this.listenTo()

Unfortunately, I dont know how to embed this into this code.

Thanks for the help.

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

var PageableTerritories = Backbone.PageableCollection.extend({
  model: Territory,
// url: "./json/territories.json",
  url: "./api.php",
  state: {
    pageSize: 15
  },
  mode: "client" // page entirely on the client side
});

var pageableTerritories = new PageableTerritories();

var columns = [{
    name: "id", // The key of the model attribute
    label: "ID", // The name to display in the header
    editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
    // Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
    cell: Backgrid.IntegerCell.extend({
      orderSeparator: ''
    })
  }, {
    name: "name",
    label: "Name",
    // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
    cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
  }, {
    name: "pop",
    label: "Population",
    cell: "integer" // An integer cell is a number cell that displays humanized integers
  }, {
    name: "percentage",
    label: "% of World Population",
    cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
  }, {
    name: "date",
    label: "Date",
    cell: "date" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
  }, {
    name: "url",
    label: "URL",
    cell: "uri" // Renders the value in an HTML anchor element
}];


// Set up a grid to use the pageable collection
var pageableGrid = new Backgrid.Grid({
  columns: [{
    // enable the select-all extension
    name: "",
    cell: "select-row",
    headerCell: "select-all"
  }].concat(columns),
  collection: pageableTerritories
});

// Render the grid
var $example2 = $("#example-1-result");

$example2.append(pageableGrid.render().el)

// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
  collection: pageableTerritories
});

// Render the paginator
$example2.after(paginator.render().el);

// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
//var filter = new Backgrid.Extension.ClientSideFilter({
//  collection: pageableTerritories,
//  fields: ['name']
//});

// Render the filter
//$example2.before(filter.render().el);

// Add some space to the filter and move it to the right
//$(filter.el).css({float: "right", margin: "20px"});

// Fetch some data
pageableTerritories.fetch({reset: true});

I created downloading a backbone template. I share the full project file here Sharing full project folder Dropbox Link

Oh man this is way more trouble then its worth. I tried setting this up on jsfiddle to see if i can get it going, the project is almost 2 years old and the main dependency it uses (backbone-pageable) has been deprecated (and replaced with backbone.paginator that gives me errors). Unless you take the time and get me an example that at the very least doesnt crash im not going to help you - 20mins wasted already. — Javier Buzzi, Oct 21 '15 at 15:56
Hi..I created the project with a predefined template. you can download project full setup from the dropbox link. The second link is for the grid. — Alaksandar Jesus Gene, Oct 21 '15 at 17:56

Javier Buzzi · Answer 1 · 2015-10-21T18:55:26.250

Looks pretty simple. They dont mock around with anything, they leave the models intact. You can do this:

// REPLACE your current line: var Territory = Backbone.Model.extend({});
// with this \/
var Territory = Backbone.Model.extend({
  initialize: function(){
    Backbone.Model.prototype.initialize.apply(this, arguments);
    this.on('change', this.checkIfChanged);
  },
  checkIfChanged: function(){
    alert(this.get('id').toString() + ' changed: ' + JSON.stringify(this.changed))
  }
});

and leave the rest of the code as-is.

Remember there is a this._previousAttributes if you want to see what it was before.

Note: if you want to make it save after that, i really suggest you wrap it around a _.debounce(this.checkIfChanged, 500 or 1000) so you dont get users saving back-to-back.

score 0 · Answer 2 · answered Oct 22 '15 at 14:25

This solution worked for me. I updated this in grid.js of my file. Thanks to @Javier Buzzi.

Backbone.Model.extend({
initialize: function () {
            Backbone.Model.prototype.initialize.apply(this, arguments);
            this.on("change", function (model, options) {
                console.log("Saving change " + JSON.stringify(options) );
              if (options && options.save === false) return;
              model.save();
            });
          }
});

How to pass the editable cell content after edited in backgrid.js

2 Answers2