Posted in ColdFusion | Posted on 08-31-2007 | 4,311 views
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:
2
3<script>
4function fixCat(c) {
5 var dd = document.getElementById('mycat');
6 console.log(dd.options.length);
7 for(var i=0; i<dd.options.length;i++) {
8 if(dd.options[i].value==c) dd.selectedIndex=i;
9 }
10}
11</script>
12<cfset q = queryNew("category,title")>
13<cfloop index="x" from="1" to="10">
14 <cfset queryAddRow(q)>
15 <cfset rcat = listGetAt("Cat1,Cat2,Cat3", randRange(1,3))>
16 <cfset querySetCell(q,"category", rcat)>
17 <cfset querySetCell(q,"title", "Title #x#")>
18</cfloop>
19
20<cfform name="test">
21<cfgrid autowidth="true" name="entries" format="html" query="q" width="600" bindOnLoad="true">
22 <cfgridcolumn name="category" display="true">
23
24 <cfgridcolumn name="title" header="Title">
25</cfgrid>
26
27<cfinput type="text" name="thetitle" bind="{entries.title}">
28<cfselect name="mycat" id="mycat">
29<option value="Cat1">Cat1
30<option value="Cat2">Cat2
31<option value="Cat3">Cat3
32</cfselect>
33</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!
All the bind stuff is really nice though. I really need to download the dev edition locally and check it out more.
<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('CategoryID',
{grid.ComponentCatID})">
*Category:
<cfselect query="getCategories" name="CategoryID"
display="CategoryName" value="CategoryID" queryPosition="below">
<option value="0">-- Select a Category -- </option>
</cfselect>
You are doing a lot of work here for nothing.
As you can do the following
<cfselect name="mycat" bind="cfc:categories.getCategories({test:entries.category})" bindonload="true"></cfselect>
This then allows you to use the passed argument in your cfc. But note that the grid appears to pass a null value initially and the the selected value of the first row.
So, before I use it in my cfc I do a cfif and if the value is 'null' then I set the id value to zero.
I can supply and example if you need it.
I could not use your example as I needed to filter the dd by another column other than the two in the dd.
Ken
Now - I'm sure you could do this completely if you had a full Ext Grid in play. So if you get the Grid object you may be able to do this w/ JS. I'm sure other grids would allow for it as well. I don't say this to imply cfgrid sucks, but that your options can be a bit limited sometimes with what you can do with it compared to building a grid with Ext, or jQuery, 100% from scratch (by scratch I mean a plugin of course ;).
[Add Comment] [Subscribe to Comments]