Fixed cell navigation

Cell navigation broke due to there being an extra element in the cell. Also changed the color of the focused cell to be different than selected rows to be easier to identify. Fixed issue #510. Now when mouse clicking within cell, rows won't keep being selected and deselected.
angular-ui · Jun 26, 2013 · cdf91b1 · cdf91b1 · swalters · Jun 27, 2013
1 parent ccbdbfb
commit cdf91b1
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 16 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/25/2013 22:47
+* Compiled At: 06/26/2013 08:00
 ***********************************************/
 (function(window, $) {
 'use strict';
@@ -919,7 +919,7 @@ ngDomAccessProvider.prototype.focusCellElement = function ($scope, index) {
                 i = 1; //don't want to focus on checkbox
             }
             if (columns[i]) {
-                columns[i].children[0].focus();
+                columns[i].children[1].children[0].focus();
             }
             this.previousColumn = columnIndex;
         }
@@ -3215,6 +3215,14 @@ ngGridDirectives.directive('ngInput', [function() {
 
                 return true;
             });
+
+            elm.bind('click', function(evt) {
+                evt.stopPropagation();
+            }); 
+
+            elm.bind('mousedown', function(evt) {
+                evt.stopPropagation();
+            }); 
         }
     };
 }]);

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/25/2013 22:47
+* Compiled At: 06/26/2013 08:00
 ***********************************************/
 (function(window, $) {
 'use strict';
@@ -862,7 +862,7 @@ ngDomAccessProvider.prototype.focusCellElement = function ($scope, index) {
                 i = 1; 
             }
             if (columns[i]) {
-                columns[i].children[0].focus();
+                columns[i].children[1].children[0].focus();
             }
             this.previousColumn = columnIndex;
         }
@@ -2860,6 +2860,13 @@ ngGridDirectives.directive('ngInput', [function() {
 
                 return true;
             });
+
+            elm.bind('click', function(evt) {
+                evt.stopPropagation();
+            });
+            elm.bind('mousedown', function(evt) {
+                evt.stopPropagation();
+            }); 
         }
     };
 }]);

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/25/2013 22:47
+* Compiled At: 06/26/2013 08:00
 ***********************************************/
 (function(window, $) {
 'use strict';
@@ -919,7 +919,7 @@ ngDomAccessProvider.prototype.focusCellElement = function ($scope, index) {
                 i = 1; //don't want to focus on checkbox
             }
             if (columns[i]) {
-                columns[i].children[0].focus();
+                columns[i].children[1].children[0].focus();
             }
             this.previousColumn = columnIndex;
         }
@@ -3215,6 +3215,14 @@ ngGridDirectives.directive('ngInput', [function() {
 
                 return true;
             });
+
+            elm.bind('click', function(evt) {
+                evt.stopPropagation();
+            }); 
+
+            elm.bind('mousedown', function(evt) {
+                evt.stopPropagation();
+            }); 
         }
     };
 }]);

diff --git a/ng-grid-2.0.7.min.js b/ng-grid-2.0.7.min.js
diff --git a/ng-grid.css b/ng-grid.css
@@ -340,7 +340,7 @@
 }
 .ngCellElement:focus {
   outline: 0;
-  background-color: #c9dde1;
+  background-color: #b3c4c7;
 }
 .ngRow.canSelect {
   cursor: pointer;

diff --git a/ng-grid.min.css b/ng-grid.min.css
diff --git a/src/classes/domAccessProvider.js b/src/classes/domAccessProvider.js
@@ -32,7 +32,7 @@ ngDomAccessProvider.prototype.focusCellElement = function ($scope, index) {
                 i = 1; //don't want to focus on checkbox
             }
             if (columns[i]) {
-                columns[i].children[0].focus();
+                columns[i].children[1].children[0].focus();
             }
             this.previousColumn = columnIndex;
         }

diff --git a/src/directives/ng-input.js b/src/directives/ng-input.js
@@ -32,6 +32,14 @@ ngGridDirectives.directive('ngInput', [function() {
 
                 return true;
             });
+
+            elm.bind('click', function(evt) {
+                evt.stopPropagation();
+            }); 
+
+            elm.bind('mousedown', function(evt) {
+                evt.stopPropagation();
+            }); 
         }
     };
 }]);
diff --git a/src/less/colors.less b/src/less/colors.less
@@ -20,8 +20,11 @@
 // Used for column menu background
 @darkGrayGreen: darken(@grayGreen, 10%);
 
-// Used for selections
+// Used for row selections
 @grayBlue: #C9DDE1; // #b3c4c7;
 
+// Used for cell selections
+@darkGrayBlue: #b3c4c7;
+
 // Color for buttons
 @buttonColor: lighten(#333, 10%);
diff --git a/src/less/selection.less b/src/less/selection.less
@@ -11,7 +11,7 @@
 
 .ngCellElement:focus {
   outline: 0;
-  background-color: @grayBlue;
+  background-color: @darkGrayBlue;
 }
 
 .ngRow.canSelect {

diff --git a/workbench/main2.js b/workbench/main2.js
@@ -20,6 +20,7 @@ function userController($scope, $timeout) {
 		multiSelect: true,
         enableRowReordering: false,
 		enableCellSelection: true,
+		enableCellEdit: true,
         showGroupPanel: true,
         columnDefs: 'myDefs'
     };
@@ -36,7 +37,7 @@ function userController($scope, $timeout) {
 
 	$scope.changeDefs = function(){
 		$scope.myDefs = [{ field: 'Sku', displayName: 'My Sku' },
-			{ field: 'Vendor', displayName: 'Supplier' },
+			{ field: 'Vendor', displayName: 'Supplier', editableCellTemplate: '<input type="number" style="width:100px; height:30px;" ng-model="COL_FIELD" ng-input="COL_FIELD" />' },
 			{ field: 'SeasonCode.test', displayName: 'My SeasonCode', cellTemplate: '<input style="width:100%;height:100%;" class="ui-widget input" type="text" ng-readonly="!row.selected" ng-model="COL_FIELD"/>' },
 			{ field: 'Mfg_Id', displayName: 'Manufacturer ID' },
 			{ field: 'UPC', displayName: 'Bar Code' }];