b1tch2c0d3

YUI Datatable – Custom Formatter Example

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

Leave a Comment so far
Leave a comment