ColdFusion 8.0 CFGRID changes on FLASH CFFORM not posting to action script page properly

I'm working on creating a feature in ColdFusion 8.0.1 to allow table rows to be quickly visually moved around in a flash cfgrid, then post the form and update the data records for whatever rows were moved around.

So, I populate a Flash CFGRID (inside a CFFORM) by using a query= parameter so the grid contains rows from the query.  Then by using some addItemAt and removeItemAt calls to I can drag the rows around the screen to create a custom sort order for the rows (the function calls are what makes the rows relocate correctly to wherever I drag them to).  Everything is fine on the grid....until....I post the form.  Then the changes do not show up in the #form# variable as array elements as the CF docs indicate they should.  After much troubleshooting, I was able to determine that if I set the CFGRID's selectMode="edit" and then actually make some on-screen cell-level edit changes manually to any of the row cells in the CFGRID, those rows DO show up in the #form# structure, which I can see by doing a CFDUMP of the form variable in the action/post script page.  

So, how can I make rows that I've added with the addItemAt commands show up in the #form# variable?  I don't want the user to have to edit any cell fields of the row just to be able to change the sort order of the rows.   It just seems like anything done on-screen to edit the data is picked up and carried through into the #form# variable on the post page, but any changes done to the CFGRID via ActionScript are not picked up properly.  A resolution to this problem would earn my eternal gratitude!  I've spent significant time Googling and surfing through the Adobe developer's forums for info about how to resolve this with no luck.
<CFOUTPUT>
 
<CFQUERY NAME="GetWidgets" DATASOURCE="MyODBC">
  SELECT widget_id, name, downloads, sortval
  FROM widgets
  ORDER BY sortval
</CFQUERY>
 
 
<cfform name="widgetList" 
  format="Flash" 
  onload="formOnLoad()" 
  width="790" timeout="0" 
  method="post" 
  action="updateSortOrder.cfm">
 
<cfformitem type="script">
 
var overSourceItem:Boolean = false;
var overTargetItem:Boolean = false;
 
 
function formOnLoad() { 
  gridSource.dragEnabled=true;
  gridSource.dropEnabled=true;  
  
  gridSource.addEventListener('dragEnter', doDragEnter);
  gridSource.addEventListener('dragComplete', doDragCompleteDGSource);
  gridSource.addEventListener('dragExit', doDragExitSource); 
  gridSource.addEventListener('dragOver', doDragOverSource);
}
 
 
 
function doDragEnter(event) {
  event.handled = true;
  _root.overSourceItem = true;
  _root.overTargetItem = true;
}
 
function doDragExitSource(event) {
  _root.overSourceItem = false;
  _root.overTargetItem = false;
  event.target.hideDropFeedback();
}
   
  
    
function doDragOverSource(event) {
  _root.gridSource = event.target;
  
  if (_root.gridSource.dataProvider.length > 0) {
    _root.overSourceItem = true;
    _root.overTargetItem = true;
    event.target.showDropFeedback();
    event.action = mx.managers.DragManager.MOVE;
  } 
}
 
 
 
function doDragCompleteDGSource(event){
  var dest = event.target;
  var dropLoc = dest.getDropLocation();
  var selectedIn:Array = event.target.selectedIndices;
 
  if (_root.overTargetItem) {
    var selectedIndex = event.target.selectedIndex;
    
    //Add dragged item to the list at drop location
    for(var i = 0; i < selectedIn.length; i++){
      if (dropLoc > selectedIndex)
        var insLoc = dropLoc + 1;
      else  
        var insLoc = dropLoc;
        
      event.target.addItemAt(insLoc, event.target.selectedItems[i]);      
    }
 
    //Remove dragged item from list at its original location
    for(var i = 0; i < selectedIn.length; i++){
      if (dropLoc > selectedIndex)
        event.target.dataProvider.removeItemAt(selectedIndex);        
      else  
        event.target.dataProvider.removeItemAt(selectedIndex + 1);
    }
 
    //Resequence sortval field
    for(var i = 0; i < event.target.length; i++){
      event.target.dataProvider[i].sortval = i + 1;      
    }
 
  } 
 
  _root.overSourceItem = false;
  _root.overTargetItem = false;
  _root.gridSource.hideDropFeedback();
}
 
 
function addData() {
  //Add some data to the source grid
  gridSource.removeAll();
 
  <CFLOOP Query="GetWidgets">
    gridSource.addItem({
       widget_id:"#GetWidgets.widget_id#",
       name:"#GetWidgets.name#",
       downloads:"#GetWidgets.downloads#",
       sortval:"#GetWidgets.sortval#"});
  </CFLOOP>
}
 
