|
|
Updating A Drop Down Based On An HTML Grid Selection
By Raymond Camden
Expert Author
Article Date: 2007-09-04
A user on cf-talk today asked if you could bind a drop down to an HTML grid. I tried it and got an error.
The drop down expects a query or 2d array for it's source. Too bad. But - there is a solution. I blogged a few weeks ago about noting grid changes (Reacting to a grid row selection). This technique uses the CFAJAXPROXY tag to monitor the grid. In my previous blog entry, I just did an alert, but it's trivial to update a drop down as well. Consider the following example:
<cfajaxproxy bind="javascript:fixCat({entries.category})">
<script>
function fixCat(c) {
var dd = document.getElementById('mycat');
console.log(dd.options.length);
for(var i=0; i<dd.options.length;i++) {
if(dd.options[i].value==c) dd.selectedIndex=i;
}
}
</script>
<cfset q = queryNew("category,title")>
<cfloop index="x" from="1" to="10">
<cfset queryAddRow(q)>
<cfset rcat = listGetAt("Cat1,Cat2,Cat3", randRange(1,3))>
<cfset querySetCell(q,"category", rcat)>
<cfset querySetCell(q,"title", "Title #x#")>
</cfloop>
<cfform name="test">
<cfgrid autowidth="true" name="entries" format="html" query="q" width="600" bindOnLoad="true">
<cfgridcolumn name="category" display="true">
<cfgridcolumn name="title" header="Title">
</cfgrid>
<cfinput type="text" name="thetitle" bind="{entries.title}">
<cfselect name="mycat" id="mycat">
<option value="Cat1">Cat1
<option value="Cat2">Cat2
<option value="Cat3">Cat3
</cfselect>
</cfform>
So a good part of the code is my fake query and grid. You can pretty much ignore that. Note the first line uses cfajaxproxy with a bind attribute. This is what will fire and pass the proper column value to my function. I then just check the drop down option values and select it when I find a match.
In the grid - why did I have display="true"? Well normally this would be a hidden column, but I wanted to double check my work and ensure that the code was working. Not that I make mistakes of course.
Comments
About the Author:
Raymond Camden, ray@camdenfamily.com
http://ray.camdenfamily.com
Raymond Camden is Vice President of Technology for roundpeg, Inc. A long
time ColdFusion user, Raymond has worked on numerous ColdFusion books
and is the creator of many of the most popular ColdFusion community web
sites. He is an Adobe Community Expert, user group manager, and the
proud father of three little bundles of joy.
|
|
