While I'm waiting for System Mechanic to find all the bits of Fiddler and uninstall it, so that I can reinstall it, I though I would post an note on some CFForms stuff I've been doing recently.
The client wanted to allow users to be able to click on a cell in a grid, the value in that grid to be displayed in an edit box, in much the same way as it does in the likes of Excel, and the user be able to edit that cell either in the cell or in the edit box.
Sounds simple enough. The problem comes when you try to work out which column is currently selected. CFGrid will give you the currently selectedIndex of the row in the grid and all the columns in that row, but not the column of the cell that has been selected.
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 and wait for a cell to be selected. This is the cellFocusIn event.
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 :
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
var datasheet:mx.controls.DataGrid = sheet; // sheet is the name of my cfgrid in the form.
1var datasheet:mx.controls.DataGrid = sheet; // sheet is the name of my cfgrid in the form.
I then create a listener object :
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
var listener:Object = {};
1var listener:Object = {};
And create a function for when I get a "cellFocusIn" event.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
listener.cellFocusIn = function(evt):Void {...}
1listener.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".
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
//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];
1//current grid row +1 for display purposes
2var thisRow = evt.itemIndex+1;
3// shorthand for the whole cfform
4var thisForm = _root.chartsheet;
5// evt.ColumnIndex contains a number which when passed to the method getColumnAt() returns the text name of a column as one of its attributes.
6var thisCol = datasheet.getColumnAt(evt.columnIndex);
7// set the global variables to the selected row and the column name
8_global.currentRow = evt.itemIndex;
9_global.currentCol = thisCol.columnName;
10// change a text formitem to display the current row and column name
11thisForm.thisCellNo = thisCol.columnName+' '+thisRow;
12// set my edit box to be the contents of the currently selected cell.
13if (datasheet.selectedItem[thisCol.columnName] != null)
14 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()
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
datasheet.addEventListener('cellFocusIn',listener);
1datasheet.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:
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
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);
}
1function onFormLoad() {
2 _global.currentCol = '';
3 _global.currentRow = 0;
4
5 var datasheet:mx.controls.DataGrid = sheet;
6 datasheet.hScrollPolicy = 'on';
7
8 // listener for the grid, so that I can tell which cell has been selected and I can populate the edit box.
9 var listener:Object = {};
10
11 listener.cellFocusIn = function(evt):Void {
12 var thisRow = evt.itemIndex+1;
13 var thisForm = _root.chartsheet;
14 var thisCol = datasheet.getColumnAt(evt.columnIndex);
15 _global.currentRow = evt.itemIndex;
16 _global.currentCol = thisCol.columnName;
17 thisForm.thisCellNo = thisCol.columnName+' '+thisRow;
18 if (datasheet.selectedItem[thisCol.columnName] != null)
19 thisForm.thisCell = datasheet.selectedItem[thisCol.columnName];
20 }
21 datasheet.addEventListener('cellFocusIn',listener);
22 }
and the form it belongs to :
Here's the dataUpdate function that is attached to the fieldeditor form item.
ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
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);
}
}
1function dataUpdate() {
2 // updates the grid when the user types into the edit box
3 var datasheet:mx.controls.DataGrid = sheet;
4 var newdata = _root.chartsheet.fieldeditor;
5 if (_global.currentCol != '') {
6 datasheet.editField(_global.currentRow,_global.currentCol,newdata);
7 }
8 }
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. I'll sort out a working example and a download of the source soon.