</cfformitem>
 
 
<cfformgroup type="horizontal" width="100%">
<cfinput type="button" name="btnAddData" value="Reload Data" onClick="addData();">
<cfinput type="submit" name="btnUpdate" value="Save">
</cfformgroup>
 
<cfgrid name="gridSource" rowheaders="false" height="400" width="780" query="GetWidgets" selectMode="Edit">
  <cfgridcolumn name="widget_id" header="Widget Id" bold="no" width="70" select="no">
  <cfgridcolumn name="name" header="Widget Title" bold="no" width="500" select="no">
  <cfgridcolumn name="downloads" header="Downloads" bold="no" width="80" select="no">
  <cfgridcolumn name="sortval" header="Sort Order" bold="no" width="80" select="no">  
</cfgrid>
 
 
</cfform>
 
</CFOUTPUT>
 
______________________________________________________________________________________
The above posts to updateSortOrder.cfm, listed below (the key parts any ways)
 
 
<CFOUTPUT>
 
<CFDUMP Var="#form#">
 
<CFSET GridName = "gridSource">
<CFSET ColNameList = "sound_iid,name,downloads,artist_sort">
 
<cfloop index="ColName" list="#ColNameList#">
  <br>form.#GridName#.#ColName#:<br>
    
  <CFSET Array_New = evaluate("form.#GridName#.#ColName#")>
  <CFDUMP Var="#Array_New#">
</cfloop>
 
</CFOUTPUT>

Open in new window

HarmonyClaireAsked:
Who is Participating?
 
HarmonyClaireConnect With a Mentor Author Commented:
As a workaround, create a function which is called in the onChange event of a form submit button.  In the new function, loop through the grid and store text info in a hidden text, which can then be read as a form variable in the post script, parsed and acted upon accordingly.

So, the function and other script is modified like this:
 
//Create string holding sound_iid + sort value, set to hidden field
function postForm() {
  var tstr = "";
  
  for(var i = 0; i < gridSource.dataProvider.length; i++) {
    tstr = tstr + 
      _root.gridSource.dataProvider[i].widget_id + "_" + _root.gridSource.dataProvider[i].sortval + ",";    
  }
 
  _root.trackSortInfo.text = tstr;
}
 
</cfformitem>
 
<cfformgroup type="horizontal" width="100%">
<cfinput type="button" name="btnAddData" value="Reload Data" onClick="addData();">
<cfinput type="submit" name="btnUpdate"  value="Save" onClick="postForm();">
</cfformgroup>
 
<cfgrid name="gridSource" rowheaders="false" height="400" width="780" query="GetSounds" selectMode="Edit">
  <cfgridcolumn name="widget_id" header="Widget Id" bold="no" width="70" select="no">
  <cfgridcolumn name="name" header="Widget Title" bold="no" width="500" select="no">
  <cfgridcolumn name="downloads" header="Downloads" bold="no" width="80" select="no">
  <cfgridcolumn name="sortval" header="Sort Order" bold="no" width="80" select="no">  
</cfgrid>
 
<cftextarea name="customSorted" height="40" Width="40" visible="no" value="false"/>
<cftextarea name="widgetSortInfo" height="40" Width="680" visible="no" value=""/>
 
</cfform>

Open in new window

0
 
RickEpnetConnect With a Mentor Commented:
The way you make change to a cfgrid data is with the onChange= and then you write the action-script to update the table.

Also look at the selectMode Attribute.

http://livedocs.adobe.com/coldfusion/8/htmldocs/Tags_g-h_03.html#3987012
0
 
ESPMJBCommented:

ColdFusion 8.0 CFGRID changes on FLASH CFFORM not posting to action script page properly

Trying to implement the work around for the drag drop and the postForm() workaround does not seem to work. can anyone help.  What I would love to do is to see if it is possible to use CFAJAXproxy to update the data without doing a post or a submit by looping through the grid data.  Is that even possible?

If someone could help it would be greatly appreciated.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.