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!
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