[#407] support for row reordering in slickGrid

README.md

@@ -27,6 +27,8 @@ See CONTRIBUTING.md.
 * [Adrià Mercader](http://amercader.net/)
 * [Dominik Moritz](https://github.com/domoritz)
 * [Friedrich Lindenberg](http://pudo.org/)
+* [Alioune Dia](http://https://github.com/aliounedia)
+* [kielni](https://github.com/kielni)
 * And [many more](https://github.com/okfn/recline/graphs/contributors)
 
 ## Changelog
@@ -36,7 +38,7 @@ See CONTRIBUTING.md.
 [v0.6 milestone](https://github.com/okfn/recline/issues?milestone=5)
 
 Possible breaking changes
-
+* Support for row/add/delete/Reorder for recline slickGrid check `_includes/recline-deps.html` for slcikGrid plugins required #396
 * Many backends moved to their own repositories #314
 * Updated Leaflet to latest version 0.4.4 #220
 * Added marker clustering in map view to handle a large number of markers

css/flot.css

@@ -19,8 +19,8 @@
 
 #recline-flot-tooltip {
     position: absolute;
-    background-color: #FEE;
-    color: #000000;
-    opacity: 0.8;
-    border: 1px solid #fdd;
+    background-color: #FEE !important;
+    color: #000000 !important;
+    opacity: 0.8 !important;
+    border: 1px solid #fdd !important;
 }

css/multiview.css

@@ -67,10 +67,6 @@
   vertical-align: top;
 }
 
-.header .recline-query-editor label {
-  display:none;
-}
-
 /**********************************************************
   * Pager
   *********************************************************/
@@ -82,10 +78,6 @@
   margin-left: 20px;
 }
 
-.header .recline-pager .pagination label {
-  display:none;
-}
-
 .header .recline-pager .pagination input {
   width: 30px;
   height: 18px;

demos/multiview/app.js

@@ -77,8 +77,12 @@ var createExplorer = function(dataset, state) {
         state: {
           gridOptions: {
             editable: true,
+		// Enable support for row add
             enabledAddRow: true,
+		// Enable support for row delete
 		enabledDelRow: true,
+		// Enable support for row Reoder 
+		enableReOrderRow =true,
             autoEdit: false,
             enableCellNavigation: true
           },

src/view.multiview.js

@@ -248,9 +248,6 @@ my.MultiView = Backbone.View.extend({
     // the main views
     _.each(this.pageViews, function(view, pageName) {
       view.view.render();
-      if (view.view.redraw) {
-        view.view.redraw();
-      }
       $dataViewContainer.append(view.view.el);
       if (view.view.elSidebar) {
         $dataSidebar.append(view.view.elSidebar);

src/view.slickgrid.js

@@ -155,8 +155,32 @@ my.SlickGrid = Backbone.View.extend({
 	  }
 	}
     };
-   
-    //Add row delete support , check if enableDelRow is set to true or not set
+
+    //Add row delete support, check if enableReOrderRow is set to true , by
+    //default it is set to false
+    // state: {
+    //      gridOptions: {
+    //        enableReOrderRow: true,
+    //      },
+    if(this.state.get("gridOptions") 
+	&& this.state.get("gridOptions").enableReOrderRow != undefined 
+      && this.state.get("gridOptions").enableReOrderRow == true ){
+      columns.push({
+        id: 'del',
+        name: '',
+        field: 'del',
+        sortable: true,
+        width: 38,
+        formatter: formatter,
+        validator:validator
+      })
+    }
+    //Add row delete support, check if enabledDelRow is set to true , by
+    //default it is set to false
+    // state: {
+    //      gridOptions: {
+    //        enabledDelRow: true,
+    //      },
     if(this.state.get("gridOptions") 
 	&& this.state.get("gridOptions").enabledDelRow != undefined 
       && this.state.get("gridOptions").enabledDelRow == true ){
@@ -168,15 +192,6 @@ my.SlickGrid = Backbone.View.extend({
         selectable: false,
         resizable: false,
         cssClass: "recline-cell-reorder"
-       })
-      columns.push({
-        id: 'del',
-        name: '',
-        field: 'del',
-        sortable: true,
-        width: 38,
-        formatter: formatter,
-        validator:validator
       })
     }
     _.each(this.model.fields.toJSON(),function(field){
@@ -347,8 +362,12 @@ my.SlickGrid = Backbone.View.extend({
       self.model.records.reset(data)
       
     });
+    //register The plugin to handle row Reorder
+    if(this.state.get("gridOptions") 
+	&& this.state.get("gridOptions").enableReOrderRow != undefined 
+      && this.state.get("gridOptions").enableReOrderRow == true ){
     self.grid.registerPlugin(moveRowsPlugin);
-    
+    }
     /* end row reordering support*/
     
     this._slickHandler.subscribe(this.grid.onSort, function(e, args){
@@ -388,8 +407,19 @@ my.SlickGrid = Backbone.View.extend({
     this._slickHandler.subscribe(this.grid.onClick,function(e, args){
       //try catch , because this fail in qunit , but no
       //error on browser.
-    	try{e.preventDefault()}catch(e){}
-    	if (args.cell == 1 && self.state.get("gridOptions").enabledDelRow == true){
+      try{e.preventDefault()}catch(e){}
+
+      // The cell of grid that handle row delete is The first cell (0) if
+      // The grid ReOrder is not present ie  enableReOrderRow == false
+      // else it is The the second cell (1) , because The 0 is now cell
+      // that handle row Reoder.
+      var cell =0
+      if(self.state.get("gridOptions") 
+	&& self.state.get("gridOptions").enableReOrderRow != undefined 
+      && self.state.get("gridOptions").enableReOrderRow == true ){
+        cell =1
+      }
+      if (args.cell == cell && self.state.get("gridOptions").enabledDelRow == true){
           // We need to delete the associated model
           var model = data.getModel(args.row);
           model.destroy()

src/widget.pager.js

@@ -12,7 +12,7 @@ my.Pager = Backbone.View.extend({
     <div class="pagination"> \
       <ul> \
         <li class="prev action-pagination-update"><a href="">&laquo;</a></li> \
-        <li class="active"><label for="from">From</label><a><input name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input name="to" type="text" value="{{to}}" /> </a></li> \
+        <li class="active"><a><input name="from" type="text" value="{{from}}" /> &ndash; <input name="to" type="text" value="{{to}}" /> </a></li> \
         <li class="next action-pagination-update"><a href="">&raquo;</a></li> \
       </ul> \
     </div> \

src/widget.queryeditor.js

@@ -12,7 +12,7 @@ my.QueryEditor = Backbone.View.extend({
     <form action="" method="GET" class="form-inline"> \
       <div class="input-prepend text-query"> \
         <span class="add-on"><i class="icon-search"></i></span> \
-        <label>Search</label><input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
+        <input type="text" name="q" value="{{q}}" class="span2" placeholder="Search data ..." class="search-query" /> \
       </div> \
       <button type="submit" class="btn">Go &raquo;</button> \
     </form> \

test/view.slickgrid.test.js

@@ -113,7 +113,7 @@ test('delete-row' , function(){
       columnsWidth:[
         {column:'id',width: 250}
       ],
-      gridOptions: {editable: true , "enabledDelRow":true},
+      gridOptions: {editable: true , "enabledDelRow":true },
       columnsEditor: [{column: 'country', editor: Slick.Editors.Text}]
     }
   });
@@ -125,11 +125,57 @@ test('delete-row' , function(){
   dataset.records.on('remove', function(record){
     equal(dataset.records.length, old_length  -1 );
   });
-
   // Be sure a cell change triggers a change of the model
   e = new Slick.EventData();
   view.grid.onClick.notify({
     row: 1,
+    cell: 0,
+    grid: view.grid
+  }, e, view.grid);
+
+  view.remove();
+
+
+});
+
+
+//Test delete row with RowReorder set to True , This is The same
+// test as above (delete-row), the only diference is that here we Enable
+// row ReOrder to true, so The cell That handle delete row of grid is
+// 1 instead of 0.
+
+// The cell of grid that handle row delete is The first cell (0) if
+// The grid ReOrder is not present ie  enableReOrderRow == false
+// else it is The the second cell (1) , because The 0 is now cell
+// that handle row Reoder.
+
+test('delete-row-with-row-reorder-ativated' , 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 , "enabledDelRow":true , "enableReOrderRow":true},
+      columnsEditor: [{column: 'country', editor: Slick.Editors.Text}]
+    }
+  });
+
+  $('.fixtures .test-datatable').append(view.el);
+  view.render();
+  view.show();
+  old_length = dataset.records.length
+  dataset.records.on('remove', function(record){
+    equal(dataset.records.length, old_length  -1 );
+  });
+  // Be sure a cell change triggers a change of the model
+  e = new Slick.EventData();
+  view.grid.onClick.notify({
+    row: 1,
+    // cell is 1 instead of 0
     cell: 1,
     grid: view.grid
   }, e, view.grid);
@@ -139,6 +185,7 @@ test('delete-row' , function(){
 
 });
 
+
 test('add-row' , function(){
 //To test adding row on slickgrid , we add some menu GridControl
 //I am based on the FlotControl in flot wiewer , to add a similary