fix(moveColumns) Restore column order after altering columnDefs array.

Cache the column order when columns are moved, and restore that order using a dataChangeCallback. Fixes #4254
angular-ui · Aug 27, 2015 · 2d433bb · 2d433bb
1 parent f2ed365
commit 2d433bb
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 3 deletions.
diff --git a/src/features/move-columns/js/column-movable.js b/src/features/move-columns/js/column-movable.js
@@ -27,7 +27,9 @@
         var self = this;
         this.registerPublicApi(grid);
         this.defaultGridOptions(grid.options);
+        grid.moveColumns = {orderCache: []}; // Used to cache the order before columns are rebuilt
         grid.registerColumnBuilder(self.movableColumnBuilder);
+        grid.registerDataChangeCallback(self.verifyColumnOrder, [uiGridConstants.dataChange.COLUMN]);
       },
       registerPublicApi: function (grid) {
         var self = this;
@@ -137,6 +139,34 @@
           : colDef.enableColumnMoving;
         return $q.all(promises);
       },
+      /**
+       * @ngdoc method
+       * @name updateColumnCache
+       * @methodOf  ui.grid.moveColumns
+       * @description Cache the current order of columns, so we can restore them after new columnDefs are defined
+       */
+      updateColumnCache: function(grid){
+        grid.moveColumns.orderCache = grid.getOnlyDataColumns();
+      },
+      /**
+       * @ngdoc method
+       * @name verifyColumnOrder
+       * @methodOf  ui.grid.moveColumns
+       * @description dataChangeCallback which uses the cached column order to restore the column order
+       * when it is reset by altering the columnDefs array.
+       */
+      verifyColumnOrder: function(grid){
+        var headerRowOffset = grid.rowHeaderColumns.length;
+        var newIndex;
+
+        angular.forEach(grid.moveColumns.orderCache, function(cacheCol, cacheIndex){
+          newIndex = grid.columns.indexOf(cacheCol);
+          if ( newIndex !== -1 && newIndex - headerRowOffset !== cacheIndex ){
+            var column = grid.columns.splice(newIndex, 1)[0];
+            grid.columns.splice(cacheIndex + headerRowOffset, 0, column);
+          }
+        });
+      },
       redrawColumnAtPosition: function (grid, originalPosition, newPosition) {
 
         var columns = grid.columns;
@@ -154,6 +184,7 @@
             }
           }
           columns[newPosition] = originalColumn;
+          service.updateColumnCache(grid);
           grid.queueGridRefresh();
           $timeout(function () {
             grid.api.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );

diff --git a/src/features/move-columns/test/column-movable.spec.js b/src/features/move-columns/test/column-movable.spec.js
@@ -1,6 +1,6 @@
 describe('ui.grid.moveColumns', function () {
 
-  var scope, element, timeout, gridUtil, document;
+  var scope, element, timeout, gridUtil, document, uiGridConstants;
 
   var data = [
     { "name": "Ethel Price", "gender": "female", "age": 25, "company": "Enersol", phone: '111'},
@@ -11,14 +11,14 @@ describe('ui.grid.moveColumns', function () {
 
   beforeEach(module('ui.grid.moveColumns'));
 
-  beforeEach(inject(function (_$compile_, $rootScope, $timeout, _gridUtil_, $document) {
+  beforeEach(inject(function (_$compile_, $rootScope, $timeout, _gridUtil_, $document, _uiGridConstants_) {
 
     var $compile = _$compile_;
     scope = $rootScope;
     timeout = $timeout;
     gridUtil = _gridUtil_;
     document = $document;
-
+    uiGridConstants = _uiGridConstants_;
 
     scope.gridOptions = {};
     scope.gridOptions.data = data;
@@ -74,6 +74,21 @@ describe('ui.grid.moveColumns', function () {
     expect(scope.grid.columns[4].name).toBe('gender');
   });
 
+  it('expect moveColumn() to persist after adding additional column', function () {
+    scope.gridApi.colMovable.moveColumn(0, 1);
+    scope.gridOptions.columnDefs.push({ field: 'name', displayName: 'name2', width: 200 });
+    scope.gridApi.core.notifyDataChange( uiGridConstants.COLUMN );
+    timeout.flush();
+    scope.$digest();
+
+    expect(scope.grid.columns[0].name).toBe('gender');
+    expect(scope.grid.columns[1].name).toBe('name');
+    expect(scope.grid.columns[2].name).toBe('age');
+    expect(scope.grid.columns[3].name).toBe('company');
+    expect(scope.grid.columns[4].name).toBe('phone');
+    expect(scope.grid.columns[5].displayName).toBe('name2');
+  });
+
   it('expect moveColumn() to not change position of columns if enableColumnMoving is false', function () {
     scope.gridApi.colMovable.moveColumn(2, 1);
     expect(scope.grid.columns[0].name).toBe('name');