[ui-grid 3.0.0-RC.18 as of 2/7]: Unable to change "enableCellEdit" after initial setting

[pmariduena]

Hi all,

I'm trying to create a grid where you can dynamically make 2 of the columns editable (where they were originally non-editable), and then editable->non-editable, programatically.

This is the tutorial I'm trying to follow:
http://ui-grid.info/docs/#/tutorial/113_adding_and_removing_columns

However, I am still unable to toggle a column from read-only to editable (and vice-versa)

Here's the method I wrote to try and get this working (method to toggle this):

            $scope.columns = [
                {field: 'identifier', displayName: 'Identifier*', enableCellEdit: false},
                {field: 'key2', displayName: 'Second key*', editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownValueLabel: 'pattern',
                    editDropdownOptionsArray: $scope.patternOverridesTypesArray, enableCellEdit: false},
                {field: 'type', displayName: 'Type', enableCellEdit: false},...
///
            ];

            $scope.gridOptions = {
                columnDefs: $scope.columns,
                multiSelect: true,
                enableSelectAll: true,
...

            var unlockPrimaryKeyColumns = function(cellStateArray, editable) {
                $log.log("(un)Locking the primary key columns.");
                var isEditable = !editable;
                for(var i = 0; i < cellStateArray.length; i++) {
                    if ($scope.columns[cellStateArray[i]].enableCellEdit == isEditable) {
                        $scope.columns[cellStateArray[i]].enableCellEdit = editable;
                    }
                }
                for(var i = 0; i < cellStateArray.length; i++) {
                    $log.log("Cell editable state for column: " + cellStateArray[i] + ", is: " + $scope.gridOptions.columnDefs[cellStateArray[i]].enableCellEdit);
                }
                $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                $log.log("Done (un)locking the primary key columns.");
            };

I call this toggling method from the method I use to add new rows, and on the afterCellEdit callback (under certain circumstances).

It looks like this:

            var unlockPrimaryKeyColumns = function(cellStateArray, editable) {
                $log.log("(un)Locking the primary key columns.");
                var isEditable = !editable;
                for(var i = 0; i < cellStateArray.length; i++) {
                    $log.log("Their state is: " + $scope.gridOptions.columnDefs[cellStateArray[i]].enableCellEdit);
                    if ($scope.columns[cellStateArray[i]].enableCellEdit == isEditable) {
                        $scope.columns[cellStateArray[i]].enableCellEdit = editable;
                    }
                }
                for(var i = 0; i < cellStateArray.length; i++) {
                    $log.log("Cell editable state for column: " + cellStateArray[i] + ", is: " + $scope.gridOptions.columnDefs[cellStateArray[i]].enableCellEdit);
                }
                $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                $log.log("Done (un)locking the primary key columns.");
            };

Is something missing in the tutorial (a callback I need to implement)? Of this is not supported for CELL event?

[PaulL1]

I am not sure that cell edit is dynamically available - I think it currently is set once upon grid initialisation - so you'd need to repaint the grid to give this effect.

As such, I think it's another instance of #1819

[pmariduena]

@PaulL1 regarding above comment on dynamic cell edit, you suggest "repainting the grid". How do I do that? Do I call an api for that?

[PaulL1]

No, you basically need to regenerate the containing div, which then re-renders the entire grid.

[PaulL1]

I believe this is now dynamic, looking at the code. Closing, please re-raise if this isn't meeting your needs.