Passing a Value From Selected CFGRID Record To Another File

Problem Description:
Using ColdFusion 8 and MS-SQL server 2008, I was displaying data within a CFGRID. The data was being queried from a table called Sites. This table had over 10 columns. I was limited to a display area on the web page of 800px. Therefore, I did not have enough space to display all the columns of data for a given record. I would like the user to be able to select a record from the CFGRID and all the data for that record is displayed below the CFGRID.

Solution:
The first thing I needed to do was to make sure I was getting the primary key ID from the Sites table. Next, I had to add a new CFGRIDCOLUMN to the CFGRID to include the primary key from the database query. I didn't want the ID to show in the CFGRID so I set the display attribute equal to "no".

I then placed the CFGRID within a CFFORM tag so that I could use CFINPUT to bind the selected record's primary key ID to hidden variable called "selectedSite".

Finally, I used the CFDIV tag and bound the CFDIV tag's URL variable to a file called showSiteDetail.cfm and passed the bound value of "selectedSite" using a URL variable called "SiteID". The showSiteDetail.cfm file simply re-quiries the Site table based on the URL variable "SiteID" and displays the data in a table. Now every time the user selectes a new record in the CFGRID, the CFDIV tag is refreshed and displays all the available data for the selected record.

Code:

<!--- viewSites.cfm --->
  <cfform style="margin-bottom: 10px;">
     <cfgrid name="SitesGrid" format="HTML" height="200" width="320" rowheaders="no" colHeaders="yes"
                              autoWidth="No" query="getSites" selectMode="single">
          <cfgridcolumn name="site_id" display="No">
          <cfgridcolumn name="site_name" header="Site Name" width="150">
          <cfgridcolumn name="location" header="Location" width="150">
     </cfgrid>
     <cfinput name="selectedSite" bindOnLoad="true" type="hidden" bind="{SitesGrid.site_id}"/>
  </cfform>

  <cfdiv bind="url:SSM_Mod/showSiteDetail.cfm?SiteID={selectedSite}" bindOnLoad="true" />