ui grid cell editable condition per row example

var app = angular.module('rowLockDemo', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);

app.controller('MainCtrl', function($scope, $http) {


  $scope.msg = {};


  $scope.gridOptions = {

    enableCellEdit: false, // set all columns to non-editable unless otherwise specified; cellEditableCondition won't override that

    enableCellEditOnFocus: true, // set any editable column to allow edit on focus

    cellEditableCondition: function($scope) {

      // put your enable-edit code here, using values from $scope.row.entity and/or $scope.col.colDef as you desire
      return $scope.row.entity.isActive; // in this example, we'll only allow active rows to be edited

    }

  };


  $scope.gridOptions.columnDefs = [

    {name: 'isActive', displayName: 'Edit Status', enableColumnMenu: false, cellTemplate: 'cellTemplate_lock.html'}, // displays isActive status as a button and allow toggling it 

    {name: 'name', enableCellEdit: true}, // editing is enabled for this column, but will be overridden per row by cellEditableCondition

    {name: 'company', enableCellEdit: true} // same for this column

  ];


  $scope.gridOptions.onRegisterApi = function(gridApi) {

    $scope.gridApi = gridApi;

    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {

      $scope.msg.lastCellEdited = 'ID: ' + rowEntity.id + ', Column: ' + colDef.name + ', New Value: ' + newValue + ', Old Value: ' + oldValue;

      $scope.$apply();

    });

  };


  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json').success(function(data) {

    $scope.gridOptions.data = data;

  });


})

<!doctype html>

<html ng-app="rowLockDemo">

  <head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" type="text/css">
  </head>
  
  <body>

    <div ng-controller="MainCtrl">

      <div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav class="grid"></div>
  
      <strong ng-show="msg.lastCellEdited">Last Edit:</strong> {{msg.lastCellEdited}}

    </div>
  
    <script src="app.js"></script>

  </body>

</html>

<!--
  Button shows current state (locked/unlocked); clicking it toggles the state.  
  
  Initial button state is set by retreived read-only grid data; lock state is not persisted.
-->
<button ng-click="row.entity.isActive = !row.entity.isActive" ng-model="row.entity.isActive" style="{{row.entity.isActive ? 'background-color: lightgreen' : ''}}">
  {{ row.entity.isActive ? 'Unlocked' : 'Locked' }}
</button>