There are a few tutorials out there going into detail about the Flex DataGrid control. They are not easy to find and when you do find them, odds are they were written about a previous version of Flex.
Flex 1.x
- Flex 1.0: Sample code for printing from a DataGrid
- How to set relative column widths with the Flex dataGrid component – Doesn’t specifically say 1.0, but it was published in 2005
Flex 2.x
- Switch on the Code: Flex Friday Feature – Datagrid Component
- Adobe® Flex™ 2.01 Language Reference: DataGrid
Flex 3.x
- Flex 3 Getting Started – DataGrid
- Adobe® Flex™ 3.3 Language Reference: DataGrid
- Understanding Flex itemEditors – Part 1: Inline itemEditors
- Understanding Flex itemEditors – Part 2: Editing events and complex editors
More to come…
Release History
- Flex 1.0 – March 2004
- Flex 1.5 – October 2004
- Flex 2.0 (Alpha) – October 2005
- Flex 2.0 Beta 1 – February 2006
- Flex 2.0 Beta 2 – March 2006
- Flex 2.0 Beta 3 – May 2006
- Flex 2.0 Final- June 28, 2006
- Flex 2.0.1 – January 5, 2007
- Flex 3.0 Beta 1 – June 11, 2007
- Flex 3.0 Beta 2 – October 1, 2007
- Flex 3.0 Beta 3 – December 12, 2007
- Flex 3.0 – February 25, 2008
- Flex 3.1 – August 15, 2008
- Flex 3.2 – November 17, 2008
- Flex 3.3 – March 4, 2009
For entry, with my validator, I am validating that no matter what a user types in for a height, I convert it to a float to store in the database (5.10).
For display, with my formatter, I am standardizing the format to display as a proper height (5′ 10″).
All that is left is to get the column sort to not think somone that is 22′ tall is shorter than someone that is 3′ tall. For numbers to sort numerically, the type must be a Number, not a String. This could be easily accomplished with YAHOO.widget.DataTable.formatNumber, but I was hoping to be able to fix my problem of 5.10 changing to 5.1 here. I was not able to do that, as you can see by the commented out line below, so I took care of it in the validator (kinda).
Due to the lack of me finding, quickly, an example of a custom parser, I am posting this anyway, even though it is not really needed.
The parser is an object property defined in the array of objects defining the fields for the datasources responseSchema (assuming JSON).
STWPT.parseHeight = function (oData)
{
oData = parseFloat(oData); // convert to number (float)
// force decimal precision (5.1 > 5.10)
// this converts it back to a string - argh!
// oData = oData.toFixed(2);
return oData;
}
The following is a snippet out of a larger script that shows just the pieces that connect the datatable creation to the custom parser shown above.
var myDataSource = new YAHOO.util.DataSource('/path/to/datasource');
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.connMethodPost = true;
myDataSource.responseSchema = {
resultsList: 'athletes',
fields: [
{ key: 'first_name', parser: 'string' },
{ key: 'last_name', parser: 'string' },
{ key: 'height', parser: STWPT.parseHeight }
]
};
var myDataTable = new YAHOO.widget.DataTable('athletes-datatable', myColumnDefs, myDataSource);
This is the validator I am using to insure that a height (or float) was entered (5’10″, 5′ 10″, 5.10 5 10), and that text (tall, short) was not entered and covert a valid non-float value entered (5’10″, 5′ 10″, 5 10) to a float (5.10), which is how I want to store the value in the database.
Now that we have a custom validator created, it would be helpful to know where to call it from. A validator is an object parameter to the object that is sent to a textboxCellEditor.
The textboxCellEditor is an object parameter to the object that defines the column, in the array of objects that is sent to the datatable constructor.
STWPT.validateHeight = function (oData)
{
var pattern; // regexp pattern holder
// heightFormat is expected to be a decimal number for height
// add a space if none was provided (5'10")
// 5'10" -> 5' 10 - note the trailing non-digit characters are dropped
pattern = /'(\d+)/g
if (pattern.test(oData)) { oData = oData.replace(pattern, " $1"); }
// turn a space into a decimal - 5 10, 5' 10" -> 5.10, 5' 10"
pattern = / /g;
if (pattern.test(oData)) { oData = oData.replace(pattern, '.'); }
// remove all single and double quotes - 5' 10", 5'.10" -> 5.10
pattern = /["']/g
if (pattern.test(oData)) { oData = oData.replace(pattern, ''); }
// enforce x.0x format - 5' 1" -> 5' 01" -> 5.01
pattern = /\.([1-9])$/
if (pattern.test(oData)) { oData = oData.replace(pattern, '.0$1')};
// at this point we should have a float, which should eval > 0
if (oData > 0) { return oData; }
// validation only succeeds if a value is returned
}
The following is a snippet out of a larger script that shows just the pieces that connect the datatable creation to the custom validator shown above.
var heightEditor = new YAHOO.widget.TextboxCellEditor({
disableBtns: false,
asyncSubmitter: submitter,
validator: STWPT.validateHeight
});
var myColumnDefs = [{
key: 'height',
label: 'Height',
sortable: true,
resizeable: true,
editor: heightEditor,
formatter: STWPT.formatHeight
}];
var myDataTable = new YAHOO.widget.DataTable('athletes-datatable', myColumnDefs, myDataSource);
I needed to create a custom formatter for a datatable that contained a cell for an individuals height. The height is stored in the database as a float. 5′ 10″ would be in the database as 5.10. We want to display 5′ 10″, this is where our custom formatter comes in. In retrospect I should be storing the height as inches and converting it to feet as needed.
The formatter is an object property to the column definition in the array of objects that is sent to the datable when it is created.
STWPT.formatHeight = function (elCell, oRecord, oColumn, oData)
{
oData = oData.toString(); // oData must be a string
var part = oData.split('.'); // splitting the float on the decimal
// take care of undefined - set it to 0
// if we have an int (like 5, not 5.1), part[1] is 'undefined'
part[1] = part[1] ? part[1] : 0;
// values like 5.10 are changed to 5.1
// if textboxCellEditor is used, 5.1 will show as the value (not 5.10)
if (part[1] == '1') { part[1] = '10'; }
elCell.innerHTML = part[0] + '\' ' + part[1] + '"';
}
The following is a snippet out of a larger script that shows just the pieces that connect the datatable creation to the custom formatter shown above.
var myColumnDefs = [{
key: 'height',
label: 'Height',
sortable: true,
resizeable: true,
editor: heightEditor,
formatter: STWPT.formatHeight
}];
var myDataTable = new YAHOO.widget.DataTable('athletes-datatable', myColumnDefs, myDataSource);
