Checkout following sample code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.CheckBox;
import mx.events.CollectionEventKind;
import mx.events.CollectionEvent;
import mx.events.DataGridEventReason;
import mx.events.AdvancedDataGridEvent;
private function calculateCommission(evt:AdvancedDataGridEvent):void
{
if(evt.reason == DataGridEventReason.CANCELLED)
return;
var dtIndex:int = evt.currentTarget.selectedIndex;
var dtField:String = evt.dataField;
var gross:*, commPer:*, comm:*, net:*;
var dataGross:* = evt.itemRenderer.data.gross;
var dataCommPer:* = evt.itemRenderer.data.commPer;
var dataComm:* = evt.itemRenderer.data.comm;
var dataNet:* = evt.itemRenderer.data.net;
switch(dtField)
{
case "gross":
trace("gross column edited.");
gross = evt.currentTarget.itemEditorInstance.text;
if( (dataCommPer != null) && (dataCommPer!="") )
{
comm = (gross * dataCommPer) / 100;
net = gross - comm;
}else if( (dataComm != null) && (dataComm!=""))
{
commPer = (dataComm * 100) / gross;
net = gross - dataComm;
}else{
net = gross;
}
break;
case "commPer":
trace("comm % column edited.");
commPer = evt.currentTarget.itemEditorInstance.text;
if( (dataGross != null) && (dataGross!="") )
{
comm = dataGross * (commPer / 100);
net = dataGross - comm;
}
break;
case "comm":
trace("comm column edited.");
comm = evt.currentTarget.itemEditorInstance.text;
if( (dataGross != null) && (dataGross!="") )
{
commPer = (100 * comm) / dataGross;
net = dataGross - comm;
}
break;
case "net":
trace("net column edited.");
net = evt.currentTarget.itemEditorInstance.text;
break;
}
var item:Object = evt.currentTarget.dataProvider.getItemAt(dtIndex);
if(gross!=null)
item.gross = gross;
if(commPer!=null)
item.commPer = commPer;
if(comm!=null)
item.comm = comm;
if(net!=null)
item.net = net;
//evt.currentTarget.dataProvider.itemUpdated(item);
var colEvent:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE,true,false, CollectionEventKind.UPDATE);
colEvent.items = [item];
colEvent.location = dtIndex;
(evt.currentTarget.dataProvider as ArrayCollection).dispatchEvent(colEvent);
}
private function preventEditing(evt:AdvancedDataGridEvent):void
{
if(evt.reason == DataGridEventReason.CANCELLED)
return;
var dtIndex:int = evt.currentTarget.selectedIndex;
var item:Object = evt.currentTarget.dataProvider.getItemAt(dtIndex);
if(item.markAsReadOnly && evt.dataField!="markAsReadOnly")
evt.preventDefault();
}
]]>
</mx:Script>
<mx:ArrayCollection id="dgArr">
<mx:Array>
<mx:Object firstName="Jake" lastName="Tyler" gross="" commPer="" comm="" net="" markAsReadOnly=""/>
<mx:Object firstName="Ryan" lastName="McCarthy" gross="" commPer="" comm="" net="" markAsReadOnly=""/>
<mx:Object firstName="Jill" lastName="Miller" gross="" commPer="" comm="" net="" markAsReadOnly=""/>
<mx:Object firstName="John" lastName="Rico" gross="" commPer="" comm="" net="" markAsReadOnly=""/>
<mx:Object firstName="Diz" lastName="Watson" gross="" commPer="" comm="" net="" markAsReadOnly=""/>
<mx:Object firstName="Lolo" lastName="Hurley" gross="" commPer="" comm="" net="" markAsReadOnly=""/>
</mx:Array>
</mx:ArrayCollection>
<mx:AdvancedDataGrid dataProvider="{dgArr}" x="100" y="100"
editable="true" rowCount="5"
itemEditEnd="calculateCommission(event)" itemEditBeginning="preventEditing(event)">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="Read Only" dataField="markAsReadOnly" headerWordWrap="true" editorDataField="selected" editable="true" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true"/>
<mx:AdvancedDataGridColumn headerText="First Name" dataField="firstName" editable="false"/>
<mx:AdvancedDataGridColumn headerText="Last Name" dataField="lastName" editable="false"/>
<mx:AdvancedDataGridColumnGroup headerText="Commission Calculation">
<mx:AdvancedDataGridColumn dataField="gross" headerText="Gross" itemRenderer="mx.controls.TextInput" rendererIsEditor="true"/>
<mx:AdvancedDataGridColumn dataField="commPer" headerText="Comm %" itemRenderer="mx.controls.TextInput" rendererIsEditor="true"/>
<mx:AdvancedDataGridColumn dataField="comm" headerText="Comm" itemRenderer="mx.controls.TextInput" rendererIsEditor="true"/>
<mx:AdvancedDataGridColumn dataField="net" headerText="Net" itemRenderer="mx.controls.TextInput" rendererIsEditor="true"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Application>
If you enter some values in gross column and then in comm %, it calculates commission and then net amount. Everything works well, but when you check the checkbox in first column and try to navigate, the tabbing fails to work for that particular row. It doesnt work in both direction.
If I remove evt.preventDefault, the tabbing works properly, but it defeats entire purpose of marking the row as readonly. Can anyone help me to get an approach to mark row as readonly but control focus should also work properly.