Updating a drop down based on an HTML Grid Selection
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.
Off Topic P.S.: Today I discovered "Apocalpso" by Mew. Dang what a good song. I've played it about 10 times now. Of course, every time I hear a really cool song - the first thing I want to do is try to play it in Guitar Hero II!