title: How to edit cells with backgrid
body: <p>I am trying an example with backgrid paging. I have to edit a cell content on click of edit button then save the updated cell content to the server. Here iam rendering the buttons using backgrid cell extention but not able to figure it out how to enable a cell for editing on click of the button.</p>
  
  <p>Here is the sample am trying.. In EditCell i have a method editRow in which i have to perform the updation.</p>
  
  <p>Thanks</p>
  
  <pre><code>(function(){
  //Namespacing the views collections and models
  window.App = {
  Models: {},
  Views: {},
  Collections: {},
  Helpers: {}
  },
  //Template helper to load the template of any id    
  App.Helpers.template = function(id){
  return _.template($('#' + id).html());
  }
  
  
  //Person Model
  App.Models.Person = Backbone.Model.extend({});
  
  //Person collection - People
  App.Collections.People = Backbone.PageableCollection.extend({
  model: App.Models.Person,
  state: {
  pageSize: 10
  },
  mode: "client"
  });
  
  
  var personCollection = new App.Collections.People([
  {
  id: 1,
  name: 'Trim',
  age: 33,
  occupation: 'Dotnet Programmer'
  },
  {
  id: 2,
  name: 'Crum',
  age: 25,
  occupation: 'Developer'
  },
  {
  id: 3,
  name: 'Drum',
  age: 46,
  occupation: 'Designer'
  },
  {
  id: 4,
  name: 'Srum',
  age: 27,
  occupation: 'Java Programmer'
  },
  {
  id: 5,
  name: 'Vrum',
  age: 24,
  occupation: 'Developer'
  },
  {
  id: 6,
  name: 'Brum',
  age: 29,
  occupation: 'Designer'
  },
  {
  id: 7,
  name: 'Frum',
  age: 33,
  occupation: 'Dotnet Programmer'
  },
  {
  id: 8,
  name: 'Jrum',
  age: 25,
  occupation: 'Developer'
  },
  {
  id: 9,
  name: 'Lrum',
  age: 46,
  occupation: 'Designer'
  },
  {
  id: 10,
  name: 'Hrum',
  age: 27,
  occupation: 'Java Programmer'
  },
  {
  id: 11,
  name: 'Prum',
  age: 24,
  occupation: 'Developer'
  },
  {
  id: 12,
  name: 'Zrum',
  age: 29,
  occupation: 'Designer'
  }
  ]
  );
  
  var EditCell = Backgrid.Cell.extend({
  template: _.template('&lt;button&gt;Edit&lt;/button&gt;'),
  events: {
  "click": "editRow"
  },
  editRow: function (e) {
  e.preventDefault();
  //Enable the occupation cell for editing 
  //Save the changes 
  //Render the changes.
  },
  render: function () {
  this.$el.html(this.template(this.model.toJSON()));
  this.delegateEvents();
  return this;
  }
  });
  
  var columns = [{
  name: "id",
  label: "ID",
  editable: false,
  cell: Backgrid.IntegerCell.extend({
  orderSeparator: ''
  })
  }, {
  name: "name",
  label: "Name",
  cell: "string"
  }, {
  name: "age",
  label: "Age",
  cell: "integer"
  }, {
  name: "occupation",
  label: "Occupation",
  cell: "string" 
  }, {
  name: "actions",
  label: "Actions",
  cell: EditCell 
  }];
  
  // Initialize a new Grid instance
  var grid = new Backgrid.Grid({
  columns: columns,
  collection: personCollection
  });
  
  var paginator = new Backgrid.Extension.Paginator({
  collection: personCollection
  });
  
  // Render the grid and attach the root to your HTML document
  $("#grid").append(grid.render().el);
  $("#paginator").append(paginator.render().$el);
  
  })();
  </code></pre>