This week must be grid week. First we have Bruce Phillips' post on cfgrid last night, and today Todd Sharp posted on it as well. I thought I'd follow the crowd and share a tip as well. How do you do something (anything) when a user clicks on a grid, specifically when using the new HTML cfgrid in ColdFusion 8?
Technically there isn't a attribute that you can add to the grid itself. However, other form fields can easily bind to the grid itself. So if you wanted to build an edit form, for example, that is pretty easy (and again, see Bruce Phillips' post). But what if you wanted more fine grained control? This is where CFAJAXPROXY comes in.
Now if you are like me - you looked at the docs on CJAJAXPROXY and were impressed with how cool it is to be able to create a connection to a CFC. That's amazing, and in my mind, I think it is the most impressive new feature in ColdFusion 8.
But what people may miss (I know I did!) is that CFAJAXPROXY has a whole other... "mode" we shall call it, that lets the tag act in a complete separate manner. In fact, it is so different I'm not quite sure why another tag wasn't made, like CFBIND for example. This other mode takes one main attribute, bind. You can also use a onSuccess and onError attribute. In this mode, the tag simply acts as a listener. So image my grid is named entries. I can bind to it like so:
<cfajaxproxy bind="javascript:noteChange({entries.title})">
All this says is - when the grid changes - call a JavaScript function and pass the value of the Title column. I could also use a CFC or CFM bind as well, but you get the idea. Again, I think CFBIND would be a better name since in this form the tag isn't creating a proxy object for a remote CFC. But that's neither here nor there - lets get back to the original question - how do I react to a grid change?
First you need to figure out what values you want. In my code sample above, I grabbed the title column. If I wanted something different, like ID, I'd do:
<cfajaxproxy bind="javascript:noteChange({entries.id})">
Or I can do both:
<cfajaxproxy bind="javascript:noteChange({entries.title},{entries.id})">
Now for a complete example:
<cfajaxproxy bind="javascript:noteChange({entries.title},{entries.id})">
<script>
function noteChange(title,id) {
alert(title+' '+id);
}
</script>
<cfquery name="entries" datasource="blogdev">
select *
from tblblogentries
limit 0,10
</cfquery>
<cfform name="test">
<cfgrid autowidth="true" name="entries" format="html" query="entries" pageSize="10">
<cfgridcolumn name="id" display="false">
<cfgridcolumn name="title" header="Title">
<cfgridcolumn name="posted" header="Posted">
</cfgrid>
</cfform>
In this example I'm loading up my HTML grid with a query (yes, you don't have to use Ajax for HTML grids). On the top of my template I bound my JavaScript function to the entries grid. Whenever I selected an entry in my grid, an alert will be fired.
I want to point out one last thing. Take a look at the first cfgridcolumn. Why do I have a column that I don't bother displaying? When you specify the columns to show - you are also limiting the data actually stored in the grid. If I didn't have that hidden column there, I wouldn't be able to use the ID column in my bind.