CODEWITHSUNDEEP
angularjsng-grid
Tim
Tim

Reputation: 1235

Dynamic enableCellEdit

I am trying to figure out how to dynamically set enableCellEdit on a cell based on information in the row. For example, something like:

$scope.gridOpts = {
    data: 'mydata',
    columnDefs: [{field: 'sometimesIEdit', enableCellEdit:row.isEditable}]
}

Clearly row is not available in this context. Maybe enableCellEdit is evaluated purely at the column level and not the cell level making what I want to do impossible - I'm not sure.

I know that as a work around I can use editableCellTemplate with ng-if to show plain text, but I would rather the cell never go editable at all.

Upvotes: 4

Views: 3787

Answers (4)

yarl
yarl

Reputation: 3195

For me, the only solution that worked is using cellEditableCondition as a function:

cellEditableCondition: function ($scope) { return $scope.row.entity.isEditable }

Upvotes: 2

Andrei Dracea
Andrei Dracea

Reputation: 1

Old question, but as we need to maintain an app still using ng-grid (>=2.0.9), I thought I'd answer.

As it says in the docs (https://github.com/angular-ui/ui-grid/wiki/Defining-columns), you may specify a cellEditableCondition: boolean, either on the columnDef or in the Options object.

It also requires enableCellEdit: 'expression'.

Example is extracted from the link above

$scope.gridOptions = { 
    data: myDataSource,
    enableCellSelection: true,
    enableCellEditOnFocus: true,
    cellEditableCondition: 'row.entity.editable',
    columnDefs: [
     { field: 'firstName', displayName: 'First Name', width: "*", resizable: false, enableCellEdit: false},
     { field: 'lastName', displayName: 'First Name', width: "20%"},
     { field: 'address', displayName: 'Last Name', width: "*" , 
       cellEditableCondition: 'row.entity.editable && !row.entity.isAddressDefined()'},
     { field: 'age', cellClass: 'ageCell', headerCellClass: 'ageHeader', width: "**"}]
};

Upvotes: 0

Shlomi Assaf
Shlomi Assaf

Reputation: 2236

Another solution is to decorate one of ng-grid`s directives. In this case 'ngCellHasFocusDirective'.

The basic logic is preventing event`s from firing if a condition is not met.

Using this method you can control cell edit for a cell when another cell in the row was changed. I`m note sure if the "CellTemplate" solution will work when another cell in the row is edited and the result of this edit should disable cell editing for another cell in the row. This is because a cell change activate a $digest on the cell $scope, I dont believe the $digest is fired on the row $scope.

In this gist link below I wrote a decorator for the 'ngCellHasFocus' directive which fires a function defined in "columnDef', the function returns TRUE or FALSE, editable or not.

An exapmle included. GIST: https://gist.github.com/shlomiassaf/7485c61ecb464f261194

Upvotes: 0

eric
eric

Reputation: 454

This is pretty old but figured I'd attempt to answer anyway. I had this exact same problem and solved it using the editableCellTemplate for that column. This is the template I used is something like this:

var editableCellTemplate = '<div class="email" ng-edit-cell-if="isFocused && '
    + 'row.entity.canEdit">'
    + '<input ng-class="\'colt\' + col.index" ng-input="COL_FIELD" '
    + 'ng-model="COL_FIELD" />'
    + '</div>'
    + '<div ng-edit-cell-if="isFocused">'
    + '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>'
    + '{{COL_FIELD}}</span></div>'
    + '</div>'
    + '</div>';

So only if the row entity has canEdit equal to true can that cell be edited.

Upvotes: 1

Related Questions