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 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);

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);

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);