Web Trenches

De-select a CFGRID row so it can be clicked again

One of my colleagues recently mentioned to me that he was frustrated with CFGRID because after a grid row is selected, you can't trigger an action when it is clicked again.

 Here's the solution I found.

 First the grid code…

<cfajaxproxy bind="javascript:todetail({shipments.id})" />
<cfgrid query="sdQry" name="shipments" format="html" autowidth="false" selectonload="false" style="clear:both;">
<cfgridcolumn name="id" display="no" />
<cfgridcolumn name="INVOSHIPDATEDISPLAY" header="Pickup Date" width="75" />
<cfgridcolumn name="INVOPONBR" header="Package Nunber" width="75" />
<cfgridcolumn name="INVOBLNBR" header="BOL/Cust Ref" width="75" />
<cfgridcolumn name="CARRNAME" header="Carrier" width="150" />
<cfgridcolumn name="ORIGIN" header="Origin" width="150" />
<cfgridcolumn name="CONSIGNEE" header="Destination" width="150" />

The cfajaxproxy code sets up an event that triggers a javascript function when one of the rows is clicked on.  However, if you click on the row again, no action will occur.  This is because the shipments.id value does not change.

Here's the solution…

todetail = function(shipid) {
                    ColdFusion.navigate('shipmentdetail.cfm?action=detail&id=' + shipid,'shipmentdetails');

This is the JavaScript function.  The first line is just the action that the click performs.  In this case, it loads the results of an Ajax call in a cfdiv.  The second line is what clears the selection in the grid so that it can be clicked again.  By selecting a non-existent row, we reset the id value.  The next time the row is clicked, the id changes and the javascript triggers again.



5 Replies to “De-select a CFGRID row so it can be clicked again”

  1. This works great except for one thing – when the page loads, it fires on the first row as it starts out selected. Is there a way to make it not auto-select the first row when loading a grid? I couldn’t find anything about that in the CF8 docs. Thanks!

  2. Just an FYI, the Ext grid docs do talk about how you can get the selection model. Once you have that, you can deselect/select.

    PS: I have no idea how old this blog entry is. I see a month and a date, bu tno year. 🙁

  3. Thanks Ray. This post was actually from 4/5/2008. I’ll take a look at the skins for Mango and see if any of them show the full date. I never realized that it wasn’t there. I know… I should be using BlogCFC. 🙂

    We actually stopped using CFGRID shortly after this post, so there are probably better ways that were documented after this. The jQuery-based grids (such as dataTables and Flexigrid) seem much more flexible and powerful, so we have been using those for a couple years now.

Leave a Reply

Your email address will not be published. Required fields are marked *