When column changes, grid rebuilds instead of build styles.

Fixed issue where if selection column was hidden, rows wouldn't take up the remain space. Fixed issue where if columns were reordered, then one was hidden, then reordered again, then made the one hidden visible, columns would then be overlapping since the column indexes would be the same.
patchcr · Jun 27, 2013 · feab97e · feab97e
1 parent d7fb194
commit feab97e
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 54 deletions.
diff --git a/build/ng-grid.debug.js b/build/ng-grid.debug.js
@@ -2,7 +2,7 @@
 * ng-grid JavaScript Library
 * Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md 
 * License: MIT (http://www.opensource.org/licenses/mit-license.php)
-* Compiled At: 06/26/2013 19:28
+* Compiled At: 06/27/2013 04:08
 ***********************************************/
 (function(window, $) {
 'use strict';
@@ -339,7 +339,7 @@ angular.module('ngGrid.services').factory('$domUtilityService',['$utilityService
     domUtilityService.setColLeft.immediate = 1;
     domUtilityService.RebuildGrid = function($scope, grid){
         domUtilityService.UpdateGridLayout($scope, grid);
-        if (grid.config.maintainColumnRatios) {
+        if (grid.config.maintainColumnRatios == null || grid.config.maintainColumnRatios) {
             grid.configureColumnWidths();
         }
         $scope.adjustScrollLeft(grid.$viewport.scrollLeft());
@@ -1121,10 +1121,9 @@ var ngEventProvider = function (grid, $scope, domUtilityService, $timeout) {
             $scope.columns.splice(self.colToMove.col.index, 1);
             $scope.columns.splice(headerScope.col.index, 0, self.colToMove.col);
             grid.fixColumnIndexes();
-            // Finally, rebuild the CSS styles.
-            domUtilityService.BuildStyles($scope, grid, true);
             // clear out the colToMove object
             self.colToMove = undefined;
+            domUtilityService.digest($scope);
         }
     };
 
@@ -1607,8 +1606,6 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
             asteriskNum = 0,
             totalWidth = 0;
 
-        totalWidth += self.config.showSelectionCheckbox ? 25 : 0;
-
         // When rearranging columns, their index in $scope.columns will no longer match the original column order from columnDefs causing
         // their width config to be out of sync. We can use "originalIndex" on the ngColumns to get hold of the correct setup from columnDefs, but to
         // avoid O(n) lookups in $scope.columns per column we setup a map.
@@ -1619,6 +1616,10 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
             if (!$utils.isNullOrUndefined(ngCol.originalIndex)) {
                 var origIndex = ngCol.originalIndex;
                 if (self.config.showSelectionCheckbox) {
+                    //if visible, takes up 25 pixels
+                    if(i === 0 && ngCol.visible){
+                        totalWidth += 25;
+                    }
                     // The originalIndex will be offset 1 when including the selection column
                     origIndex--;
                 }
@@ -1765,7 +1766,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
               $scope.$emit('ngGridEventGroups', a);
             }, true);
             $scope.$watch('columns', function (a) {
-                domUtilityService.BuildStyles($scope, self, true);
+                domUtilityService.RebuildGrid($scope, self);
                 $scope.$emit('ngGridEventColumns', a);
             }, true);
             $scope.$watch(function() {
@@ -1908,9 +1909,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
     self.fixColumnIndexes = function() {
         //fix column indexes
         for (var i = 0; i < $scope.columns.length; i++) {
-            if ($scope.columns[i].visible !== false) {
-                $scope.columns[i].index = i;
-            }
+            $scope.columns[i].index = i;
         }
     };
     self.fixGroupIndexes = function() {
@@ -3014,9 +3013,7 @@ ngGridDirectives.directive('ngGrid', ['$compile', '$filter', '$templateCache', '
                                 $scope.columns = [];
                                 grid.config.columnDefs = a;
                                 grid.buildColumns();
-                                grid.configureColumnWidths();
                                 grid.eventProvider.assignEvents();
-                                domUtilityService.RebuildGrid($scope, grid);
                             }, true);
                         }
                         else {

diff --git a/build/ng-grid.js b/build/ng-grid.js
@@ -2,7 +2,7 @@
 * ng-grid JavaScript Library
 * Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md 
 * License: MIT (http://www.opensource.org/licenses/mit-license.php)
-* Compiled At: 06/26/2013 19:28
+* Compiled At: 06/27/2013 04:08
 ***********************************************/
 (function(window, $) {
 'use strict';
@@ -318,7 +318,7 @@ angular.module('ngGrid.services').factory('$domUtilityService',['$utilityService
     domUtilityService.setColLeft.immediate = 1;
     domUtilityService.RebuildGrid = function($scope, grid){
         domUtilityService.UpdateGridLayout($scope, grid);
-        if (grid.config.maintainColumnRatios) {
+        if (grid.config.maintainColumnRatios == null || grid.config.maintainColumnRatios) {
             grid.configureColumnWidths();
         }
         $scope.adjustScrollLeft(grid.$viewport.scrollLeft());
@@ -1039,8 +1039,8 @@ var ngEventProvider = function (grid, $scope, domUtilityService, $timeout) {
             $scope.columns.splice(self.colToMove.col.index, 1);
             $scope.columns.splice(headerScope.col.index, 0, self.colToMove.col);
             grid.fixColumnIndexes();
-            domUtilityService.BuildStyles($scope, grid, true);
             self.colToMove = undefined;
+            domUtilityService.digest($scope);
         }
     };
 
@@ -1384,13 +1384,14 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
             percentArray = [],
             asteriskNum = 0,
             totalWidth = 0;
-
-        totalWidth += self.config.showSelectionCheckbox ? 25 : 0;
         var indexMap = {};
         angular.forEach($scope.columns, function(ngCol, i) {
             if (!$utils.isNullOrUndefined(ngCol.originalIndex)) {
                 var origIndex = ngCol.originalIndex;
                 if (self.config.showSelectionCheckbox) {
+                    if(i === 0 && ngCol.visible){
+                        totalWidth += 25;
+                    }
                     origIndex--;
                 }
                 indexMap[origIndex] = i;
@@ -1509,7 +1510,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
               $scope.$emit('ngGridEventGroups', a);
             }, true);
             $scope.$watch('columns', function (a) {
-                domUtilityService.BuildStyles($scope, self, true);
+                domUtilityService.RebuildGrid($scope, self);
                 $scope.$emit('ngGridEventColumns', a);
             }, true);
             $scope.$watch(function() {
@@ -1645,9 +1646,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
     };
     self.fixColumnIndexes = function() {
         for (var i = 0; i < $scope.columns.length; i++) {
-            if ($scope.columns[i].visible !== false) {
-                $scope.columns[i].index = i;
-            }
+            $scope.columns[i].index = i;
         }
     };
     self.fixGroupIndexes = function() {
@@ -2687,9 +2686,7 @@ ngGridDirectives.directive('ngGrid', ['$compile', '$filter', '$templateCache', '
                                 $scope.columns = [];
                                 grid.config.columnDefs = a;
                                 grid.buildColumns();
-                                grid.configureColumnWidths();
                                 grid.eventProvider.assignEvents();
-                                domUtilityService.RebuildGrid($scope, grid);
                             }, true);
                         }
                         else {

diff --git a/build/ng-grid.min.js b/build/ng-grid.min.js
diff --git a/ng-grid-2.0.7.debug.js b/ng-grid-2.0.7.debug.js
@@ -2,7 +2,7 @@
 * ng-grid JavaScript Library
 * Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md 
 * License: MIT (http://www.opensource.org/licenses/mit-license.php)
-* Compiled At: 06/26/2013 19:28
+* Compiled At: 06/27/2013 04:08
 ***********************************************/
 (function(window, $) {
 'use strict';
@@ -339,7 +339,7 @@ angular.module('ngGrid.services').factory('$domUtilityService',['$utilityService
     domUtilityService.setColLeft.immediate = 1;
     domUtilityService.RebuildGrid = function($scope, grid){
         domUtilityService.UpdateGridLayout($scope, grid);
-        if (grid.config.maintainColumnRatios) {
+        if (grid.config.maintainColumnRatios == null || grid.config.maintainColumnRatios) {
             grid.configureColumnWidths();
         }
         $scope.adjustScrollLeft(grid.$viewport.scrollLeft());
@@ -1121,10 +1121,9 @@ var ngEventProvider = function (grid, $scope, domUtilityService, $timeout) {
             $scope.columns.splice(self.colToMove.col.index, 1);
             $scope.columns.splice(headerScope.col.index, 0, self.colToMove.col);
             grid.fixColumnIndexes();
-            // Finally, rebuild the CSS styles.
-            domUtilityService.BuildStyles($scope, grid, true);
             // clear out the colToMove object
             self.colToMove = undefined;
+            domUtilityService.digest($scope);
         }
     };
 
@@ -1607,8 +1606,6 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
             asteriskNum = 0,
             totalWidth = 0;
 
-        totalWidth += self.config.showSelectionCheckbox ? 25 : 0;
-
         // When rearranging columns, their index in $scope.columns will no longer match the original column order from columnDefs causing
         // their width config to be out of sync. We can use "originalIndex" on the ngColumns to get hold of the correct setup from columnDefs, but to
         // avoid O(n) lookups in $scope.columns per column we setup a map.
@@ -1619,6 +1616,10 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
             if (!$utils.isNullOrUndefined(ngCol.originalIndex)) {
                 var origIndex = ngCol.originalIndex;
                 if (self.config.showSelectionCheckbox) {
+                    //if visible, takes up 25 pixels
+                    if(i === 0 && ngCol.visible){
+                        totalWidth += 25;
+                    }
                     // The originalIndex will be offset 1 when including the selection column
                     origIndex--;
                 }
@@ -1765,7 +1766,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
               $scope.$emit('ngGridEventGroups', a);
             }, true);
             $scope.$watch('columns', function (a) {
-                domUtilityService.BuildStyles($scope, self, true);
+                domUtilityService.RebuildGrid($scope, self);
                 $scope.$emit('ngGridEventColumns', a);
             }, true);
             $scope.$watch(function() {
@@ -1908,9 +1909,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
     self.fixColumnIndexes = function() {
         //fix column indexes
         for (var i = 0; i < $scope.columns.length; i++) {
-            if ($scope.columns[i].visible !== false) {
-                $scope.columns[i].index = i;
-            }
+            $scope.columns[i].index = i;
         }
     };
     self.fixGroupIndexes = function() {
@@ -3014,9 +3013,7 @@ ngGridDirectives.directive('ngGrid', ['$compile', '$filter', '$templateCache', '
                                 $scope.columns = [];
                                 grid.config.columnDefs = a;
                                 grid.buildColumns();
-                                grid.configureColumnWidths();
                                 grid.eventProvider.assignEvents();
-                                domUtilityService.RebuildGrid($scope, grid);
                             }, true);
                         }
                         else {

diff --git a/ng-grid-2.0.7.min.js b/ng-grid-2.0.7.min.js
diff --git a/plugins/ng-grid-layout.js b/plugins/ng-grid-layout.js
@@ -6,9 +6,6 @@ function ngGridLayoutPlugin () {
         self.domUtilityService = services.DomUtilityService;
         self.grid = grid;
         self.scope = scope;
-
-        // Register for column rearranging events
-        scope.$parent.$on('ngGridEventColumns', self.updateGridLayout);
     };
 
     this.updateGridLayout = function () {

diff --git a/src/classes/eventProvider.js b/src/classes/eventProvider.js
@@ -166,10 +166,9 @@
             $scope.columns.splice(self.colToMove.col.index, 1);
             $scope.columns.splice(headerScope.col.index, 0, self.colToMove.col);
             grid.fixColumnIndexes();
-            // Finally, rebuild the CSS styles.
-            domUtilityService.BuildStyles($scope, grid, true);
             // clear out the colToMove object
             self.colToMove = undefined;
+            domUtilityService.digest($scope);
         }
     };
 

diff --git a/src/classes/grid.js b/src/classes/grid.js
@@ -383,8 +383,6 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
             asteriskNum = 0,
             totalWidth = 0;
 
-        totalWidth += self.config.showSelectionCheckbox ? 25 : 0;
-
         // When rearranging columns, their index in $scope.columns will no longer match the original column order from columnDefs causing
         // their width config to be out of sync. We can use "originalIndex" on the ngColumns to get hold of the correct setup from columnDefs, but to
         // avoid O(n) lookups in $scope.columns per column we setup a map.
@@ -395,6 +393,10 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
             if (!$utils.isNullOrUndefined(ngCol.originalIndex)) {
                 var origIndex = ngCol.originalIndex;
                 if (self.config.showSelectionCheckbox) {
+                    //if visible, takes up 25 pixels
+                    if(i === 0 && ngCol.visible){
+                        totalWidth += 25;
+                    }
                     // The originalIndex will be offset 1 when including the selection column
                     origIndex--;
                 }
@@ -541,7 +543,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
               $scope.$emit('ngGridEventGroups', a);
             }, true);
             $scope.$watch('columns', function (a) {
-                domUtilityService.BuildStyles($scope, self, true);
+                domUtilityService.RebuildGrid($scope, self);
                 $scope.$emit('ngGridEventColumns', a);
             }, true);
             $scope.$watch(function() {
@@ -684,9 +686,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
     self.fixColumnIndexes = function() {
         //fix column indexes
         for (var i = 0; i < $scope.columns.length; i++) {
-            if ($scope.columns[i].visible !== false) {
-                $scope.columns[i].index = i;
-            }
+            $scope.columns[i].index = i;
         }
     };
     self.fixGroupIndexes = function() {

diff --git a/src/directives/ng-grid.js b/src/directives/ng-grid.js
@@ -23,9 +23,7 @@
                                 $scope.columns = [];
                                 grid.config.columnDefs = a;
                                 grid.buildColumns();
-                                grid.configureColumnWidths();
                                 grid.eventProvider.assignEvents();
-                                domUtilityService.RebuildGrid($scope, grid);
                             }, true);
                         }
                         else {

diff --git a/src/services/DomUtilityService.js b/src/services/DomUtilityService.js
@@ -132,7 +132,7 @@
     domUtilityService.setColLeft.immediate = 1;
     domUtilityService.RebuildGrid = function($scope, grid){
         domUtilityService.UpdateGridLayout($scope, grid);
-        if (grid.config.maintainColumnRatios) {
+        if (grid.config.maintainColumnRatios == null || grid.config.maintainColumnRatios) {
             grid.configureColumnWidths();
         }
         $scope.adjustScrollLeft(grid.$viewport.scrollLeft());

diff --git a/workbench/main4.js b/workbench/main4.js
@@ -18,7 +18,9 @@ function userController($scope) {
 		multiSelect: false,
         enableRowReordering: false,
         showGroupPanel: true,
-        columnDefs: 'myDefs'
+        columnDefs: 'myDefs',
+        showColumnMenu: true,
+        enableColumnReordering: true
     };
 
 		$scope.myData = [{ 'Sku': 'C-2820164', 'Vendor': 'NEWB', 'SeasonCode': 0, 'Mfg_Id': '573-9880954', 'UPC': '822860449228' },