1 Reply Latest reply on Sep 5, 2008 1:35 PM by denisputnam

    Remembering CheckBox state/value in AdvancedDataGrid

    denisputnam Level 1
      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.
        • 1. Re: Remembering CheckBox state/value in AdvancedDataGrid
          denisputnam Level 1
          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(event)"/>
          </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 )