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. In retrospect I should be storing the height as inches and converting it to feet as needed. We want to display 5′ 10″, this is where our custom formatter comes in.
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);