In my last entry, I talked about how the cfgrid control could be enhanced to make it a bit more powerful. The basic idea is to use a detail panel to show items that won't quite fit in the grid, or won't work in the grid. My example code was a bit too simple, however, and didn't really show a good example of binding a truly dynamic select. The example I gave actually had a static select. (On a side note, I left "bind" code in the cfselect that doesn't actually work.)

Here is the enhanced code:

<cfset q = queryNew("name,age,gender,department")>
<cfloop index="x" from="1" to="10">
   <cfset queryAddRow(q)>
   <cfset querySetCell(q, "name", "Name #x#")>
   <cfset querySetCell(q, "age", randRange(20,50) )>
   <cfif x mod 2>
      <cfset querySetCell(q, "gender", "Male")>
   <cfelse>
      <cfset querySetCell(q, "gender", "Female")>
   </cfif>
   <cfset querySetCell(q, "department", randRange(1, 4))>
</cfloop>

<cfsavecontent variable="onChange">
if( people.dataProvider[people.selectedIndex]['gender'] == 'Male' ) {
   gender.selectedIndex=0; } else { gender.selectedIndex=1;
}
for(var i=0;i < department.getLength();i++) if(department.getItemAt(i).data == people.dataProvider[people.selectedIndex]['department']) {department.selectedIndex=i }
   
</cfsavecontent>

<cfform format="flash" name="foo" width="400">
   <cfgrid name="people" query="q" rowHeaders=false
         onChange="#onChange#">
      <cfgridcolumn name="name" header="Name">
      <cfgridcolumn name="age">
      <cfgridcolumn name="gender" display="false">
      <cfgridcolumn name="department" display="false">
   </cfgrid>
   
   <cfformgroup type="panel" label="Detail View">
   <cfinput type="text" name="moo" bind="{people.dataProvider[people.selectedIndex]['name']}">
   <cfselect name="gender">
      <option value="Male">Male</option>
      <option value="Female">Female</option>
   </cfselect>
   
   <cfselect name="department">
      <cfloop from="1" to="4" index="x">
         <cfoutput><option value="#x#">Department #x#</option></cfoutput>
      </cfloop>
   </cfselect>
   </cfformgroup>
   
</cfform>

So what's different? I modified the 'fake' source query to include a department ID value. You can imagine this as being a foreign key value. The next big change is that I moved the ActionScript into a cfsavecontent block. This allows me to a bit more verbose and simply pass the value to the onChange attribute of the cfgrid tag. With me so far? The ActionScript contains both the simple gender code I had last time, and a truly dynamic check against the department drop down. Basically we check the data value of each item in the drop down. (In Flash, the data value is like "value" portion of the option tag.) I compare this against the currently selected row in the grid and when a match is made, I set the selectedIndex.

Anyway, I hope this is a slightly better example.