From 4f896caf93ad35b20e29727e04dcb4f091228850 Mon Sep 17 00:00:00 2001 From: jpuri Date: Fri, 8 Aug 2014 23:54:55 +0530 Subject: [PATCH 1/9] boolean editor added --- src/features/edit/js/gridEdit.js | 2 ++ src/features/edit/templates/cellTextEditor.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js index 1d1c061b1b..34c7abd5a7 100644 --- a/src/features/edit/js/gridEdit.js +++ b/src/features/edit/js/gridEdit.js @@ -168,6 +168,8 @@ */ colDef.enableCellEdit = colDef.enableCellEdit === undefined ? gridOptions.enableCellEdit : colDef.enableCellEdit; + col.inputType = colDef.type === 'boolean'?'checkbox':'text'; + /** * @ngdoc object * @name cellEditableCondition diff --git a/src/features/edit/templates/cellTextEditor.html b/src/features/edit/templates/cellTextEditor.html index 023a832b5e..b23e0a6fc8 100644 --- a/src/features/edit/templates/cellTextEditor.html +++ b/src/features/edit/templates/cellTextEditor.html @@ -1,3 +1,3 @@
- +
\ No newline at end of file From 3c7055d08ef07fb2b217882e175a96c40b98a8d3 Mon Sep 17 00:00:00 2001 From: jpuri Date: Sat, 9 Aug 2014 11:40:07 +0530 Subject: [PATCH 2/9] Boolean editor, separate template added for checkbox --- src/features/edit/js/gridEdit.js | 380 +++++++++--------- .../edit/templates/cellBooleanEditor.html | 3 + .../edit/templates/cellTextEditor.html | 2 +- .../edit/test/uiGridEditDirective.spec.js | 9 +- 4 files changed, 206 insertions(+), 188 deletions(-) create mode 100644 src/features/edit/templates/cellBooleanEditor.html diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js index 34c7abd5a7..cc8181a6da 100644 --- a/src/features/edit/js/gridEdit.js +++ b/src/features/edit/js/gridEdit.js @@ -121,15 +121,6 @@ */ gridOptions.cellEditableCondition = gridOptions.cellEditableCondition === undefined ? true : gridOptions.cellEditableCondition; - /** - * @ngdoc object - * @name editableCellTemplate - * @propertyOf ui.grid.edit.api:GridOptions - * @description If specified, cellTemplate to use as the editor for all columns. - *
default to 'ui-grid/cellTextEditor' - */ - gridOptions.editableCellTemplate = gridOptions.editableCellTemplate || 'ui-grid/cellTextEditor'; - /** * @ngdoc object * @name enableCellEditOnFocus @@ -139,7 +130,7 @@ */ //enableCellEditOnFocus can only be used if cellnav module is used gridOptions.enableCellEditOnFocus = gridOptions.enableCellEditOnFocus === undefined ? - false: gridOptions.enableCellEditOnFocus; + false: gridOptions.enableCellEditOnFocus; }, /** @@ -168,8 +159,6 @@ */ colDef.enableCellEdit = colDef.enableCellEdit === undefined ? gridOptions.enableCellEdit : colDef.enableCellEdit; - col.inputType = colDef.type === 'boolean'?'checkbox':'text'; - /** * @ngdoc object * @name cellEditableCondition @@ -184,6 +173,15 @@ */ colDef.cellEditableCondition = colDef.cellEditableCondition === undefined ? gridOptions.cellEditableCondition : colDef.cellEditableCondition; + colDef.type = colDef.type || 'text'; + + /** + * @ngdoc object + * @name editableCellTemplate + * @propertyOf ui.grid.edit.api:GridOptions + * @description If specified, cellTemplate to use as the editor for all columns. + *
default to 'ui-grid/cellTextEditor' + */ /** * @ngdoc object * @name editableCellTemplate @@ -194,15 +192,25 @@ if (colDef.enableCellEdit) { colDef.editableCellTemplate = colDef.editableCellTemplate || gridOptions.editableCellTemplate; + if (!colDef.editableCellTemplate) { + switch (colDef.type) { + case 'text': + colDef.editableCellTemplate = 'ui-grid/cellTextEditor'; + break; + case 'boolean': + colDef.editableCellTemplate = 'ui-grid/cellBooleanEditor'; + } + } + promises.push(gridUtil.getTemplate(colDef.editableCellTemplate) - .then( - function (template) { - col.editableCellTemplate = template; - }, - function (res) { - // Todo handle response error here? - throw new Error("Couldn't fetch/use colDef.editableCellTemplate '" + colDef.editableCellTemplate + "'"); - })); + .then( + function (template) { + col.editableCellTemplate = template; + }, + function (res) { + // Todo handle response error here? + throw new Error("Couldn't fetch/use colDef.editableCellTemplate '" + colDef.editableCellTemplate + "'"); + })); } /** @@ -230,16 +238,16 @@ */ isStartEditKey: function (evt) { if (evt.keyCode === uiGridConstants.keymap.LEFT || - (evt.keyCode === uiGridConstants.keymap.TAB && evt.shiftKey) || + (evt.keyCode === uiGridConstants.keymap.TAB && evt.shiftKey) || - evt.keyCode === uiGridConstants.keymap.RIGHT || - evt.keyCode === uiGridConstants.keymap.TAB || + evt.keyCode === uiGridConstants.keymap.RIGHT || + evt.keyCode === uiGridConstants.keymap.TAB || - evt.keyCode === uiGridConstants.keymap.UP || - (evt.keyCode === uiGridConstants.keymap.ENTER && evt.shiftKey) || + evt.keyCode === uiGridConstants.keymap.UP || + (evt.keyCode === uiGridConstants.keymap.ENTER && evt.shiftKey) || - evt.keyCode === uiGridConstants.keymap.DOWN || - evt.keyCode === uiGridConstants.keymap.ENTER) { + evt.keyCode === uiGridConstants.keymap.DOWN || + evt.keyCode === uiGridConstants.keymap.ENTER) { return false; } @@ -342,134 +350,134 @@ * */ module.directive('uiGridCell', - ['$compile', 'uiGridConstants', 'uiGridEditConstants', '$log', '$parse', 'uiGridEditService', - function ($compile, uiGridConstants, uiGridEditConstants, $log, $parse, uiGridEditService) { - return { - priority: -100, // run after default uiGridCell directive - restrict: 'A', - scope: false, - link: function ($scope, $elm, $attrs) { - if (!$scope.col.colDef.enableCellEdit) { - return; - } - - var html; - var origCellValue; - var inEdit = false; - var isFocusedBeforeEdit = false; - var cellModel; + ['$compile', 'uiGridConstants', 'uiGridEditConstants', '$log', '$parse', 'uiGridEditService', + function ($compile, uiGridConstants, uiGridEditConstants, $log, $parse, uiGridEditService) { + return { + priority: -100, // run after default uiGridCell directive + restrict: 'A', + scope: false, + link: function ($scope, $elm, $attrs) { + if (!$scope.col.colDef.enableCellEdit) { + return; + } - registerBeginEditEvents(); + var html; + var origCellValue; + var inEdit = false; + var isFocusedBeforeEdit = false; + var cellModel; - function registerBeginEditEvents() { - $elm.on('dblclick', beginEdit); - $elm.on('keydown', beginEditKeyDown); - if ($scope.col.colDef.enableCellEditOnFocus) { - $elm.find('div').on('focus', beginEditFocus); - } - } + registerBeginEditEvents(); - function cancelBeginEditEvents() { - $elm.off('dblclick', beginEdit); - $elm.off('keydown', beginEditKeyDown); - if ($scope.col.colDef.enableCellEditOnFocus) { - $elm.find('div').off('focus', beginEditFocus); - } - } + function registerBeginEditEvents() { + $elm.on('dblclick', beginEdit); + $elm.on('keydown', beginEditKeyDown); + if ($scope.col.colDef.enableCellEditOnFocus) { + $elm.find('div').on('focus', beginEditFocus); + } + } - function beginEditFocus(evt) { - evt.stopPropagation(); - beginEdit(); - } + function cancelBeginEditEvents() { + $elm.off('dblclick', beginEdit); + $elm.off('keydown', beginEditKeyDown); + if ($scope.col.colDef.enableCellEditOnFocus) { + $elm.find('div').off('focus', beginEditFocus); + } + } - function beginEditKeyDown(evt) { - if (uiGridEditService.isStartEditKey(evt)) { - beginEdit(); - } - } + function beginEditFocus(evt) { + evt.stopPropagation(); + beginEdit(); + } - function shouldEdit(col) { - return angular.isFunction(col.colDef.cellEditableCondition) ? - col.colDef.cellEditableCondition($scope) : - col.colDef.cellEditableCondition; - } + function beginEditKeyDown(evt) { + if (uiGridEditService.isStartEditKey(evt)) { + beginEdit(); + } + } - function beginEdit() { - if (!shouldEdit($scope.col)) { - return; - } + function shouldEdit(col) { + return angular.isFunction(col.colDef.cellEditableCondition) ? + col.colDef.cellEditableCondition($scope) : + col.colDef.cellEditableCondition; + } - cellModel = $parse($scope.row.getQualifiedColField($scope.col)); - //get original value from the cell - origCellValue = cellModel($scope); - - html = $scope.col.editableCellTemplate; - html = html.replace(uiGridConstants.COL_FIELD, $scope.row.getQualifiedColField($scope.col)); - - var cellElement; - $scope.$apply(function () { - inEdit = true; - cancelBeginEditEvents(); - cellElement = $compile(html)($scope.$new()); - var gridCellContentsEl = angular.element($elm.children()[0]); - isFocusedBeforeEdit = gridCellContentsEl.hasClass(':focus'); - gridCellContentsEl.addClass('ui-grid-cell-contents-hidden'); - $elm.append(cellElement); - } - ); - - //stop editing when grid is scrolled - var deregOnGridScroll = $scope.$on(uiGridConstants.events.GRID_SCROLL, function () { - endEdit(true); - $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); - deregOnGridScroll(); - }); - - //end editing - var deregOnEndCellEdit = $scope.$on(uiGridEditConstants.events.END_CELL_EDIT, function (evt, retainFocus) { - endEdit(retainFocus); - $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); - deregOnEndCellEdit(); - }); - - //cancel editing - var deregOnCancelCellEdit = $scope.$on(uiGridEditConstants.events.CANCEL_CELL_EDIT, function () { - cancelEdit(); - deregOnCancelCellEdit(); - }); - - $scope.$broadcast(uiGridEditConstants.events.BEGIN_CELL_EDIT); - } + function beginEdit() { + if (!shouldEdit($scope.col)) { + return; + } + + cellModel = $parse($scope.row.getQualifiedColField($scope.col)); + //get original value from the cell + origCellValue = cellModel($scope); + + html = $scope.col.editableCellTemplate; + html = html.replace(uiGridConstants.COL_FIELD, $scope.row.getQualifiedColField($scope.col)); + + var cellElement; + $scope.$apply(function () { + inEdit = true; + cancelBeginEditEvents(); + cellElement = $compile(html)($scope.$new()); + var gridCellContentsEl = angular.element($elm.children()[0]); + isFocusedBeforeEdit = gridCellContentsEl.hasClass(':focus'); + gridCellContentsEl.addClass('ui-grid-cell-contents-hidden'); + $elm.append(cellElement); + } + ); + + //stop editing when grid is scrolled + var deregOnGridScroll = $scope.$on(uiGridConstants.events.GRID_SCROLL, function () { + endEdit(true); + $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); + deregOnGridScroll(); + }); + + //end editing + var deregOnEndCellEdit = $scope.$on(uiGridEditConstants.events.END_CELL_EDIT, function (evt, retainFocus) { + endEdit(retainFocus); + $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); + deregOnEndCellEdit(); + }); + + //cancel editing + var deregOnCancelCellEdit = $scope.$on(uiGridEditConstants.events.CANCEL_CELL_EDIT, function () { + cancelEdit(); + deregOnCancelCellEdit(); + }); + + $scope.$broadcast(uiGridEditConstants.events.BEGIN_CELL_EDIT); + } - function endEdit(retainFocus) { - if (!inEdit) { - return; - } - var gridCellContentsEl = angular.element($elm.children()[0]); - //remove edit element - angular.element($elm.children()[1]).remove(); - gridCellContentsEl.removeClass('ui-grid-cell-contents-hidden'); - if (retainFocus && isFocusedBeforeEdit) { - gridCellContentsEl.focus(); - } - isFocusedBeforeEdit = false; - inEdit = false; - registerBeginEditEvents(); - } + function endEdit(retainFocus) { + if (!inEdit) { + return; + } + var gridCellContentsEl = angular.element($elm.children()[0]); + //remove edit element + angular.element($elm.children()[1]).remove(); + gridCellContentsEl.removeClass('ui-grid-cell-contents-hidden'); + if (retainFocus && isFocusedBeforeEdit) { + gridCellContentsEl.focus(); + } + isFocusedBeforeEdit = false; + inEdit = false; + registerBeginEditEvents(); + } - function cancelEdit() { - if (!inEdit) { - return; - } - cellModel.assign($scope, origCellValue); - $scope.$apply(); + function cancelEdit() { + if (!inEdit) { + return; + } + cellModel.assign($scope, origCellValue); + $scope.$apply(); - endEdit(true); - } + endEdit(true); + } - } - }; - }]); + } + }; + }]); /** * @ngdoc directive @@ -489,47 +497,47 @@ * */ module.directive('uiGridTextEditor', - ['uiGridConstants', 'uiGridEditConstants', - function (uiGridConstants, uiGridEditConstants) { - return { - scope: true, - compile: function () { - return { - pre: function ($scope, $elm, $attrs) { - - }, - post: function ($scope, $elm, $attrs) { - - //set focus at start of edit - $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function () { - $elm[0].focus(); - $elm[0].select(); - $elm.on('blur', function (evt) { - $scope.stopEdit(); - }); - }); - - $scope.stopEdit = function () { - $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT); - }; - - $elm.on('keydown', function (evt) { - switch (evt.keyCode) { - case uiGridConstants.keymap.ESC: - evt.stopPropagation(); - $scope.$emit(uiGridEditConstants.events.CANCEL_CELL_EDIT); - break; - case uiGridConstants.keymap.ENTER: // Enter (Leave Field) - $scope.stopEdit(); - break; - } - - return true; - }); - } - }; - } - }; - }]); + ['uiGridConstants', 'uiGridEditConstants', + function (uiGridConstants, uiGridEditConstants) { + return { + scope: true, + compile: function () { + return { + pre: function ($scope, $elm, $attrs) { + + }, + post: function ($scope, $elm, $attrs) { + + //set focus at start of edit + $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function () { + $elm[0].focus(); + $elm[0].select(); + $elm.on('blur', function (evt) { + $scope.stopEdit(); + }); + }); + + $scope.stopEdit = function () { + $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT); + }; + + $elm.on('keydown', function (evt) { + switch (evt.keyCode) { + case uiGridConstants.keymap.ESC: + evt.stopPropagation(); + $scope.$emit(uiGridEditConstants.events.CANCEL_CELL_EDIT); + break; + case uiGridConstants.keymap.ENTER: // Enter (Leave Field) + $scope.stopEdit(); + break; + } + + return true; + }); + } + }; + } + }; + }]); -})(); +})(); \ No newline at end of file diff --git a/src/features/edit/templates/cellBooleanEditor.html b/src/features/edit/templates/cellBooleanEditor.html new file mode 100644 index 0000000000..af15145bb8 --- /dev/null +++ b/src/features/edit/templates/cellBooleanEditor.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/features/edit/templates/cellTextEditor.html b/src/features/edit/templates/cellTextEditor.html index b23e0a6fc8..8d0cf591e0 100644 --- a/src/features/edit/templates/cellTextEditor.html +++ b/src/features/edit/templates/cellTextEditor.html @@ -1,3 +1,3 @@
- +
\ No newline at end of file diff --git a/src/features/edit/test/uiGridEditDirective.spec.js b/src/features/edit/test/uiGridEditDirective.spec.js index 7e0865bc9b..9420b1099b 100644 --- a/src/features/edit/test/uiGridEditDirective.spec.js +++ b/src/features/edit/test/uiGridEditDirective.spec.js @@ -3,6 +3,7 @@ describe('uiGridEditDirective', function () { var scope; var element; var cellTextEditorHtml = '
'; + var cellBooleanEditorHtml = '
'; var recompile; beforeEach(module('ui.grid.edit')); @@ -14,6 +15,7 @@ describe('uiGridEditDirective', function () { $templateCache.put('ui-grid/uiGridCell', '
'); $templateCache.put('ui-grid/uiGridHeaderCell', '
'); $templateCache.put('ui-grid/cellTextEditor', cellTextEditorHtml); + $templateCache.put('ui-grid/cellBooleanEditor', cellBooleanEditorHtml); scope = $rootScope.$new(); scope.options = {}; @@ -24,7 +26,8 @@ describe('uiGridEditDirective', function () { scope.options.columnDefs = [ {field: 'col1', enableCellEdit: true}, - {field: 'col2', enableCellEdit: false} + {field: 'col2', enableCellEdit: false}, + {field: 'col3', enableCellEdit: true, type: 'boolean'} ]; recompile = function () { @@ -53,6 +56,10 @@ describe('uiGridEditDirective', function () { expect(col.colDef.enableCellEdit).toBe(false); expect(col.colDef.editableCellTemplate).not.toBeDefined(); + col = gridScope.grid.getColumn('col3'); + expect(col).not.toBeNull(); + expect(col.colDef.enableCellEdit).toBe(true); + expect(col.editableCellTemplate).toBe(cellBooleanEditorHtml); }); }); From 46b7a38bace8b5e6986a10ee151421bd15d8f8ee Mon Sep 17 00:00:00 2001 From: jpuri Date: Sat, 9 Aug 2014 11:41:01 +0530 Subject: [PATCH 3/9] input type removed for simple text editor --- src/features/edit/templates/cellTextEditor.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/edit/templates/cellTextEditor.html b/src/features/edit/templates/cellTextEditor.html index 8d0cf591e0..023a832b5e 100644 --- a/src/features/edit/templates/cellTextEditor.html +++ b/src/features/edit/templates/cellTextEditor.html @@ -1,3 +1,3 @@
- +
\ No newline at end of file From 4946b20b97d1c5ccf460f8a040e6e476ef1ad1bc Mon Sep 17 00:00:00 2001 From: jpuri Date: Sat, 9 Aug 2014 12:00:10 +0530 Subject: [PATCH 4/9] correcting ngDoc, removing white spaces --- src/features/edit/js/gridEdit.js | 354 ++++++++++++++++--------------- 1 file changed, 178 insertions(+), 176 deletions(-) diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js index cc8181a6da..b8d15e5b3b 100644 --- a/src/features/edit/js/gridEdit.js +++ b/src/features/edit/js/gridEdit.js @@ -130,7 +130,7 @@ */ //enableCellEditOnFocus can only be used if cellnav module is used gridOptions.enableCellEditOnFocus = gridOptions.enableCellEditOnFocus === undefined ? - false: gridOptions.enableCellEditOnFocus; + false: gridOptions.enableCellEditOnFocus; }, /** @@ -173,8 +173,6 @@ */ colDef.cellEditableCondition = colDef.cellEditableCondition === undefined ? gridOptions.cellEditableCondition : colDef.cellEditableCondition; - colDef.type = colDef.type || 'text'; - /** * @ngdoc object * @name editableCellTemplate @@ -182,6 +180,10 @@ * @description If specified, cellTemplate to use as the editor for all columns. *
default to 'ui-grid/cellTextEditor' */ + gridOptions.editableCellTemplate = gridOptions.editableCellTemplate || ''; + + colDef.type = colDef.type || 'text'; + /** * @ngdoc object * @name editableCellTemplate @@ -203,14 +205,14 @@ } promises.push(gridUtil.getTemplate(colDef.editableCellTemplate) - .then( - function (template) { - col.editableCellTemplate = template; - }, - function (res) { - // Todo handle response error here? - throw new Error("Couldn't fetch/use colDef.editableCellTemplate '" + colDef.editableCellTemplate + "'"); - })); + .then( + function (template) { + col.editableCellTemplate = template; + }, + function (res) { + // Todo handle response error here? + throw new Error("Couldn't fetch/use colDef.editableCellTemplate '" + colDef.editableCellTemplate + "'"); + })); } /** @@ -238,16 +240,16 @@ */ isStartEditKey: function (evt) { if (evt.keyCode === uiGridConstants.keymap.LEFT || - (evt.keyCode === uiGridConstants.keymap.TAB && evt.shiftKey) || + (evt.keyCode === uiGridConstants.keymap.TAB && evt.shiftKey) || - evt.keyCode === uiGridConstants.keymap.RIGHT || - evt.keyCode === uiGridConstants.keymap.TAB || + evt.keyCode === uiGridConstants.keymap.RIGHT || + evt.keyCode === uiGridConstants.keymap.TAB || - evt.keyCode === uiGridConstants.keymap.UP || - (evt.keyCode === uiGridConstants.keymap.ENTER && evt.shiftKey) || + evt.keyCode === uiGridConstants.keymap.UP || + (evt.keyCode === uiGridConstants.keymap.ENTER && evt.shiftKey) || - evt.keyCode === uiGridConstants.keymap.DOWN || - evt.keyCode === uiGridConstants.keymap.ENTER) { + evt.keyCode === uiGridConstants.keymap.DOWN || + evt.keyCode === uiGridConstants.keymap.ENTER) { return false; } @@ -350,134 +352,134 @@ * */ module.directive('uiGridCell', - ['$compile', 'uiGridConstants', 'uiGridEditConstants', '$log', '$parse', 'uiGridEditService', - function ($compile, uiGridConstants, uiGridEditConstants, $log, $parse, uiGridEditService) { - return { - priority: -100, // run after default uiGridCell directive - restrict: 'A', - scope: false, - link: function ($scope, $elm, $attrs) { - if (!$scope.col.colDef.enableCellEdit) { - return; - } + ['$compile', 'uiGridConstants', 'uiGridEditConstants', '$log', '$parse', 'uiGridEditService', + function ($compile, uiGridConstants, uiGridEditConstants, $log, $parse, uiGridEditService) { + return { + priority: -100, // run after default uiGridCell directive + restrict: 'A', + scope: false, + link: function ($scope, $elm, $attrs) { + if (!$scope.col.colDef.enableCellEdit) { + return; + } - var html; - var origCellValue; - var inEdit = false; - var isFocusedBeforeEdit = false; - var cellModel; + var html; + var origCellValue; + var inEdit = false; + var isFocusedBeforeEdit = false; + var cellModel; - registerBeginEditEvents(); + registerBeginEditEvents(); - function registerBeginEditEvents() { - $elm.on('dblclick', beginEdit); - $elm.on('keydown', beginEditKeyDown); - if ($scope.col.colDef.enableCellEditOnFocus) { - $elm.find('div').on('focus', beginEditFocus); - } - } + function registerBeginEditEvents() { + $elm.on('dblclick', beginEdit); + $elm.on('keydown', beginEditKeyDown); + if ($scope.col.colDef.enableCellEditOnFocus) { + $elm.find('div').on('focus', beginEditFocus); + } + } - function cancelBeginEditEvents() { - $elm.off('dblclick', beginEdit); - $elm.off('keydown', beginEditKeyDown); - if ($scope.col.colDef.enableCellEditOnFocus) { - $elm.find('div').off('focus', beginEditFocus); - } - } + function cancelBeginEditEvents() { + $elm.off('dblclick', beginEdit); + $elm.off('keydown', beginEditKeyDown); + if ($scope.col.colDef.enableCellEditOnFocus) { + $elm.find('div').off('focus', beginEditFocus); + } + } - function beginEditFocus(evt) { - evt.stopPropagation(); - beginEdit(); - } + function beginEditFocus(evt) { + evt.stopPropagation(); + beginEdit(); + } - function beginEditKeyDown(evt) { - if (uiGridEditService.isStartEditKey(evt)) { - beginEdit(); - } - } + function beginEditKeyDown(evt) { + if (uiGridEditService.isStartEditKey(evt)) { + beginEdit(); + } + } - function shouldEdit(col) { - return angular.isFunction(col.colDef.cellEditableCondition) ? - col.colDef.cellEditableCondition($scope) : - col.colDef.cellEditableCondition; - } + function shouldEdit(col) { + return angular.isFunction(col.colDef.cellEditableCondition) ? + col.colDef.cellEditableCondition($scope) : + col.colDef.cellEditableCondition; + } - function beginEdit() { - if (!shouldEdit($scope.col)) { - return; - } - - cellModel = $parse($scope.row.getQualifiedColField($scope.col)); - //get original value from the cell - origCellValue = cellModel($scope); - - html = $scope.col.editableCellTemplate; - html = html.replace(uiGridConstants.COL_FIELD, $scope.row.getQualifiedColField($scope.col)); - - var cellElement; - $scope.$apply(function () { - inEdit = true; - cancelBeginEditEvents(); - cellElement = $compile(html)($scope.$new()); - var gridCellContentsEl = angular.element($elm.children()[0]); - isFocusedBeforeEdit = gridCellContentsEl.hasClass(':focus'); - gridCellContentsEl.addClass('ui-grid-cell-contents-hidden'); - $elm.append(cellElement); - } - ); - - //stop editing when grid is scrolled - var deregOnGridScroll = $scope.$on(uiGridConstants.events.GRID_SCROLL, function () { - endEdit(true); - $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); - deregOnGridScroll(); - }); - - //end editing - var deregOnEndCellEdit = $scope.$on(uiGridEditConstants.events.END_CELL_EDIT, function (evt, retainFocus) { - endEdit(retainFocus); - $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); - deregOnEndCellEdit(); - }); - - //cancel editing - var deregOnCancelCellEdit = $scope.$on(uiGridEditConstants.events.CANCEL_CELL_EDIT, function () { - cancelEdit(); - deregOnCancelCellEdit(); - }); - - $scope.$broadcast(uiGridEditConstants.events.BEGIN_CELL_EDIT); - } + function beginEdit() { + if (!shouldEdit($scope.col)) { + return; + } - function endEdit(retainFocus) { - if (!inEdit) { - return; - } - var gridCellContentsEl = angular.element($elm.children()[0]); - //remove edit element - angular.element($elm.children()[1]).remove(); - gridCellContentsEl.removeClass('ui-grid-cell-contents-hidden'); - if (retainFocus && isFocusedBeforeEdit) { - gridCellContentsEl.focus(); - } - isFocusedBeforeEdit = false; - inEdit = false; - registerBeginEditEvents(); - } + cellModel = $parse($scope.row.getQualifiedColField($scope.col)); + //get original value from the cell + origCellValue = cellModel($scope); + + html = $scope.col.editableCellTemplate; + html = html.replace(uiGridConstants.COL_FIELD, $scope.row.getQualifiedColField($scope.col)); + + var cellElement; + $scope.$apply(function () { + inEdit = true; + cancelBeginEditEvents(); + cellElement = $compile(html)($scope.$new()); + var gridCellContentsEl = angular.element($elm.children()[0]); + isFocusedBeforeEdit = gridCellContentsEl.hasClass(':focus'); + gridCellContentsEl.addClass('ui-grid-cell-contents-hidden'); + $elm.append(cellElement); + } + ); + + //stop editing when grid is scrolled + var deregOnGridScroll = $scope.$on(uiGridConstants.events.GRID_SCROLL, function () { + endEdit(true); + $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); + deregOnGridScroll(); + }); + + //end editing + var deregOnEndCellEdit = $scope.$on(uiGridEditConstants.events.END_CELL_EDIT, function (evt, retainFocus) { + endEdit(retainFocus); + $scope.grid.api.edit.raise.afterCellEdit($scope.row.entity, $scope.col.colDef, cellModel($scope), origCellValue); + deregOnEndCellEdit(); + }); + + //cancel editing + var deregOnCancelCellEdit = $scope.$on(uiGridEditConstants.events.CANCEL_CELL_EDIT, function () { + cancelEdit(); + deregOnCancelCellEdit(); + }); + + $scope.$broadcast(uiGridEditConstants.events.BEGIN_CELL_EDIT); + } - function cancelEdit() { - if (!inEdit) { - return; - } - cellModel.assign($scope, origCellValue); - $scope.$apply(); + function endEdit(retainFocus) { + if (!inEdit) { + return; + } + var gridCellContentsEl = angular.element($elm.children()[0]); + //remove edit element + angular.element($elm.children()[1]).remove(); + gridCellContentsEl.removeClass('ui-grid-cell-contents-hidden'); + if (retainFocus && isFocusedBeforeEdit) { + gridCellContentsEl.focus(); + } + isFocusedBeforeEdit = false; + inEdit = false; + registerBeginEditEvents(); + } - endEdit(true); - } + function cancelEdit() { + if (!inEdit) { + return; + } + cellModel.assign($scope, origCellValue); + $scope.$apply(); - } - }; - }]); + endEdit(true); + } + + } + }; + }]); /** * @ngdoc directive @@ -497,47 +499,47 @@ * */ module.directive('uiGridTextEditor', - ['uiGridConstants', 'uiGridEditConstants', - function (uiGridConstants, uiGridEditConstants) { - return { - scope: true, - compile: function () { - return { - pre: function ($scope, $elm, $attrs) { - - }, - post: function ($scope, $elm, $attrs) { - - //set focus at start of edit - $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function () { - $elm[0].focus(); - $elm[0].select(); - $elm.on('blur', function (evt) { - $scope.stopEdit(); - }); - }); - - $scope.stopEdit = function () { - $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT); - }; - - $elm.on('keydown', function (evt) { - switch (evt.keyCode) { - case uiGridConstants.keymap.ESC: - evt.stopPropagation(); - $scope.$emit(uiGridEditConstants.events.CANCEL_CELL_EDIT); - break; - case uiGridConstants.keymap.ENTER: // Enter (Leave Field) - $scope.stopEdit(); - break; - } - - return true; - }); - } - }; - } - }; - }]); + ['uiGridConstants', 'uiGridEditConstants', + function (uiGridConstants, uiGridEditConstants) { + return { + scope: true, + compile: function () { + return { + pre: function ($scope, $elm, $attrs) { + + }, + post: function ($scope, $elm, $attrs) { + + //set focus at start of edit + $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function () { + $elm[0].focus(); + $elm[0].select(); + $elm.on('blur', function (evt) { + $scope.stopEdit(); + }); + }); + + $scope.stopEdit = function () { + $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT); + }; + + $elm.on('keydown', function (evt) { + switch (evt.keyCode) { + case uiGridConstants.keymap.ESC: + evt.stopPropagation(); + $scope.$emit(uiGridEditConstants.events.CANCEL_CELL_EDIT); + break; + case uiGridConstants.keymap.ENTER: // Enter (Leave Field) + $scope.stopEdit(); + break; + } + + return true; + }); + } + }; + } + }; + }]); })(); \ No newline at end of file From 2d4c8fc9f5f948f566aaf039dd76adaa55acbd90 Mon Sep 17 00:00:00 2001 From: jpuri Date: Sat, 9 Aug 2014 12:07:37 +0530 Subject: [PATCH 5/9] removing spaces inserted --- src/features/edit/js/gridEdit.js | 56 ++++++++++++++++---------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js index b8d15e5b3b..16a51017c7 100644 --- a/src/features/edit/js/gridEdit.js +++ b/src/features/edit/js/gridEdit.js @@ -121,6 +121,15 @@ */ gridOptions.cellEditableCondition = gridOptions.cellEditableCondition === undefined ? true : gridOptions.cellEditableCondition; + /** + * @ngdoc object + * @name editableCellTemplate + * @propertyOf ui.grid.edit.api:GridOptions + * @description If specified, cellTemplate to use as the editor for all columns. + *
default to 'ui-grid/cellTextEditor' + */ + gridOptions.editableCellTemplate = gridOptions.editableCellTemplate || ''; + /** * @ngdoc object * @name enableCellEditOnFocus @@ -173,15 +182,6 @@ */ colDef.cellEditableCondition = colDef.cellEditableCondition === undefined ? gridOptions.cellEditableCondition : colDef.cellEditableCondition; - /** - * @ngdoc object - * @name editableCellTemplate - * @propertyOf ui.grid.edit.api:GridOptions - * @description If specified, cellTemplate to use as the editor for all columns. - *
default to 'ui-grid/cellTextEditor' - */ - gridOptions.editableCellTemplate = gridOptions.editableCellTemplate || ''; - colDef.type = colDef.type || 'text'; /** @@ -205,14 +205,14 @@ } promises.push(gridUtil.getTemplate(colDef.editableCellTemplate) - .then( - function (template) { - col.editableCellTemplate = template; - }, - function (res) { - // Todo handle response error here? - throw new Error("Couldn't fetch/use colDef.editableCellTemplate '" + colDef.editableCellTemplate + "'"); - })); + .then( + function (template) { + col.editableCellTemplate = template; + }, + function (res) { + // Todo handle response error here? + throw new Error("Couldn't fetch/use colDef.editableCellTemplate '" + colDef.editableCellTemplate + "'"); + })); } /** @@ -400,8 +400,8 @@ function shouldEdit(col) { return angular.isFunction(col.colDef.cellEditableCondition) ? - col.colDef.cellEditableCondition($scope) : - col.colDef.cellEditableCondition; + col.colDef.cellEditableCondition($scope) : + col.colDef.cellEditableCondition; } function beginEdit() { @@ -418,14 +418,14 @@ var cellElement; $scope.$apply(function () { - inEdit = true; - cancelBeginEditEvents(); - cellElement = $compile(html)($scope.$new()); - var gridCellContentsEl = angular.element($elm.children()[0]); - isFocusedBeforeEdit = gridCellContentsEl.hasClass(':focus'); - gridCellContentsEl.addClass('ui-grid-cell-contents-hidden'); - $elm.append(cellElement); - } + inEdit = true; + cancelBeginEditEvents(); + cellElement = $compile(html)($scope.$new()); + var gridCellContentsEl = angular.element($elm.children()[0]); + isFocusedBeforeEdit = gridCellContentsEl.hasClass(':focus'); + gridCellContentsEl.addClass('ui-grid-cell-contents-hidden'); + $elm.append(cellElement); + } ); //stop editing when grid is scrolled @@ -542,4 +542,4 @@ }; }]); -})(); \ No newline at end of file +})(); From c509862ebe0a258f013da38fb9e3a496613dfb9a Mon Sep 17 00:00:00 2001 From: jpuri Date: Sun, 10 Aug 2014 01:50:30 +0530 Subject: [PATCH 6/9] tutorial changes to add isActive column --- src/features/edit/templates/cellBooleanEditor.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/edit/templates/cellBooleanEditor.html b/src/features/edit/templates/cellBooleanEditor.html index af15145bb8..8de49c4997 100644 --- a/src/features/edit/templates/cellBooleanEditor.html +++ b/src/features/edit/templates/cellBooleanEditor.html @@ -1,3 +1,3 @@
-
\ No newline at end of file +
From e37585e8d158e27656b92aa31bd8fc3531fb8aa6 Mon Sep 17 00:00:00 2001 From: jpuri Date: Sun, 10 Aug 2014 02:14:12 +0530 Subject: [PATCH 7/9] changes in gridEdit.js --- src/features/edit/js/gridEdit.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/features/edit/js/gridEdit.js b/src/features/edit/js/gridEdit.js index 16a51017c7..9ba3d32bcb 100644 --- a/src/features/edit/js/gridEdit.js +++ b/src/features/edit/js/gridEdit.js @@ -128,7 +128,6 @@ * @description If specified, cellTemplate to use as the editor for all columns. *
default to 'ui-grid/cellTextEditor' */ - gridOptions.editableCellTemplate = gridOptions.editableCellTemplate || ''; /** * @ngdoc object @@ -182,8 +181,6 @@ */ colDef.cellEditableCondition = colDef.cellEditableCondition === undefined ? gridOptions.cellEditableCondition : colDef.cellEditableCondition; - colDef.type = colDef.type || 'text'; - /** * @ngdoc object * @name editableCellTemplate @@ -195,12 +192,11 @@ colDef.editableCellTemplate = colDef.editableCellTemplate || gridOptions.editableCellTemplate; if (!colDef.editableCellTemplate) { - switch (colDef.type) { - case 'text': - colDef.editableCellTemplate = 'ui-grid/cellTextEditor'; - break; - case 'boolean': - colDef.editableCellTemplate = 'ui-grid/cellBooleanEditor'; + if (colDef.type && colDef.type === 'boolean') { + colDef.editableCellTemplate = 'ui-grid/cellBooleanEditor'; + } + else { + colDef.editableCellTemplate = 'ui-grid/cellTextEditor'; } } From 5a6af2487e4fd21c5dc1e5c0798a371faea8202c Mon Sep 17 00:00:00 2001 From: jpuri Date: Sun, 10 Aug 2014 11:22:12 +0530 Subject: [PATCH 8/9] styling added for boolean editor, test cases and tutorial changes also added --- misc/tutorial/6_editable.ngdoc | 14 +++++++++---- src/features/edit/less/edit.less | 4 ++++ .../edit/templates/cellBooleanEditor.html | 2 +- .../edit/test/uiGridEditDirective.spec.js | 20 +++++++++++++++++++ 4 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 src/features/edit/less/edit.less diff --git a/misc/tutorial/6_editable.ngdoc b/misc/tutorial/6_editable.ngdoc index 9395770e57..817061e367 100644 --- a/misc/tutorial/6_editable.ngdoc +++ b/misc/tutorial/6_editable.ngdoc @@ -4,12 +4,16 @@ You can use the `enableCellEdit` options in your column definitions to allow a column to be editable. -Editing is invoked via double-click, f2, or start typing any non-navigable key. Custom edit templates should be used for any editor other than the default text editor. +Editing is invoked via double-click, f2, or start typing any non-navigable key. Custom edit templates should be used for any editor +other than the default editors. By default a text editor is provided for all non-boolean fields, for booleans a boolean editor with +a checkbox is provided. ColumnDef Options: -
editableCellTemplate (default: 'ui-grid/cellTextEditor') - Valid html, templateCache Id, or url that returns html content to be compiled when edit mode is invoked. +
editableCellTemplate (default: 'ui-grid/cellTextEditor' for non-boolean columns, 'ui-grid/cellBooleanEditor' for +boolean columns) - Valid html, templateCache Id, or url that returns html content to be compiled when edit mode is invoked.
enableCellEdit (default: true) - false to not allow editing
cellEditableCondition (default: true) Can be set to a boolean or a function that will be called with the cellScope to determine if the cell should be invoked in edit mode. +
type (default: null) If set to boolean by default a boolean editor will be provided for the column.
The following option is available only if using cellNav feature
enableCellEditOnFocus - true to invoke editor as soon as cell has focus @@ -17,7 +21,8 @@ The following option is available only if using cellNav feature 
 $scope.gridOptions.columnDefs = [
    { name: 'name', enableCellEdit: true, editableCellTemplate },
-   { name: 'address.city', enableCellEdit: true, displayName: 'Address (even rows editable)', cellEditableCondition: function($scope){return $scope.row.index%2} }
+   { name: 'address.city', enableCellEdit: true, displayName: 'Address (even rows editable)', cellEditableCondition: function($scope){return $scope.row.index%2} },
+   { name: 'isActive', enableCellEdit: true, type: 'boolean'}
 ]
@@ -35,7 +40,8 @@ $scope.gridOptions.columnDefs = [ { name: 'name', displayName: 'Name (editable)' }, { name: 'age', enableCellEdit: false}, { name: 'address.city', displayName: 'Address (even rows editable)', - cellEditableCondition: function($scope){return $scope.row.index%2} } + cellEditableCondition: function($scope){return $scope.row.index%2} }, + { name: 'isActive', displayName: 'Active', type: 'boolean'} ]; diff --git a/src/features/edit/less/edit.less b/src/features/edit/less/edit.less new file mode 100644 index 0000000000..73ba340a62 --- /dev/null +++ b/src/features/edit/less/edit.less @@ -0,0 +1,4 @@ +input[type="checkbox"].ui-grid-edit-checkbox { + margin-top: 9px; + margin-left: 6px; +} \ No newline at end of file diff --git a/src/features/edit/templates/cellBooleanEditor.html b/src/features/edit/templates/cellBooleanEditor.html index 8de49c4997..c7c8239c06 100644 --- a/src/features/edit/templates/cellBooleanEditor.html +++ b/src/features/edit/templates/cellBooleanEditor.html @@ -1,3 +1,3 @@
- +
diff --git a/src/features/edit/test/uiGridEditDirective.spec.js b/src/features/edit/test/uiGridEditDirective.spec.js index 9420b1099b..2fcd2d871c 100644 --- a/src/features/edit/test/uiGridEditDirective.spec.js +++ b/src/features/edit/test/uiGridEditDirective.spec.js @@ -4,6 +4,8 @@ describe('uiGridEditDirective', function () { var element; var cellTextEditorHtml = '
'; var cellBooleanEditorHtml = '
'; + var colDefEditableCellTemplate = '
'; + var gridOptionsEditableCellTemplate = '
'; var recompile; beforeEach(module('ui.grid.edit')); @@ -61,6 +63,24 @@ describe('uiGridEditDirective', function () { expect(col.colDef.enableCellEdit).toBe(true); expect(col.editableCellTemplate).toBe(cellBooleanEditorHtml); }); + + it('editableCellTemplate value should get priority over default templates', function () { + + element = angular.element('
'); + scope.options.editableCellTemplate = gridOptionsEditableCellTemplate; + recompile(); + + //A template specified in Grid Options should get priority over defaults + var gridScope = element.scope().$$childTail; + var col = gridScope.grid.getColumn('col1'); + expect(col.editableCellTemplate).toBe(gridOptionsEditableCellTemplate); + + //A template specified in colDef should get priority over defaults + //as well as one specified in grid options + scope.options.columnDefs[0].editableCellTemplate = colDefEditableCellTemplate; + recompile(); + expect(col.editableCellTemplate).toBe(colDefEditableCellTemplate); + }); }); }); \ No newline at end of file From 9fd36326de5a235f51889c1108194067b7ad7e5c Mon Sep 17 00:00:00 2001 From: jpuri Date: Sun, 10 Aug 2014 11:31:44 +0530 Subject: [PATCH 9/9] small change in tutorial --- misc/tutorial/6_editable.ngdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/misc/tutorial/6_editable.ngdoc b/misc/tutorial/6_editable.ngdoc index 817061e367..6e669a31bc 100644 --- a/misc/tutorial/6_editable.ngdoc +++ b/misc/tutorial/6_editable.ngdoc @@ -13,7 +13,7 @@ ColumnDef Options: boolean columns) - Valid html, templateCache Id, or url that returns html content to be compiled when edit mode is invoked.
enableCellEdit (default: true) - false to not allow editing
cellEditableCondition (default: true) Can be set to a boolean or a function that will be called with the cellScope to determine if the cell should be invoked in edit mode. -
type (default: null) If set to boolean by default a boolean editor will be provided for the column. +
type (default: null) If set to boolean the default editor provided for editing will be boolean editor.
The following option is available only if using cellNav feature
enableCellEditOnFocus - true to invoke editor as soon as cell has focus