diff --git a/misc/tutorial/6_editable.ngdoc b/misc/tutorial/6_editable.ngdoc index 9395770e57..6e669a31bc 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 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 @@ -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/js/gridEdit.js b/src/features/edit/js/gridEdit.js index 1d1c061b1b..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 || 'ui-grid/cellTextEditor'; /** * @ngdoc object @@ -192,6 +191,15 @@ if (colDef.enableCellEdit) { colDef.editableCellTemplate = colDef.editableCellTemplate || gridOptions.editableCellTemplate; + if (!colDef.editableCellTemplate) { + if (colDef.type && colDef.type === 'boolean') { + colDef.editableCellTemplate = 'ui-grid/cellBooleanEditor'; + } + else { + colDef.editableCellTemplate = 'ui-grid/cellTextEditor'; + } + } + promises.push(gridUtil.getTemplate(colDef.editableCellTemplate) .then( function (template) { 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 new file mode 100644 index 0000000000..c7c8239c06 --- /dev/null +++ b/src/features/edit/templates/cellBooleanEditor.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/features/edit/test/uiGridEditDirective.spec.js b/src/features/edit/test/uiGridEditDirective.spec.js index 7e0865bc9b..2fcd2d871c 100644 --- a/src/features/edit/test/uiGridEditDirective.spec.js +++ b/src/features/edit/test/uiGridEditDirective.spec.js @@ -3,6 +3,9 @@ describe('uiGridEditDirective', function () { var scope; var element; var cellTextEditorHtml = '
'; + var cellBooleanEditorHtml = '
'; + var colDefEditableCellTemplate = '
'; + var gridOptionsEditableCellTemplate = '
'; var recompile; beforeEach(module('ui.grid.edit')); @@ -14,6 +17,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 +28,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 +58,28 @@ 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); + }); + + 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); }); });