Boolean editor.

misc/tutorial/6_editable.ngdoc

@@ -4,20 +4,25 @@
 
 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:
-<br/><code>editableCellTemplate</code> (default: 'ui-grid/cellTextEditor') - Valid html, templateCache Id,  or url that returns html content to be compiled when edit mode is invoked.
+<br/><code>editableCellTemplate</code> (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.
 <br/><code>enableCellEdit</code> (default: true) - false to not allow editing
 <br/><code>cellEditableCondition</code>  (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.
+<br/><code>type</code> (default: null) If set to boolean the default editor provided for editing will be boolean editor.
 <br/>
 The following option is available only if using cellNav feature
 <br/><code>enableCellEditOnFocus</code> - true to invoke editor as soon as cell has focus
 
 <pre>
 $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'}
 ]
 </pre>
 
@@ -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'}
       ];
 
 

src/features/edit/js/gridEdit.js

@@ -128,7 +128,6 @@
            *  @description If specified, cellTemplate to use as the editor for all columns.
            *  <br/> 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) {

src/features/edit/less/edit.less

@@ -0,0 +1,4 @@
+input[type="checkbox"].ui-grid-edit-checkbox {
+  margin-top: 9px;
+  margin-left: 6px;
+}

src/features/edit/templates/cellBooleanEditor.html

@@ -0,0 +1,3 @@
+<div>
+    <input type="checkbox" class="ui-grid-edit-checkbox" ng-class="'colt' + col.index" ui-grid-text-editor ng-model="COL_FIELD" />
+</div>

src/features/edit/test/uiGridEditDirective.spec.js

@@ -3,6 +3,9 @@ describe('uiGridEditDirective', function () {
   var scope;
   var element;
   var cellTextEditorHtml = '<div><input ng-model="COL_FIELD" ui-grid-text-editor/></div>';
+  var cellBooleanEditorHtml = '<div><input type= "checkbox" ng-model="COL_FIELD" ui-grid-text-editor/></div>';
+  var colDefEditableCellTemplate = '<div><input ng-model="COL_FIELD"/></div>';
+  var gridOptionsEditableCellTemplate = '<div><input ng-model="COL_FIELD"/></div>';
   var recompile;
 
   beforeEach(module('ui.grid.edit'));
@@ -14,6 +17,7 @@ describe('uiGridEditDirective', function () {
     $templateCache.put('ui-grid/uiGridCell', '<div/>');
     $templateCache.put('ui-grid/uiGridHeaderCell', '<div/>');
     $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('<div ui-grid="options" ui-grid-edit />');
+      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);
     });
   });