CODEWITHSUNDEEP
angularjsangular-ui-grid
Uğur YILMAZ
Uğur YILMAZ

Reputation: 41

angular ui-grid disable edit for view mode

is there a way to disable/enable cell edit of the grid. for example i have a master-detail form screen. when user wants to analyze a record, i disable all controls of the form with ng-disabled. but i could not prevent editing the grid. i tried "cellEditableCondition" option. But, i runs only when grid is loading. it would be nice if grid have an option like "disableEdit" and accepts a scope variable. when i open my form in edit mode, grid would be editable, and when in view mode grid would be disabled.

Upvotes: 0

Views: 9077

Answers (1)

Uğur YILMAZ
Uğur YILMAZ

Reputation: 41

i found a solution. you can use cellEditableCondition attribute of the grid column. if you apply a function to this attribute, you can enable/disable dynamically cells. here is a plunker:

 $scope.canEdit = function () { return $scope.pageOptions.isView; };

 $scope.pageOptions = { isView : false};

$scope.gridOptions1 = {
enableRowSelection: true,
    enableSelectAll: true,
enableFiltering: true,
columnDefs: [
  { name: 'name', width: '30%',cellEditableCondition: $scope.canEdit },
  { name: 'gender',  width: '20%',cellEditableCondition: $scope.canEdit },
  { name: 'age', width: '20%',cellEditableCondition: $scope.canEdit },
  { name: 'company', width: '25%',cellEditableCondition: $scope.canEdit },
  { name: 'state',  width: '35%',cellEditableCondition: $scope.canEdit },
  { name: 'balance', width: '25%',cellEditableCondition: $scope.canEdit }
],
isRowSelectable:function(row){if(row.entity['age']>30) return true; return false;},
onRegisterApi: function( gridApi ) {
  $scope.gridApi = gridApi;
}
};

http://plnkr.co/edit/md9AOA64Zn67KqhNmhZT?p=preview

Upvotes: 2

Related Questions