Closed
Description
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?