I have an AdvancedDataGrid control that renders a user defined class called
MyCheckBox which extends the CheckBox class. When the AdvancedDataGrid renders
via the HTTP request, it groups on the first field, in this case called
ClientName. If you click on the icon the grouping opens and shows the data
with the CheckBox'es either checked or unchecked. If you click on one of the
CheckBox'es and then click on the grouping field twice, the CheckBox'es are
re-rendered with the original values of the arrayCollection that makes up the
list for the AdvancedDataGrid. Can someone tell me how to update the
arrayCollection and the AdvancedDataGrid's CheckBox to reflect the last state
of the CheckBox'es that were clicked by the user? When I try to directly
update the arrayCollection, FLEX renders the updated row with "unavailable".

I have attached to pertinent code and you can also see it at
http://freedom.dynalias.org:8080/moveit/MoveIt.html. Any help would be greatly
appreciated.

?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="*" width="100%" height="100%"
creationComplete="init();">
<mx:TraceTarget level="0" includeDate="true" includeTime="true"
includeCategory="true" includeLevel="true" >
<mx:filters>
<mx:Array>
<mx:String>*</mx:String>
</mx:Array>
</mx:filters>
</mx:TraceTarget>
<mx:Script>
<![CDATA[
import mx.controls.advancedDataGridClasses.AdvancedDataGr idColumn;
import mx.controls.AdvancedDataGridBaseEx;
import mx.controls.CheckBox;
//import mx.messaging.channels.StreamingAMFChannel;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.collections.ArrayCollection;
import mx.rpc.http.HTTPService;
import mx.managers.CursorManager;
import mx.collections.Grouping;
import mx.collections.GroupingCollection;
import mx.collections.GroupingField;
import mx.collections.ICollectionView;

import mx.containers.TitleWindow;
import mx.managers.PopUpManager;
import mx.collections.IViewCursor;

[Bindable]
private var myTransferInfoAC:ArrayCollection;
//public var myCursor:IViewCursor =
myTransferInfoAC.createCursor();

[Bindable]
private var myTransferInfoGroupColl:GroupingCollection;

private var myTransferInfoHttp:HTTPService;

[Inspectable]
public var myTitleWindow:TransferInfoTitleWindow;

public var currentSelectedIndex:int = -1;
public var currentSelectedID:String;

private function init():void
{
myTransferInfoHttp = new HTTPService();

// Insert your domain name
myTransferInfoHttp.url =
"http://freedom.dynalias.org/cgi-bin/SourceBasicTransferInfoDataGrid.cgi";

CursorManager.setBusyCursor();

myTransferInfoHttp.send();
myTransferInfoHttp.addEventListener(ResultEvent.RE SULT,
resultTransferInfoHttpHandler);
myTransferInfoHttp.addEventListener(FaultEvent.FAU LT,
faultTransferInfoHttpHandler);

}

private function resultTransferInfoHttpHandler(event:ResultEvent):v oid
{
var myGroup:Grouping = new Grouping();
myGroup.fields = [new GroupingField("name")];
CursorManager.removeBusyCursor();
try
{
myTransferInfoAC = event.result.root.record;
var numRows:int = myTransferInfoAC.length;
myTransferInfoGroupColl = new GroupingCollection();
myTransferInfoGroupColl.source = myTransferInfoAC;

myTransferInfoGroupColl.grouping = myGroup;
try
{
myTransferInfoGroupColl.refresh();
}
catch( error2:Error )
{
trace( "resultTransferInfoHttpHandler: We have a bad result set." );
}
}
catch( error:Error )
{
}
CursorManager.removeBusyCursor();
}

private function faultTransferInfoHttpHandler(evt:FaultEvent):void
{
var errors:String = "Some errors occurred \n";
errors += "\n Fault Code is : \n" + evt.fault.faultCode;
errors += "\n Fault Detail is : \n" + evt.fault.faultDetail;
errors += "\n Fault String is : \n" + evt.fault.faultString;
mx.controls.Alert.show(errors);

CursorManager.removeBusyCursor();
}


private function addConnectionButtonHandler():void
{
myTitleWindow = new TransferInfoTitleWindow();

myTitleWindow.initMe();
PopUpManager.addPopUp(myTitleWindow, this, true);
}

private function updateConnectionsButtonHandler():void
{
//if( false )
//{
//var myGrid:BasicTransferInfoDataGrid = this.basicTransferInfoGrid;
//var selectedIndex:int = this.basicTransferInfoGrid.selectedIndex;
//var transfer_id:String = this.myTransferInfoAC.getItemAt(
selectedIndex - 1 )["transfer_id"];
//var delete_files:String = this.myTransferInfoAC.getItemAt(
selectedIndex - 1 )["delete_files"];
//var myArr:Array = this.myTransferInfoAC.toArray();
//}
}
private function deleteConnectionsButtonHandler():void
{

}
private function addScheduleButtonHandler():void
{

}
private function updateScheduleButtonHandler():void
{

}
private function deleteScheduleButtonHandler():void
{

}
private function addEmailButtonHandler():void
{

}
private function updateEmailButtonHandler():void
{

}
private function deleteEmailButtonHandler():void
{

}
private function addOwnerButtonHandler():void
{

}
private function updateOwnerButtonHandler():void
{

}
private function deleteOwnerButtonHandler():void
{

}
private function connectionsRefresh():void
{
this.basicTransferInfoGrid.invalidateList();
myTransferInfoHttp.url =
"http://freedom.dynalias.org/cgi-bin/SourceBasicTransferInfoDataGrid.cgi";

CursorManager.setBusyCursor();

myTransferInfoHttp.send();
}
private function basicTranferInfoGridChangeHandler(evt:Event):void
{
var myGrid:BasicTransferInfoDataGrid = BasicTransferInfoDataGrid(
evt.currentTarget );
var myIndex:int = myGrid.selectedIndex;
var myCell:Object = myGrid.selectedCells;
var myRow:int = myCell[0].rowIndex;
var myCol:int = myCell[0].columnIndex;
var myHeaderText:String = myGrid.columns[myCol].headerText;
trace( "MoveIt.basicTranferInfoGridChangeHandler() entered..." );
try
{
var myValue:String = this.myTransferInfoAC.getItemAt( myIndex - 1
)["transfer_id"];
var delete_files:String = this.myTransferInfoAC.getItemAt( myIndex -
1 )["delete_files"];
var myArr:Array = this.myTransferInfoAC.toArray();
if( myHeaderText == "Delete?" )
{
// TO DO -- figure this out.
if( false )
{
if( delete_files == true )
{
myArr[ myIndex - 1]["delete_files"] = false;
this.myTransferInfoAC.setItemAt( myArr, myIndex - 1 );
}
else
{
myArr[ myIndex - 1]["delete_files"] = true;
//this.myTransferInfoAC.setItemAt( myArr, myIndex - 1 );
this.basicTransferInfoGrid.invalidateList();
myTransferInfoGroupColl.refresh();
}
}
}

this.currentSelectedIndex = myIndex - 1;
this.currentSelectedID = myValue;
trace( "transfer_id=" + myValue );
trace( "delete_files=" + delete_files );
trace( "MoveIt.basicTranferInfoGridChangeHandler(): row=" + myRow );
trace( "MoveIt.basicTranferInfoGridChangeHandler(): col=" + myCol );
}
catch( evt:Error )
{
trace( "MoveIt.basicTranferInfoGridChangeHandler(): failed " +
evt.message );
}
}
private function basicTransferInfoGridClickHandler(evt:Event):void
{
var myGrid:BasicTransferInfoDataGrid = BasicTransferInfoDataGrid(
evt.currentTarget );
var myIndex:int = myGrid.selectedIndex;
var myCell:Object = myGrid.selectedCells;
var myRow:int = myCell[0].rowIndex;
var myCol:int = myCell[0].columnIndex;
var myHeaderText:String = myGrid.columns[myCol].headerText;
trace( "MoveIt.basicTransferInfoGridClickHandler() entered..." );
try
{
var myValue:String = this.myTransferInfoAC.getItemAt( myIndex - 1
)["transfer_id"];
var delete_files:String = this.myTransferInfoAC.getItemAt( myIndex -
1 )["delete_files"];
var myArr:Array = this.myTransferInfoAC.toArray();
if( myHeaderText == "Delete?" )
{
// TO DO -- figure this out.
if( false )
{
if( delete_files == true )
{
myArr[ myIndex - 1]["delete_files"] = false;
this.myTransferInfoAC.setItemAt( myArr, myIndex - 1 );
}
else
{
myArr[ myIndex - 1]["delete_files"] = true;
//this.myTransferInfoAC.setItemAt( myArr, myIndex - 1 );
this.basicTransferInfoGrid.invalidateList();
myTransferInfoGroupColl.refresh();
}
}
}

this.currentSelectedIndex = myIndex - 1;
this.currentSelectedID = myValue;
trace( "transfer_id=" + myValue );
trace( "delete_files=" + delete_files );
trace( "MoveIt.basicTransferInfoGridClickHandler(): row=" + myRow );
trace( "MoveIt.basicTransferInfoGridClickHandler(): col=" + myCol );
}
catch( evt:Error )
{
trace( "MoveIt.basicTransferInfoGridClickHandler(): failed " +
evt.message );
}
}
private function basicTransferInfoGridStateChangeHandler(evt:Event) :void
{
var myGrid:BasicTransferInfoDataGrid = BasicTransferInfoDataGrid(
evt.currentTarget );
var myRendere

The solution to the problem is the

this.dispatchEvent( new mx.events.FlexEvent( mx.events.FlexEvent.DATA_CHANGE,
true, false ) );

line of code in the MyCheckBox.update() method and the

private function basicTranferInfoGridChangeHandler(evt:Event):void

handler in the main code section.

Firing the FlexEvent.DATA_CHANGE causes the
basicTransferInfoGridChangeHandler() to be invoked. The code is then able to
examine current state of the data in the myTransferInfoAC ArrayCollection and
then modify it based on the row and column that was selected by the user. I
would have liked to change the the data in myTransferInfoAC ArrayCollection
inside the MyCheckBox.update() method, but I have not been able to figure that
out yet. Perhaps you have a suggestion.

I found it interesting that the

var myArr:Array = this.myTransferInfoAC.toArray();

line of code in the handler actually creates a reference to the original array
collection and not a copy. This makes it uneccessary to "refresh()" the
GroupCollection because everything seemed to be accessed through the myArr
reference. I am assuming that if you want a real copy of the array collection
that you would have to use the "new" operator.

The "refresh()" does cause the AdvancedDataGrid item to collapse, so I am
happy the the myArr reference does the trick.

I appreciate your responding to my question. I have been trying to figure this
out for about a week. Any other insight or best practices advice that you might
have would be greatly appreciated.

-Denis

Attach Code

// MAIN CODE SECTION

[Bindable]
private var myTransferInfoAC:ArrayCollection;
[Bindable]
private var myTransferInfoGroupColl:GroupingCollection;

private var myTransferInfoHttp:HTTPService;


// NOTE THE dataChange HANDLER

<mx:Canvas label="Basic Source Information" width="100%" height="95%"
id="basicTransferInformationCanvasID">
<ns1:BasicTransferInfoDataGrid y="28" x="0"
id="basicTransferInfoGrid" dataProvider="{myTransferInfoGroupColl}"
editable="true" enabled="true" width="4000"
automationName="basicTransferInfoGrid" lockedColumnCount="0" height="90%"
dataChange="basicTranferInfoGridChangeHandler(even t)"/>
</mx:Canvas>

private function basicTranferInfoGridChangeHandler(evt:Event):void
{
var myGrid:BasicTransferInfoDataGrid = BasicTransferInfoDataGrid(
evt.currentTarget );
var myIndex:int = myGrid.selectedIndex;
var myCell:Object = myGrid.selectedCells;
var myRow:int = myCell[0].rowIndex;
var myCol:int = myCell[0].columnIndex;
var myHeaderText:String = myGrid.columns[myCol].headerText;
trace( "MoveIt.basicTranferInfoGridChangeHandler() entered..." );
try
{
var myValue:String = this.myTransferInfoAC.getItemAt( myIndex - 1
)["transfer_id"];
var delete_files:Boolean = this.myTransferInfoAC.getItemAt( myIndex - 1
)["delete_files"];
var myArr:Array = this.myTransferInfoAC.toArray();
if( myHeaderText == "Delete?" )
{
if( delete_files == true )
{
myArr[ myIndex - 1]["delete_files"] = false;
}
else
{
myArr[ myIndex - 1]["delete_files"] = true;
}
}

this.currentSelectedIndex= myIndex - 1;
this.currentSelectedID = myValue;
trace( "transfer_id=" + myValue );
trace( "delete_files=" + delete_files );
trace( "MoveIt.basicTranferInfoGridChangeHandler(): row=" + myRow );
trace( "MoveIt.basicTranferInfoGridChangeHandler(): col=" + myCol );
}
catch( evt:Error )
{
trace( "MoveIt.basicTranferInfoGridChangeHandler(): failed " + evt.message );
}
}

// END MAIN CODE SECTION

// CUSTOM COMPONENT BasicTransferInfoDataGrid.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:AdvancedDataGrid xmlns:mx="http://www.adobe.com/2006/mxml" enabled="true"
editable="true" selectedIndex="1" lockedRowCount="0" lockedColumnCount="0"
width="4000" selectionMode="singleCell">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="ClientName" width="110"
editable="false" dataField="name"/>
<mx:AdvancedDataGridColumn headerText="Client ID" editable="false"
dataField="client_id"/>
<mx:AdvancedDataGridColumn headerText="Transfer ID" width="110"
editable="false" dataField="transfer_id"/>
<mx:AdvancedDataGridColumn headerText="Transfer Name" width="120"
editable="false" dataField="transfer_name"/>
<mx:AdvancedDataGridColumn headerText="Endpoint" dataField="endpoint"/>
<mx:AdvancedDataGridColumn headerText="Host" dataField="host" />
<mx:AdvancedDataGridColumn headerText="User" dataField="user" />
<mx:AdvancedDataGridColumn headerText="Login Pwd" dataField="login_pwd"/>
<mx:AdvancedDataGridColumn headerText="Protocol" dataField="protocol"/>
<mx:AdvancedDataGridColumn headerText="Platform" dataField="platform"/>
<mx:AdvancedDataGridColumn headerText="Directory" width="250"
dataField="directory"/>
<mx:AdvancedDataGridColumn headerText="Files" width="150" dataField="files"/>
<mx:AdvancedDataGridColumn headerText="Delete?" dataField="delete_files"
id="deleteID" editable="false">
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn headerText="UMASK" dataField="umask"/>
<mx:AdvancedDataGridColumn headerText="Identity File" width="250"
dataField="identity_file"/>
<mx:AdvancedDataGridColumn headerText="Port" dataField="port"/>
<mx:AdvancedDataGridColumn headerText="Encryption App Name"
dataField="encryption_app_name" width="300"/>
<mx:AdvancedDataGridColumn headerText="Direction" dataField="direction"/>
<mx:AdvancedDataGridColumn headerText="Key" dataField="key"/>
<mx:AdvancedDataGridColumn headerText="Password" dataField="password"/>
<mx:AdvancedDataGridColumn headerText="Signature" dataField="signature"/>
<mx:AdvancedDataGridColumn headerText="MODE" dataField="mode"/>
<mx:AdvancedDataGridColumn headerText="DBCDSN" dataField="dbcdsn"/>
<mx:AdvancedDataGridColumn headerText="UNIT" dataField="unit"/>
<mx:AdvancedDataGridColumn headerText="LRECL" dataField="lrecl"/>
<mx:AdvancedDataGridColumn headerText="BLKSZE" dataField="blksze"/>
<mx:AdvancedDataGridColumn headerText="RECFM" dataField="recfm" />
<mx:AdvancedDataGridColumn headerText="CY" dataField="cy"/>
<mx:AdvancedDataGridColumn headerText="DIR" dataField="dir"/>
<mx:AdvancedDataGridColumn headerText="RDW" dataField="rdw"/>
<mx:AdvancedDataGridColumn headerText="SEC" dataField="sec"/>
<mx:AdvancedDataGridColumn headerText="TRACKS" dataField="tracks"/>
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider depth="2" column="{deleteID}"
columnSpan="1" renderer="com.moveit.MyCheckBox"/>
</mx:rendererProviders>
<mx:Script>
<![CDATA[

]]>
</mx:Script>

</mx:AdvancedDataGrid>

// MyCheckBox class.

package com.moveit
{
import flash.events.*;

import mx.controls.CheckBox;
import mx.events.AdvancedDataGridEvent;

public class MyCheckBox extends CheckBox
{
public function MyCheckBox()
{
//TODO: implement function
super();
trace( "MyCheckBox() entered..." );
init();
}

private var _data:Object;

private function init():void
{
trace( "MyCheckBox.init() entered..." );
this.addEventListener(MouseEvent.CLICK, update);
}

override public function get data():Object
{
trace( "MyCheckBox.get() entered..." );
return _data;
}

[Bindable]
override public function set data(o:Object):void
{
trace( "MyCheckBox.set() entered..." );
_data = o;
try
{
if(_data.delete_files == true )
{
this.selected = true;
}
else
{
this.selected = false;
}
}
catch( evt:Error )
{

}
}
private function update(event:MouseEvent):void
{
trace( "MyCheckBox:update() entered..." );
try
{
if(this.selected)
{
_data.delete_files == true;
}
else
{
_data.delete_files == false;
}
this.dispatchEvent( new mx.events.FlexEvent(
mx.events.FlexEvent.DATA_CHANGE, true, false ) );
}
catch( evt:Error )