Adding enableCellEditOnFocus for #521

angular-ui · Jul 1, 2013 · 5863c9d · 5863c9d · thynctank · Oct 22, 2015
1 parent e2e2f23
commit 5863c9d
Show file tree

Hide file tree

Showing 11 changed files with 474 additions and 629 deletions.
diff --git a/build/ng-grid.debug.js b/build/ng-grid.debug.js
diff --git a/build/ng-grid.js b/build/ng-grid.js
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
diff --git a/ng-grid-2.0.7.min.js b/ng-grid-2.0.7.min.js
diff --git a/src/classes/column.js b/src/classes/column.js
@@ -13,7 +13,7 @@
 
     // TODO: Use the column's definition for enabling cell editing
     // self.enableCellEdit = config.enableCellEdit || colDef.enableCellEdit;
-    self.enableCellEdit = colDef.enableCellEdit !== undefined ? colDef.enableCellEdit : config.enableCellEdit;
+    self.enableCellEdit = colDef.enableCellEdit !== undefined ? colDef.enableCellEdit : (config.enableCellEdit || config.enableCellEditOnFocus);
 
     self.headerRowHeight = config.headerRowHeight;
 

diff --git a/src/classes/grid.js b/src/classes/grid.js
@@ -36,6 +36,9 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
 
         //Enables cell editing.
         enableCellEdit: false,
+
+        //Enables cell editing on focus
+        enableCellEditOnFocus: false,
 
         //Enables cell selection.
         enableCellSelection: false,
@@ -366,7 +369,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
                     enableResize: self.config.enableColumnResize,
                     enableSort: self.config.enableSorting,
                     enablePinning: self.config.enablePinning,
-                    enableCellEdit: self.config.enableCellEdit 
+                    enableCellEdit: self.config.enableCellEdit || self.config.enableCellEditOnFocus
                 }, $scope, self, domUtilityService, $templateCache, $utils);
                 var indx = self.config.groups.indexOf(colDef.field);
                 if (indx !== -1) {
@@ -711,6 +714,7 @@ var ngGrid = function ($scope, options, sortService, domUtilityService, $filter,
     $scope.jqueryUITheme = self.config.jqueryUITheme;
     $scope.showSelectionCheckbox = self.config.showSelectionCheckbox;
     $scope.enableCellSelection = self.config.enableCellSelection;
+    $scope.enableCellEditOnFocus = self.config.enableCellEditOnFocus;
     $scope.footer = null;
     $scope.selectedItems = self.config.selectedItems;
     $scope.multiSelect = self.config.multiSelect;

diff --git a/src/directives/ng-cell-has-focus.js b/src/directives/ng-cell-has-focus.js
@@ -1,8 +1,8 @@
 ngGridDirectives.directive('ngCellHasFocus', ['$domUtilityService',
     function (domUtilityService) {
-        var focusOnInputElement = function($scope, elm){
+        var focusOnInputElement = function($scope, elm) {
             $scope.isFocused = true;
-            domUtilityService.digest($scope);   
+            domUtilityService.digest($scope);
 
             $scope.$broadcast('ngGridEventStartCellEdit');
 
@@ -14,32 +14,52 @@ ngGridDirectives.directive('ngCellHasFocus', ['$domUtilityService',
 
         return function($scope, elm) {
             var isFocused = false;
+            var isCellEditableOnMouseDown = false;
+
             $scope.editCell = function() {
-                setTimeout(function() {
-                    focusOnInputElement($scope,elm);
-                }, 0);
+                if(!$scope.enableCellEditOnFocus) {
+                    setTimeout(function() {
+                        focusOnInputElement($scope,elm);
+                    }, 0);
+                }
             };
-            elm.bind('mousedown', function() {
-                elm.focus();
+            elm.bind('mousedown', function(evt) {
+                if($scope.enableCellEditOnFocus) {
+                    isCellEditableOnMouseDown = true;
+                } else {
+                    elm.focus();
+                }
                 return true;
-            });         
-            elm.bind('focus', function() {
+            });
+            elm.bind('click', function(evt) {
+                if($scope.enableCellEditOnFocus) {
+                    evt.preventDefault();
+                    isCellEditableOnMouseDown = false;
+                    focusOnInputElement($scope,elm);
+                }
+            }); 
+            elm.bind('focus', function(evt) {
                 isFocused = true;
+                if($scope.enableCellEditOnFocus && !isCellEditableOnMouseDown) {
+                    focusOnInputElement($scope,elm);
+                }
                 return true;
-            });     
+            });
             elm.bind('blur', function() {
                 isFocused = false;
                 return true;
             });
             elm.bind('keydown', function(evt) {
-                if (isFocused && evt.keyCode !== 37 && evt.keyCode !== 38 && evt.keyCode !== 39 && evt.keyCode !== 40 && evt.keyCode !== 9 && !evt.shiftKey && evt.keyCode !== 13) {
-                    focusOnInputElement($scope,elm);
-                }
-                if (evt.shiftKey && (evt.keyCode >= 65 && evt.keyCode <= 90)) {
-                    focusOnInputElement($scope, elm);
-                }
-                if (evt.keyCode === 27) {
-                    elm.focus();
+                if(!$scope.enableCellEditOnFocus) {
+                    if (isFocused && evt.keyCode !== 37 && evt.keyCode !== 38 && evt.keyCode !== 39 && evt.keyCode !== 40 && evt.keyCode !== 9 && !evt.shiftKey && evt.keyCode !== 13) {
+                        focusOnInputElement($scope,elm);
+                    }
+                    if (evt.shiftKey && (evt.keyCode >= 65 && evt.keyCode <= 90)) {
+                        focusOnInputElement($scope, elm);
+                    }
+                    if (evt.keyCode === 27) {
+                        elm.focus();
+                    }
                 }
                 return true;
             });

diff --git a/src/directives/ng-input.js b/src/directives/ng-input.js
@@ -26,7 +26,9 @@ ngGridDirectives.directive('ngInput', [function() {
                         }
                         break;
                     case 13: // Enter (Leave Field)
-                        elm.blur();
+                        if(scope.totalFilteredItemsLength() - 1 > scope.row.rowIndex && scope.row.rowIndex > 0  && scope.enableCellEditOnFocus || scope.enableCellEdit) {
+                            elm.blur();
+                        }
                         break;
                 }
 
@@ -42,6 +44,7 @@ ngGridDirectives.directive('ngInput', [function() {
             }); 
 
             scope.$on('ngGridEventStartCellEdit', function () {
+                elm.focus();
                 elm.select();
             });
 

diff --git a/workbench/layoutMain.js b/workbench/layoutMain.js
@@ -59,6 +59,8 @@ function userController($scope) {
         multiSelect: true,
         showGroupPanel: false,
         showColumnMenu: true,
+        enableCellSelection: true,
+        enableCellEditOnFocus: true,
 		plugins: [plugins.ngGridLayoutPlugin],
         enablePaging: true,
         showFooter: true,

diff --git a/workbench/main.js b/workbench/main.js
@@ -114,7 +114,7 @@ function userController($scope) {
 		showGroupPanel: true,
 		showFooter: false,
 		showFilter: true,
-		enableCellEdit: true,
+        enableCellEdit: true,
         enableCellSelection: true,
 		showSelectionCheckbox: true,
         selectWithCheckboxOnly: true,