We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now


CFGRID - HREF for each column?

jeffmace asked
Medium Priority
Last Modified: 2013-12-24
I saw this question asked before (http://www.experts-exchange.com/Web/WebDevSoftware/ColdFusion/Q_21396380.html?query=cfgrid&topics=112)

I just don't really see the answer.  How does this work for each column if each column has its own unique link.  Can someone display code to show how it works to have a different link for each column?
Watch Question

It might be possible, but its not that simple.....

Where do you expect users to click and a link be opened?
Is there anywhere in the grid that would not open a link?
What do you need to be passed from the grid through to the the link?


i would like to put icons in columns.  One column might be to print out a report for a user, another column may be to send an email confirmation.  I do have other ideas  on how this can be accomplished, but I was hoping to test this solution to see how it works.

For a different project, I was hopking to to have music titles.  One column would be to play a sample at real low quality, in the next column it would be for high quality, etc.
So do you have multiple lines in your grid along side of which you want to have icons for "print report" and "send email"?  Is that right?

If that is right, do you use the grid other than as a way to display your record set?  

Sorry for all the questions. The reason I ask is because of the way I see this going.  If you don't use any of the other functions of a cfgrid, then it will probably be a lot easier to use a repeater with a query and putting function calls on your buttons/icons from the query in the repeater.

If you need the grid then you will need to add a listener to your grid, find out which row and column your user has selected and then populate a getURL() or make a call to a cfc with this information.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts


Hmm, basically I think you are pushing me in the other direction I was going in and I think would work better anyhow.  I guess I was just hoping to see if this can be done with the grid and hopefully it can.   thanks for your insight.. I believe I have a better direction in which to go in now.


If you still have ideas on how this can be done and wish to share some code, I am sure people would like to see it.

I have a flash form that I'm working on that has a grid with columns a to z and 1-50 rows.  Above the grid is a text box that, when a user selects a cell in the grid, can be used to enter data in much the same way as you can in Excel or any other spreadsheet application.

In order to find out what is in the currently selected cell I had to add an event listener to the grid when the form is loaded.
I have a function called onFormLoad() {...} which I call via cfform's onload attribute.  In this function I have 2 global variables, _global.currentCol and _global.currentRow.  I default these to '' and 0 respectively.

I then create a DataGrid in my onLoadForum that point to my cfgrid :
var datasheet:mx.controls.DataGrid = sheet; // sheet is the name of my cfgrid in the form.

I then create a listener object :
var listener:Object = {};

And create a function for when I get a "cellFocusIn" event.
listener.cellFocusIn = function(evt):Void {...}

This event has a number of attributes and functions, but I'm really only interested in the column related attributes and functions, specifically columnIndex and getColumnAt().

In my cellFocusIn function I get the row and column details and put them into my global variables and then use that information to file my "edit box".

//current grid row +1 for display purposes
var thisRow = evt.itemIndex+1;
// shorthand for the whole cfform
var thisForm = _root.chartsheet;
// evt.ColumnIndex contains a number which when passed to the method getColumnAt() returns the text name of a column as one of its attributes.
var thisCol = datasheet.getColumnAt(evt.columnIndex);
// set the global variables to the selected row and the column name
_global.currentRow = evt.itemIndex;
_global.currentCol = thisCol.columnName;
// change a text formitem to display the current row and column name
thisForm.thisCellNo = thisCol.columnName+' '+thisRow;
// set my edit box to be the contents of the currently selected cell.
if (datasheet.selectedItem[thisCol.columnName] != null)
     thisForm.thisCell = datasheet.selectedItem[thisCol.columnName];

The last thing to do is to attach this listener to the grid.  This is done using the method addEventListener()

So now when a user selects a cell, the column name and row number are stored in the global variables, a display of row and column is done and an edit box is filled with the content of the selected cell.

Here is the complete onload function

          function onFormLoad() {
            _global.currentCol = '';
            _global.currentRow = 0;

            var datasheet:mx.controls.DataGrid = sheet;
            datasheet.hScrollPolicy = 'on';
            // listener for the grid, so that I can tell which cell has been selected and I can populate the edit box.
            var listener:Object = {};
            listener.cellFocusIn = function(evt):Void {
                  var thisRow = evt.itemIndex+1;
                  var thisForm = _root.chartsheet;
                  var thisCol = datasheet.getColumnAt(evt.columnIndex);
                  _global.currentRow = evt.itemIndex;
                  _global.currentCol = thisCol.columnName;
                     thisForm.thisCellNo = thisCol.columnName+' '+thisRow;
                  if (datasheet.selectedItem[thisCol.columnName] != null)
                        thisForm.thisCell = datasheet.selectedItem[thisCol.columnName];

and the form it belongs to :

<cfform name="chartsheet" action="chart.cfm" method="post" preloader="no" format="flash" width="760" skin="halosilver" type="flash" onload="onFormLoad()">
      <cfformgroup type="vertical" width="590">
            <cfformgroup type="horizontal">
                  <cfinput type="hidden" name="thisCellNo" value="">
                  <cfinput type="hidden" name="thisCell" value="">
                  <cfformitem type="text" width="30" bind="{chartsheet.thisCellNo}" style="font-weight:bold"></cfformitem>
                  <cfinput type="text" name="fieldeditor" label="fx" bind="{chartsheet.thisCell}" onchange="dataUpdate()">
            <cfgrid name="sheet" width="570" height="215" query="variables.dataSheet" appendkey="yes" griddataalign="left" gridlines="yes" rowheaders="yes" rowheaderbold="yes" rowheaderalign="center" colheaderalign="center" colheaderbold="yes" selectmode="edit" maxrows="100" enabled="yes" visible="yes" format="flash" sort="no" />

Here's the dataUpdate function that is attached to the fieldeditor form item.

      function dataUpdate() {
            // updates the grid when the user types into the edit box
            var datasheet:mx.controls.DataGrid = sheet;
            var newdata = _root.chartsheet.fieldeditor;
            if (_global.currentCol != '') {

I have to be honest, I have chopped some of the form content out in order to protect the innocent ;) and I haven't tested that the form displays correctly, but the onFormLoad() function is unchanged.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.