Update the grid when a record is changed

Fixes #255

src/view.slickgrid.js

@@ -39,6 +39,7 @@ my.SlickGrid = Backbone.View.extend({
     this.model.records.bind('add', this.render);
     this.model.records.bind('reset', this.render);
     this.model.records.bind('remove', this.render);
+    this.model.records.bind('change', this.onRecordChanged, this)
 
     var state = _.extend({
         hiddenColumns: [],
@@ -58,6 +59,19 @@ my.SlickGrid = Backbone.View.extend({
   events: {
   },
 
+  onRecordChanged: function(record) {
+    // Ignore if the grid is not yet drawn
+    if (!this.grid) {
+      return;
+    }
+
+    // Let's find the row corresponding to the index
+    var row_index = this.grid.getData().getModelRow( record );
+    this.grid.invalidateRow(row_index);
+    this.grid.getData().updateItem(record, row_index);
+    this.grid.render();
+  },
+
   render: function() {
     var self = this;
 
@@ -129,6 +143,15 @@ my.SlickGrid = Backbone.View.extend({
     }
     columns = columns.concat(tempHiddenColumns);
 
+    // Transform a model object into a row
+    function toRow(m) {
+      var row = {};
+      self.model.fields.each(function(field){
+        row[field.id] = m.getFieldValueUnrendered(field);
+      });
+      return row;
+    }
+
     function RowSet() {
       var models = [];
       var rows = [];
@@ -142,16 +165,17 @@ my.SlickGrid = Backbone.View.extend({
       this.getItem = function(index) { return rows[index];}
       this.getItemMetadata= function(index) { return {};}
       this.getModel= function(index) { return models[index]; }
+      this.getModelRow = function(m) { return models.indexOf(m);}
+      this.updateItem = function(m,i) { 
+        rows[i] = toRow(m);
+        models[i] = m
+      };
     };
 
     var data = new RowSet();
 
     this.model.records.each(function(doc){
-      var row = {};
-      self.model.fields.each(function(field){
-        row[field.id] = doc.getFieldValueUnrendered(field);
-      });
-      data.push(doc, row);
+      data.push(doc, toRow(doc));
     });
 
     this.grid = new Slick.Grid(this.el, data, visibleColumns, options);

test/view.slickgrid.test.js

@@ -101,6 +101,31 @@ test('editable', function () {
               }, e, view.grid);
 });
 
+test('update', function() {
+  var dataset = Fixture.getDataset();
+  var view = new recline.View.SlickGrid({
+    model: dataset,
+    state: {
+      hiddenColumns:['x','lat','title'],
+      columnsOrder:['lon','id','z','date', 'y', 'country'],
+      columnsWidth:[
+        {column:'id',width: 250}
+      ],
+      gridOptions: {editable: true},
+      columnsEditor: [{column: 'country', editor: Slick.Editors.Text}]
+    }
+  });
+
+  $('.fixtures .test-datatable').append(view.el);
+  view.render();
+  view.grid.init();
+
+  var zbefore = view.grid.getData().getItem(1)['z'];
+  // Change the model at row 1
+  dataset.records.at(1).set('z', zbefore + 1);
+  equal( zbefore + 1, view.grid.getData().getItem(1)['z']);
+});
+
 test('renderers', function () {
   var dataset = Fixture.getDataset();