Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

CFGrid pre-populating CFSelect In CF8

20 views
Skip to first unread message

TomD__

unread,
Mar 11, 2008, 4:09:24 PM3/11/08
to
I am somewhat new to ColdFusion (especially CF8 and AJAX) but have learned
quite a bit recently. I have been racking my brain trying to find a solution
or methodoly to this simple task.

I am using CF8 and have created a cfgrid which is populated by a cfc (using
the example in Ben & Ray's new WACK book). The grid should not allow editing.
This works fine. My next goal was to have a series of cfinputs and cfselects
bound to this grid that would display under the grid to allow for editing.
There obviously is no problem binding the cfinput to the cfgrid. The problem
that I'm running into is binding the cfselect to the the cfgrid.

In CF8, the bind in cfselect allows you to bind to an array of valid inputs.
What I'm trying to accomplish is having the initial value of the cfselect (or
selected value) be the corresponding row selected in the cfgrid. In other
words, if you select another row on the cfgrid, all values in the edit screen
are updated, including the cfselect. Right now, only the cfinput tags are
updated when the active row on the cfgrid is changed.

I tried playing with onchange, cfproxy, options in cfselect, etc.but seem to
have hit a brick wall. Does anyone know of any solutions?

Thanks in advance.


:smile;


<cfform name="MainIndex"
format="html"
action="portalcfc.cfc?method=indexSelect">

<cfgrid name="contact_grid"
format="html"
pagesize="10"
striperows="yes"
bind="cfc:portalcfc.browse({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection})">

<cfgridcolumn name="OBJECT_ID"
width="100"
header="Object ID">

<cfgridcolumn name="CONTACT_NUMBER_CODE"
width="100"
select="yes"
header="Contact Type">

<cfgridcolumn name="CONTACT_NAME"
width="100"
header="Contact Name">

<cfgridcolumn name="CONTACT_NUMBER"
width="100"
header="Contact Number">

<cfgridcolumn name="EMAIL_ADDRESS"
width="100"
header="Email Address">

<cfgridcolumn name="EMERGENCY_BROADCAST"
width="100"
header="Emergency Broadcast">

</cfgrid>

<cfinput type="text"
name="OBJECT_ID"
label="Object ID"
bind="{contact_grid.OBJECT_ID}">

<cfselect name="CONTACT_NUMBER_CODE"
label="Contact Type"
id="CONTACT_NUMBER_CODE"
value="CONTACT_NUMBER_CODE"
bind="cfc:portalcfc.getContactNumberCode()"
bindonload="true">

<!---
<option value = ""></option>
<option value = "Home">Home Telephone</option>
<option value = "Mother">Mothers Telephone</option>
<option value = "Father">Fathers Telephone</option>
<option value = "Guardian">Guardian Telephone</option>
<option value = "MWork">Mothers Work</option>
<option value = "FWork">Fathers Work</option>
<option value = "GWork">Guardian's Work</option>
<option value = "MCell">Mothers Cell</option>
<option value = "FCell">Fathers Cell</option>
<option value = "GCell">Guardian's Cell</option>
<option value = "Emerg">Emergency Telephone</option>
<option value = "Emerg2">Emergency Telephone 2</option>
<option value = "Emerg3">Emergency Telephone 3</option>
<option value = "Emerg4">Emergency Telephone 4</option>
<option value = "Emerg5">Emergency Telephone 5</option>
<option value = "Emerg6">Emergency Telephone 6</option>
<option value = "Emerg7">Emergency Telephone 7</option>
<option value = "FPager">Fathers Pager</option>
<option value = "MPager">Mothers Pager</option>
<option value = "Dentist">Dentist</option>
<option value = "Doctor">Doctor</option>
<option value = "Hospital">Hospital</option>
--->

</cfselect>
<cfset EMERGENCY_BROADCAST_BI = "Y">

<cfinput type="text"
name="CONTACT_NAME"
label="Contact Name"
validateAt="onSubmit"
bind="{contact_grid.CONTACT_NAME}">

<cfinput type="text"
name="CONTACT_NUMBER"
label="Contact Number"
validateAt="onSubmit"
bind="{contact_grid.CONTACT_NUMBER}">

<cfinput type="text"
name="EMAIL_ADDRESS"
label="Email Address"
validateAt="onSubmit"
bind="{contact_grid.EMAIL_ADDRESS}">

<cfselect name="EMERGENCY_BROADCAST"
label="Emergency Broadcast">
<option value = ""></option>
<option value = "N" <cfif form.contact_grid.EMERGENCY_BROADCAST eq
"N">selected="selected"</cfif>No</option>
<option value = "Y" <cfif form.contact_grid.EMERGENCY_BROADCAST eq
"Y">selected="selected"</cfif>Yes</option>
</cfselect>


<cfinput type="button"
onclick="return ValidateFields()"
name="contactOperation"
value="Save">

</cfform>


TomD__

unread,
Mar 11, 2008, 4:12:11 PM3/11/08
to

Thanks in advance.


:smile;

</cfgrid>

</cfselect>

</cfform>


timmaayyb

unread,
Apr 18, 2008, 5:45:32 PM4/18/08
to
I have the same problem. I have tried everything I can think of.. Bind
to a hidden field with the ID of the dropdown value then use the
onChange to call a javascript function that will select the item in
the drop down. to no avail. seems to be a core aspect of web
application development that is missing from cf8 bind cfselect and the
new ajax features. any help or hacks would be appreciated.

timmaayyb

unread,
Apr 18, 2008, 7:22:25 PM4/18/08
to
i found the answer. bind the value to a hidden field that calls a
javascript function that accepts two parameters the id of the cfselect
and gridValue the place this javascript function in the head of your
document and you should be creating sweet edit ajax forms in no time
that utilize cfselects with dropdowns populated from lookup tables

<script type='text/javascript'>
var hasRun = false;
function selectDropDown(x,val) {
if(!hasRun) {
var dd = document.getElementById(x);
for(var i = 0; i < dd.length; i++){
if(dd.options[i].value == val){
dd.selectedIndex = i;
}
}
}
hasRun = true;
}
</script>

<cfinput type="hidden" name="categoryHiddenBind" value=""
bind="javascript:selectDropDown('ComponentCatID',
{grid.ComponentCatID})">
*Category:
<cfselect query="queryName" name="CategoryID"
display="CategoryName" value="CategoryID" queryPosition="below">
<option value="0">-- Select a Category -- </option>
</cfselect>

hope this helps i spent forever trying to figure this out. pass it on
cause this seems to be lacking out of the box with cf8 and ajax
features

0 new messages