AngularJS ui-grid enableCellEdit NOT editing

Question

I am trying to learn AngularJS.

The grid displays properly. It loads page properly.

• It does NOT go into edit mode.
• Double click does not go into edit mode.
• F2 does not go into edit mode.

ProductTitle (the second column below) is the example I am using.

I recieve no errors in Chrome. No missing libraries.

I have spent hours researching this (and learned so much) but I can't get it to go into edit mode.

Does anyone know what I am doing wrong?

module:

app = angular.module('UIGrid_App', [
    'ngAnimate', // support for CSS-based animations
    'ngTouch', //for touch-enabled devices
    'ui.grid', //data grid for AngularJS
    'ui.grid.pagination', //data grid Pagination
    'ui.grid.resizeColumns', //data grid Resize column
    'ui.grid.moveColumns', //data grid Move column
    'ui.grid.pinning', //data grid Pin column Left/Right
    'ui.grid.selection', //data grid Select Rows
    'ui.grid.autoResize', //data grid Enabled auto column Size
    'ui.grid.exporter', //data grid Export Data
    'ui.grid.edit'
  ]);
})();

controller:

app.controller('ProductsCtrl', ['$scope', 'CRUDService', 'uiGridConstants',
function ($scope, CRUDService, uiGridConstants) {
$scope.gridOptions = [];

//ui-Grid Call
$scope.GetProducts = function () {
$scope.gridOptions = {
enableCellSelection: true, // jenny changed to editable
enableCellEdit: false, // jenny changed to editable - to be set below ( setting to true doesnt work)
enableCellEditOnFocus: true, // jenny changed to editable
useExternalPagination: true,
useExternalSorting: true,
enableFiltering: true,
enableSorting: true,
enableRowSelection: true,
enableSelectAll: true,
enableGridMenu: true,

columnDefs: [
{
name: "ProductID",
displayName: "Product ID",
width: '10%',
headerCellClass: $scope.highlightFilteredHeader
},
{
name: "ProductTitle",
title: "Product Title",
width: '40%',
enableCellEdit: true, // jenny change to editable
headerCellClass: $scope.highlightFilteredHeader
},

more columns

Answer 1

As per the documentation we need module, flags and attribute.

The ui.grid.edit feature allows inline editing of grid data. To enable, you must include the 'ui.grid.edit' module and you must include the ui-grid-edit directive on your grid element.

For individual cells to enable/disable use something like below in the column definition if you don;t want to enable all columns editable:

{ name: 'address.city', enableCellEdit: true, }

Answer 2

You need to add grid edit on your html (ui-grid-edit ui-grid-row-edit)

<div id="grid-create-profile" ui-grid="$ctrl.gridOptions" ui-grid-pagination ui-grid-cellNav ui-grid-edit ui-grid-row-edit ui-grid-resize-columns  ui-grid-selection class="grid"></div>