[#384, slickgrid][s]: slickgrid add support for row-add

src/view.slickgrid.js

@@ -5,6 +5,38 @@ this.recline.View = this.recline.View || {};
 
 (function($, my) {
   "use strict";
+
+  // Add new grid Control to display a new row add menu bouton
+  // It display a simple side-bar menu ,for user to add new 
+  // row to grid 
+
+  my.GridControl= Backbone.View.extend({
+    className: "recline-row-add",
+    // Template for row edit menu , change it if you don't love
+    template: '<h1><a href="#" class="recline-row-add btn">Add row</a></h1>',
+    
+    initialize: function(options){
+      var self = this;
+      _.bindAll(this, 'render');
+      this.state = new recline.Model.ObjectState();
+      this.render();
+    },
+
+    render: function() {
+      var self = this;
+      this.$el.html(this.template)
+    },
+
+    events : {
+      "click .recline-row-add" : "addNewRow"
+    },
+
+    addNewRow : function(e){
+      e.preventDefault()
+      this.state.set({"newrow" : "pending"})
+   }
+ }
+ );
 // ## SlickGrid Dataset View
 //
 // Provides a tabular view on a Dataset, based on SlickGrid.
@@ -39,10 +71,25 @@ my.SlickGrid = Backbone.View.extend({
   initialize: function(modelEtc) {
     var self = this;
     this.$el.addClass('recline-slickgrid');
+	
+    // Template for row delete menu , change it if you don't love 
+    this.templates = {
+	 "deleterow" : '<a href="#" class="recline-row-delete btn">X</a>'
+     }
+
+    //add menu for new row
+    this.editor    =  new  my.GridControl()
+    this.elSidebar =  this.editor.$el
+
+
     _.bindAll(this, 'render', 'onRecordChanged');
     this.listenTo(this.model.records, 'add remove reset', this.render);
     this.listenTo(this.model.records, 'change', this.onRecordChanged);
-
+    this.listenTo(this.editor.state, 'change', function(){
+	  this.model.records.add({})
+	  this.editor.state.set({"newrow" : "done"})
+    });
+    
     var state = _.extend({
         hiddenColumns: [],
         columnsOrder: [],
@@ -62,7 +109,6 @@ my.SlickGrid = Backbone.View.extend({
     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);
@@ -81,17 +127,12 @@ 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) {
-      // If row delete field format , change here if for example insteed
+      if(columnDef.id == "del"){
-	// of link we can have bouton or image depending of what you need
+        return self.templates.deleterow 
-      // RUFFUS! Do you think we should have a variable to set if
-      // ie template_del = '<a href="#" class="recline-column-delete">X</a>'
-      if (columnDef.id == "del"){
-        return '<a href="#" class="recline-column-delete">X</a>'
 	}
 	var field = self.model.fields.get(columnDef.id);
       if (field.renderer) {
@@ -100,7 +141,6 @@ my.SlickGrid = Backbone.View.extend({
         return  value 
       }
     };
-
     // we need to be sure that user is entering a valid  input , for exemple if 
     // field is date type and field.format ='YY-MM-DD', we should be sure that 
     // user enter a correct value 
@@ -133,12 +173,10 @@ my.SlickGrid = Backbone.View.extend({
         formatter: formatter,
         validator:validator(field)
       };
-
       var widthInfo = _.find(self.state.get('columnsWidth'),function(c){return c.column === field.id;});
       if (widthInfo){
         column.width = widthInfo.width;
       }
-
       var editInfo = _.find(self.state.get('columnsEditor'),function(c){return c.column === field.id;});
       if (editInfo){
         column.editor = editInfo.editor;
@@ -163,12 +201,10 @@ my.SlickGrid = Backbone.View.extend({
       }
       columns.push(column);
     });    
-    
     // Restrict the visible columns
     var visibleColumns = _.filter(columns, function(column) {
       return _.indexOf(self.state.get('hiddenColumns'), column.id) === -1;
     });
-
     // Order them if there is ordering info on the state
     if (this.state.get('columnsOrder') && this.state.get('columnsOrder').length > 0) {
       visibleColumns = visibleColumns.sort(function(a,b){
@@ -226,7 +262,6 @@ my.SlickGrid = Backbone.View.extend({
     });
 
     this.grid = new Slick.Grid(this.el, data, visibleColumns, options);
-
     // Column sorting
     var sortInfo = this.model.queryState.get('sort');
     if (sortInfo){
@@ -434,3 +469,4 @@ my.SlickGrid = Backbone.View.extend({
   // Slick.Controls.ColumnPicker
   $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
 })(jQuery);
+