Force edit mode for individual rows ui grid 3.0

Question

I have a need to have more than 1 cell editable at a time. I have an edit button per row from a columnDef I added. I would like the edit button to allow as many columns as I want editable based on a condition.

When I set a condition like below, this only checks if this condition is met when I double click the cell.

$scope.gridOptions.cellEditableCondition: function(scope){
  scope.row.entity.name = "Jay"
}

Is there any way to invoke the grids 'Edit Mode' on an entire row for all cells that meet the condition?

Answer 1

If you Want to apply condition only on some columns of your grid below is the example:

columnDefs: [
      // default
    { field: 'FileName', displayName: 'FileName', enableCellEdit: false, cellTooltip: true },
    { field: 'RootFilePath', displayName: 'RelativePath', cellTooltip: true, enableCellEdit: false },
    { name: 'File Properties', enableFiltering: false, cellTemplate: '<center><div>' + '<a href="~/../../TaxonomyVersion/GetTaxonomyVersionDetails">View</a>' + '</div></center>' },
    { field: 'IsEditable', displayName: 'Editable/NonEditable', headerTooltip: true, enableCellEdit: false },
    { field: 'HttpPath', displayName: 'HttpPath', enableCellEdit: true, cellTooltip: true },
    { name: 'Generate HttpPath', cellTemplate: '<center><input type="checkbox" ng-model="row.entity.ToGenerateHttpPath", ng-checked="row.entity.ToGenerateHttpPath", ng-click="grid.appScope.generateHttpPath(row.entity.ToGenerateHttpPath,row.entity.HttpPath)"></center>', enableFiltering: false, headerTooltip: true, enableCellEdit: false },
    {field: 'TopLevelSchemaComments', displayName: 'Top Level\n Comments', headerTooltip: true, enableFiltering: true, cellTooltip: true,
        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.IsEditable; // in this example, we'll only allow editable rows to be edited
        },
    },
    { name: 'Remove', enableFiltering: false, cellTemplate: '<div><center><button ng-disabled ="!(row.entity.IsEditable)" class="fa fa-trash-o" ng-click="grid.appScope.Remove(row.entity.XsdSchemaID,row.entity.XbrlLinkbaseID)"></button></center></div>', enableCellEdit: false }, ]

if you want the enitre grid's all the column to follow the same condition then place the condition only in gridOptions before columnDefs. Below is the Example:

    $scope.gridOptions1 = {
    enableFiltering: true,
    data: [],
    showGridFooter: true,
    enableGridMenu: true,
    enableColumnResizing: true,
    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.IsEditable; // in this example, we'll only allow editable rows to be edited
    },
    columnResize: true,
    columnDefs: [
      // default
    { field: 'FileName', displayName: 'FileName', cellTooltip: true },
    { field: 'RootFilePath', displayName: 'RelativePath', cellTooltip:true},
    { name: 'File Properties', enableFiltering: false, cellTemplate: '<center><div>' + '<a href="~/../../TaxonomyVersion/GetTaxonomyVersionDetails">View</a>' + '</div></center>' },
    { field: 'IsEditable', displayName: 'Editable/NonEditable', headerTooltip: true},
    { field: 'HttpPath', displayName: 'HttpPath', cellTooltip: true },
    { name: 'Generate HttpPath', cellTemplate: '<center><input type="checkbox" ng-model="row.entity.ToGenerateHttpPath", ng-checked="row.entity.ToGenerateHttpPath", ng-click="grid.appScope.generateHttpPath(row.entity.ToGenerateHttpPath,row.entity.HttpPath)"></center>', enableFiltering: false, headerTooltip: true, enableCellEdit: false },
    {field: 'TopLevelSchemaComments', displayName: 'Top Level\n Comments', headerTooltip: true, enableFiltering: true, cellTooltip: true},
    { name: 'Remove', enableFiltering: false, cellTemplate: '<div><center><button ng-disabled ="!(row.entity.IsEditable)" class="fa fa-trash-o" ng-click="grid.appScope.Remove(row.entity.XsdSchemaID,row.entity.XbrlLinkbaseID)"></button></center></div>', enableCellEdit: false }, ]
}

Answer 2

I've been working on a similar issue, which differs mainly in that rows are editable based on a flag in the data (rather than a stand-alone button as you have). You can see it in action here; here's the code in case that link breaks.

index.html:

<!DOCTYPE html>
<html ng-app="rowLockDemo">
  <head>
    <meta charset="utf-8" />
    <title>Angular UI-Grid row-lock/cell-edit demo</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.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>

app.js:

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;
  });
})

cellTemplate_lock.html:

<!--
  Button shows current state (locked/unlocked); clicking it toggles the state.  

  Initial button state is set by retrieved 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>