With the editable property of a grid column, it’s easy to enable editing or even conditionally compute whether the entire column should be editable. In this post, I’ll show how to take finer control and dynamically determine whether to enable editing based on the contents within a cell.
Dojo Data Grid Series
Dojo Grids in XPages — All Blog Posts
canEdit Event
In short, you can use attach a function to the canEdit event of the grid to return true or false, based on whether you want the cell to be editable.
Interestingly, this function overrides the default settings, so you can allow any cell to be editable or not editable at any time, regardless of the grid column’s editable property.
An Example
Below is an example of code that allows the LastName column of the grid to be editable, but only if the last name in the current cell starts with ‘A’. The code should be run on the onClientLoad event of the page.
The function automatically receives two parameters that are a handle to the grid column and the row index of the clicked cell.
The event will fire when the user double-clicks on a cell (or single-clicks, based on a grid property) in an attempt to edit it, so lines 3-4 streamline the amount of work to be done by not checking the data of columns that aren’t set to be editable anyway.
Lines 8-9 also streamline the logic by only checking data in the lastname column.
Lines 13-15 retrieve the field value from the REST service, based on the column name and the row index.
Lines 18-19 checks whether the value in the cell starts with ‘A’ and will return true if that is the case. Otherwise, it will return false and the cell will not be editable.
dijit.byId('#{id:djxDataGrid1}').canEdit = function(cellColumn, rowIndex){
if (!cellColumn.editable) {
return false;
} else {
// Only check the lastname column
if (cellColumn.field != 'lastname') {
return false;
} else {
// Get the clicked cell value from the grid -- doesn't seem accessible with a property of the object passed in
var grid = cellColumn.grid;
var item = grid.getItem(rowIndex);
var fieldValue = item[cellColumn.field];
// Determine the condition for which it's not editable and return false
if (fieldValue.substr(0,1) == 'A') {
return true;
} else {
return false;
}
}
}
}
Note: this is designed to work with a viewJsonService type of rest service — the viewItemFileService would require slightly different logic when retrieving the current cell value.
