I am trying to learn AngularJS.
The grid displays properly. It loads page properly.
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
As per the documentation we need module, flags and attribute.
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, }