asked on

CFGRID - HREF for each column?

I saw this question asked before (https://www.experts-exchange.com/questions/21396380/CFGRID-mx7-href-for-each-column.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?

Mr_Nil

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?

jeffmace

ASKER

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.

ASKER CERTIFIED SOLUTION

Mr_Nil

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jeffmace

ASKER

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.

Thanks,
Jeff

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.

Mr_Nil

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()
datasheet.addEventListener('cellFocusIn',listener);

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];
            }
            datasheet.addEventListener('cellFocusIn',listener);
      }

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()">
            </cfformgroup>
            <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" />
      </cfformgroup>
</cfform>

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 != '') {
                  datasheet.editField(_global.currentRow,_global.currentCol,newdata);
            }
      }

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.