Groups | Blog | Home
all groups > coldfusion flash integration > march 2005 >

coldfusion flash integration : CFGRID SELECT Example for Bound FLASH


theoriginaldrizz
3/28/2005 8:04:01 PM
Here is a workaround for using a cfgrid, a bound Flash form and a select box:

The idea is that since you can easily bind a text input field to a grid
column, you can use an invisible field to do the binding and updating while
using a select box to 'appear' to do the work.

Note the onchange events in the grid and the selectbox... the grid calls some
ActionScript inside a CFSAVE and the selectbox sets field properties using
ActionScript inside the onChange parameter.

The following example uses a grid to show some user-defined hyperlinks stored
in a database table and has a form bound to the grid. The select box is used to
switch between a window target value of "_new" and "_parent".

Best regards and happy coding,

Andy Driscoll

----------------------

:D

<cfsavecontent variable="changeSelect">
if (qlTarget.text=='_parent') {
qlTargetEdit.selectedIndex=1;
} else if (qlTarget.text=='_new') {
qlTargetEdit.selectedIndex=2;
} else {
qlTargetEdit.selectedIndex=0
}
</cfsavecontent>

<cfquery datasource="#data_source#" name="getLinks">
SELECT ql_link_title, ql_link_address, ql_link_target
FROM my_stored_links_table
</cfquery>

<cfform format="Flash" width="100%" height="485">
<!--- Begin Grid --->
<cfgrid name="linksGrid" width="425" query="getLinks" rowheaders="false"
onChange="#changeSelect#">
<cfgridcolumn name="ql_link_title" header="Link Name">
<cfgridcolumn name="ql_link_address" header="URL"">
<cfgridcolumn name="ql_link_target" display="no">
</cfgrid>
<!--- Begin Edit Form Elements --->
<cfinput name="qlName" size="30" type="text" label="Link Name:"
tooltip="e.g. Pubmed" required="yes"
bind="{linksGrid.dataProvider[linksGrid.selectedIndex]['ql_link_title']}"
onChange="linksGrid.dataProvider.editField(linksGrid.selectedIndex,
'ql_link_title', qlName.text);">
<cfinput name="qlURL" size="30" type="text" label="Link URL:" tooltip="i.e.
www.yourlink.com" required="yes"
bind="{linksGrid.dataProvider[linksGrid.selectedIndex]['ql_link_address']}"
onChange="linksGrid.dataProvider.editField(linksGrid.selectedIndex,
'ql_link_address', qlURL.text);">
<!--- Begin Select that edits the bound, Target form Field --->
<cfselect name="qlTargetEdit" required="no" width="140" label="Window:"
onChange="qlTarget.text=qlTargetEdit.value;">
<option value="" selected>- Select a Window -</option>
<option value="_parent">Open in this window</option>
<option value="_new">Open in new window</option>
</cfselect>
<!--- End Select --->
<!--- Begin INVISIBLE, bound, Target field --->
<cfinput type="text" name="qlTarget" size="30" visible="false"
required="yes"
bind="{linksGrid.dataProvider[linksGrid.selectedIndex]['ql_link_target']}"
onChange="linksGrid.dataProvider.editField(linksGrid.selectedIndex,
'ql_link_target', qlTarget.text);" disabled="true">
<!--- End INVISIBLE, bound, Target field --->
<cfinput name="submit" value="Submit" type="submit"/>
</cfformgroup>
</cfformgroup>
</cfform>
Flying Condom
3/29/2005 6:50:23 AM
Hello Andy, this is a nice workaround for small select boxes. But what can I
do if I use a query to fill a selectbox, for example a user list. Today 30
users and tomorrow 100 user? Any good Idea? Thanks Daniel
theoriginaldrizz
3/29/2005 2:27:55 PM
you could build the selectbox dynamically and at the same time create an array
that stores the user name and the row number(in the grid). then you could refer
to the array to create your ActionScript statement on the fly.

where your array looks like myArray[1][1] = Username myArray[1][2] =
rownumber--
you could build this at the same time (or not) you populate your selectbox...

so then you'd do something inside a CF loop like below to dynamically build
your ActionScript:

if (qlTarget.text=='#myArray[1][1]#') {
qlTargetEdit.selectedIndex=#myArray[1][2]#;
<!--- DO BELOW INSIDE A CF LOOP WHERE YOU INCREMENT THE FIRST ARRAY VALUE
BASED ON THE RECORDCOUNT --->
} else if (qlTarget.text=='#myArray[2][1]#') {
qlTargetEdit.selectedIndex=#myArray[2][2]#;
etc....
<!--- THEN CLOSE YOUR STATEMENT --->

hth,

-Andy
AddThis Social Bookmark Button