From 2d433bb40ff089223dd019f35543a65d3d801a84 Mon Sep 17 00:00:00 2001 From: ndudenhoeffer Date: Wed, 26 Aug 2015 20:25:03 -0500 Subject: [PATCH] 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 --- .../move-columns/js/column-movable.js | 31 +++++++++++++++++++ .../move-columns/test/column-movable.spec.js | 21 +++++++++++-- 2 files changed, 49 insertions(+), 3 deletions(-) diff --git a/src/features/move-columns/js/column-movable.js b/src/features/move-columns/js/column-movable.js index f457502ff7..98b1e03194 100644 --- 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 index d8bb84a599..18c2a345e7 100644 --- 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');