Flex : AdvancedDataGridColumn - problem and solution to make only selected columns editable

Context:

AdvandedDataGridColumn stores list data and stylesheets for AdvancedDataGrid. "editable" is a property of AdvancedDataGridColumn intending to make the column editable or uneditable. When made editable (set editable="true" for the AdvancedDataGridColumn) the cells in the editable column will allow a user to change the cell values by invoking a user specified or default (text) editor in the cell by pressing F2 or with a single mouse click on the cell.

When set a column in AdvancedDataGrid implementation; a user while navigating thru the grid using keyboard will be able to press F2 key and make the cell editable just like Microsoft Excel.

Flex developers will not realize the issue till the time requirement is around implementing something simple. The moment one has to make only selected columns editable; the problem will surface up.

The problem:

When pressed F2 when the datagrid cell is selected, irrespective of editable propertly set to false, column will become editable.

This issue is acknowledged by Adobe Fex but still waiting to be fixed at Adobe's end. Take a look at following URL for more details on this issue - http://bugs.adobe.com/jira/browse/FLEXDMV-2084

Solution at High Level:

My approach to solution was to utlize the event propagation to intercept the keyboard event and hoook my validation to decide if the event should be prevented or allowed.

1. Trap the keyboard event on AdvancedDataGrid

2. Validate if the column isEditable

2.1 if yes: let the control flow thru the business logic to update the cell

2.2 if no: prevent the event propagation further

Implementation Details:

I would want a custom function to be invoked before making the cell editable.

AdvancedDataGrid allows this by letting you specify method name as value of itemEditBeginning attribute in AdvancedDataGrid declaration.

It might look something like this:

validateColumnEditability(event)" selectionMode="multipleCells" editable="true" />

Implementation of validateColumnEditability() might look something like:

public function validateColumnEditability(event:AdvancedDataGridEvent):void
{
if(event.dataField == "allowedCol1" event.dataField== "allowedCol1" ...)
{

//this will return the control and make the column editable
return;
}
else
{

//This will prevent event from being propagated thru the stack
event.preventDefault();
}
}

Further Improvements:

The list of the editable can be made a collection and performing look up on the collection would be much easier / better than string coparison

The function can be coded in utility class as static function (this will require you to import the utility class and invoke this static method.

Please note:

Above code defines the approach to fix the problem and not the best way to code