Edit Current row on edit button click

[RajuIpl]

I am trying an example with back grid and paginator extension. Successfull in using both grid and paginator. I want to edit one/more cells in current row on clicking on edit button on each row. Iam rendering a edit button on each row but unable to figure it out how to enable the cells for editing in that row. Anybody give me suggestion(an example would be better) how to do this.

Here is my sample code i have to fill the EditCell ->editRow function.

    (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('<button>Edit</button>'),
        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);

    })();

[daxyonis]

Create a Backbone.View bound to the model, that renders a modal form (such as Bootstrap Modal) whenever the edit button is clicked.

[wyuenho]

You can either pop up a modal with a form to change, or you can loop over the columns and set every column to be editable as soon as your edit button is toggled.