Ask a Jedi: Enhancing the Flash Form Grid

Scott asks:

Ray, I'm starting work on an invoicing app, and I'd like to do it entirely with Flash Forms. For my line items I'd like to use a cfgrid, but the fact that the flash format of cfgrid doesn't support a select box (for part number selection) pretty much kills that idea. Another other ideas for a good implementation of this?

I’ve run into this problem as well. What I’ve done is use a combination of a grid and a detail panel below. When a row is selected in the grid, the details populate in the panel below. The only issue is that you can’t use bind on cfselect. However, you can use the onChange attribute in the grid tree. Below is a simple example. The text field uses bind whereas the select is populated via onChange. I hope this helps.

<cfset q = queryNew("name,age,gender")>
<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>
</cfloop>

<cfform format="flash" name="foo" width="400">
   <cfgrid name="people" query="q" rowHeaders=false
         onChange="if( people.dataProvider[people.selectedIndex]['gender'] ==
'Male' ) { gender.selectedIndex=0; } else {
gender.selectedIndex=1; }"
>

      <cfgridcolumn name="name" header="Name">
      <cfgridcolumn name="age">
      <cfgridcolumn name="gender" display="false">
   </cfgrid>
   
   <cfinput type="text" name="moo" bind="{people.dataProvider[people.selectedIndex]['name']}">
   <cfselect name="gender" bind="{people.dataProvider[people.selectedIndex]['gender']}">
      <option value="Male">Male</option>
      <option value="Female">Female</option>
   </cfselect>
</cfform>
Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments