flex: Save an editable datagrid via a cfc

Question

Hi

I have an editable datagrid which i need to be able to save with other form fields via a cfc in coldfusion.

Basically the aim is that there are a number of locations retrieved via an RO which make up the first column the remaining columns are types of data i.e. demographics, client notes, appointments etc, the idea is that the user tick each of the checkboxes in the grid to indicate that they are happy to share the type of data with those locations. It has to be done this way as the locations may change so there could be two or four or more over time.

the code runs so far runs and looks good but the saving bit is driving me nuts!! please help. thanks in advance :) the code (abreviated for reasons of sanity) is below

public function handleconsentResult(event:ResultEvent):void {
   consentDatagrid.dataProvider = event.result;
   }
<mx:RemoteObject id="consentQuery"
 destination="ColdFusion"
 source="Build3.consent"
 showBusyCursor="true">
 <mx:method name="getconsent" result="handleconsentResult(event)" fault="fault(event)" />

<mx:DataGrid id="consentDatagrid" creationComplete="init()" width="98%" wordWrap="true" textAlign="center">
      <mx:columns>
       <mx:DataGridColumn headerText="Organisation" width="100" textAlign="left" id="Location" dataField="LocationName" wordWrap="true"/>
       <mx:DataGridColumn headerText="Demographics"  width="100" wordWrap="true" textAlign="center" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="ClientDemographics" />
       <mx:DataGridColumn headerText="Appointments"  width="100" wordWrap="true" textAlign="center" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="ClientAppointments"/>
       <mx:DataGridColumn headerText="Activity"  width="70" wordWrap="true" textAlign="center" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="ClientActivity"/>
       <mx:DataGridColumn headerText="Notes" width="50" wordWrap="true" textAlign="center" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="ClientNotes"/>
      </mx:columns>
     </mx:DataGrid>

Answer 1

I don't know Flex in CF but have you determined if you want to save them all at once or on some sort of "Save" or "Submit" action?

If you are going to save them all at once then this post on Iterating over a ColdFusion Query in Flex may be helpful.

Otherwise I would just put a Listener on the onChange event in each cell and write it in real time.

Answer 2

It sounds like what you want to do is return the entire contents of the DataGrid back as a member of the rest of your form data. I'm still learning Flex, but I believe it would automatically be converted from an ArrayCollection to a Query since you're using AMF.

Since you're not using a dataProvider attribute for your DataGrid, I assume you're binding an ArrayCollection object to the DataGrid in the init function you're calling from the creationComplete event. In that case, you'll want to do the opposite before returning the form data to the server: copy the DataGrid values back to a variable you're returning.

Alternatively, you could use a bindable ArrayCollection variable, so that when the DataGrid is updated by the user, the ArrayCollection variable is already updated and you can simply return it back to ColdFusion.

Answer 3

I needed to do something similar and I found it worked nicely to create a "data set" object in actionscript and an analogous CFC that would map to each other. From flex, call the remote method passing the actionscript object, then on the CF side it will be translated as to the cfc.

[RemoteClass(alias = "model.DataSet")] **//maps to the CFC**    
[Bindable]
public class DataSetVO
{  

 public var rows:Array;

 public function DataSetVO() 
 {

 }

}

The CFC is like this. Make sure to set the alias attribute to match the alias set in the RemoteClass of the actionscript object:

<cfcomponent name="DataSet"  alias="model.DataSet"> 
<cfproperty name="rows" type="array" />
</cfcomponent>

The CFC method to save the data can be like

    <cffunction name="saveToFile" access="remote" returntype="numeric" hint="">
 <cfargument name="dataSet" type="model.GPDataSet" required="true" />
 <!--- do what you need to do to with arguments.dataSet to 
                  save to a file, database, whatever --->
 <cfreturn 0 />
</cffunction>

The call from flex is like:

 //make a remote call to save the grid 
 //populate your VO with the contents of the grid, in this case I have an object
 //that gives me one, basically iterate over the dataprovider of the grid
var myVO:DataSetVO = myDataSet.getAsVO();
//calling the remote CFC passing the VO that will be mapped to a CFC on the server
cfsvc.saveToFile(myVO);

Mapping complex objects from Flex to CF can be a little tricky but once it's set up it very nice.

These articles may be helpful

http://www.jeffryhouser.com/index.cfm/2007/10/9/Why-does-ColdFusion-return-a-CFC-to-Flex-as-a-generic-object

http://mxbase.blogspot.com/2008/07/passing-custom-objects-between-flex-and.html