[view/slickgrid][s]: slickgrid supports renderers/formatters correctly and does not escape html.

src/model.js

@@ -190,13 +190,22 @@ my.Record = Backbone.Model.extend({
   // For the provided Field get the corresponding rendered computed data value
   // for this record.
   getFieldValue: function(field) {
+    val = this.getFieldValueUnrendered(field);
+    if (field.renderer) {
+      val = field.renderer(val, field, this.toJSON());
+    }
+    return val;
+  },
+
+  // ### getFieldValueUnrendered
+  //
+  // For the provided Field get the corresponding computed data value
+  // for this record.
+  getFieldValueUnrendered: function(field) {
     var val = this.get(field.id);
     if (field.deriver) {
       val = field.deriver(val, field, this);
     }
-    if (field.renderer) {
-      val = field.renderer(val, field, this);
-    }
     return val;
   },
 
@@ -233,9 +242,9 @@ my.RecordList = Backbone.Collection.extend({
 // Following additional instance properties:
 // 
 // @property {Function} renderer: a function to render the data for this field.
-// Signature: function(value, field, doc) where value is the value of this
+// Signature: function(value, field, record) where value is the value of this
 // cell, field is corresponding field object and record is the record
-// object. Note that implementing functions can ignore arguments (e.g.
+// object (as simple JS object). Note that implementing functions can ignore arguments (e.g.
 // function(value) would be a valid formatter function).
 // 
 // @property {Function} deriver: a function to derive/compute the value of data

src/view-slickgrid.js

@@ -68,12 +68,26 @@ my.SlickGrid = Backbone.View.extend({
 
     // We need all columns, even the hidden ones, to show on the column picker
     var columns = [];
+    // custom formatter as default one escapes html
+    // plus this way we distinguish between rendering/formatting and computed value (so e.g. sort still works ...)
+    // row = row index, cell = cell index, value = value, columnDef = column definition, dataContext = full row values
+    var formatter = function(row, cell, value, columnDef, dataContext) {
+      var field = self.model.fields.get(columnDef.id);
+      if (field.renderer) {
+        return field.renderer(value, field, dataContext);
+      } else {
+        return value;
+      }
+    }
     _.each(this.model.fields.toJSON(),function(field){
-      var column = {id:field['id'],
+      var column = {
+        id:field['id'],
         name:field['label'],
         field:field['id'],
         sortable: true,
-                    minWidth: 80};
+        minWidth: 80,
+        formatter: formatter
+      };
 
       var widthInfo = _.find(self.state.get('columnsWidth'),function(c){return c.column == field.id});
       if (widthInfo){
@@ -113,7 +127,7 @@ my.SlickGrid = Backbone.View.extend({
     this.model.currentRecords.each(function(doc){
       var row = {};
       self.model.fields.each(function(field){
-        row[field.id] = doc.getFieldValue(field);
+        row[field.id] = doc.getFieldValueUnrendered(field);
       });
       data.push(row);
     });

test/view-slickgrid.test.js

@@ -65,7 +65,7 @@ test('renderers', function () {
   var dataset = Fixture.getDataset();
 
   dataset.fields.get('country').renderer = function(val, field, doc){
-    return 'Country: ' + val;
+    return '<a href="abc">Country: ' + val + '</a>';
   };
 
   var deriver = function(val, field, doc){
@@ -73,7 +73,6 @@ test('renderers', function () {
   }
   dataset.fields.add(new recline.Model.Field({id:'computed'},{deriver:deriver}));
 
-
   var view = new recline.View.SlickGrid({
     model: dataset
   });
@@ -84,6 +83,7 @@ test('renderers', function () {
   view.grid.init();
 
   equal($(view.grid.getCellNode(0,view.grid.getColumnIndex('country'))).text(),'Country: DE');
+  equal($(view.grid.getCellNode(0,view.grid.getColumnIndex('country'))).html(),'<a href="abc">Country: DE</a>');
   equal($(view.grid.getCellNode(0,view.grid.getColumnIndex('computed'))).text(),'10');
   view.remove();
 });