james young » datatable

YUI DataTable – Using a dateCellEditor with an asyncSubmitter

James Young — Thu, 30 Jul 2009 03:02:26 +0000

If you are wondering what a dateCellEditor and asyncSubmitter are go check out http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html. See the last_login column? Click on that, you will get a cool calendar that pops up for you to change the date. Pretty handy. That Inline Cell Editing page touches on how to implement that, but it doesn’t cover the actual asyncSubmitter when using a dateCellEditor which is where I could have used a bit more information.

This example uses five files:

index.html – template for the page
javascript.js – javascript that powers the datatable
datatabledata.php – back end process that returns the data for the datatable in JSON format
update.php – back end process that updates the data in the database based on what the user changed

Below is a code example that spells it all out.

index.html


<html>
<head>
    <title>DataTable inline cell editing with dateCellEditor and asyncSubmitter example</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base-min.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/calendar/assets/skins/sam/calendar.css">
</head>
 
<body class='yui-skin-sam'>
    <div id="datatable"></div>
    <script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/calendar/calendar-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/json/json-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
    <script src="javascript.js"></script>
</body>
</html>

javascript.js

var STWPT = YAHOO.namespace("stwpt");
 
STWPT.init = function ()
{
    STWPT.getDataTableData();
};
 
STWPT.getDataTableData = function ()
{
    var submitter = function (callback, newValue)
    {
        var record = this.getRecord();
        var column = this.getColumn();
        var oldValue = this.value;
        var datatable = this.getDataTable();
 
        // send the data to our update page to update the value in the database
        YAHOO.util.Connect.asyncRequest('POST', 'update.php',
        {
            success: function (o)
            {
                var r = YAHOO.lang.JSON.parse(o.responseText);
 
                if (r.replyType === 'date') { r.data = YAHOO.util.DataSource.parseDate(r.data); }
 
                if (r.replyCode === '201') { callback(true, r.data); }
                else
                {
                    alert(r.replyText);
                    callback();
                }
            },
            failure: function (o)
            {
                alert(o.statusText);
                callback();
            },
            scope: this
        },
        'action=cellEdit&column=' + column.key +
                     '&newValue=' + escape(newValue) +
                     '&oldValue=' + escape(oldValue) +
                      '&team_id=' + record.getData('team_id') +
                     '&type=team'
        );
    };
 
    var textEditor = new YAHOO.widget.TextboxCellEditor({ disableBtns: false, asyncSubmitter: submitter });
 
    var myColumnDefs = [
        { key: 'team_id', label: 'Id', hidden: true },
        { key: 'name', label: 'Team Name', sortable: true, resizeable: true, editor: textEditor },
        { key: 'start_date', label: 'Start Date', sortable: true, resizeable: true, editor: new YAHOO.widget.DateCellEditor({ asyncSubmitter: submitter }), formatter: YAHOO.widget.DataTable.formatDate
        { key: 'end_date', label: 'End Date', sortable: true, resizeable: true, editor: new YAHOO.widget.DateCellEditor({ asyncSubmitter: submitter }), formatter: YAHOO.widget.DataTable.formatDate }
    ];
 
    var myDataSource = new YAHOO.util.DataSource('datatabledata.php');
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    myDataSource.connXhrMode = 'queueRequests';
    myDataSource.connMethodPost = true;
    myDataSource.responseSchema = {
        resultsList: 'teams',
        fields: ['team_id', 'name', { key: 'start_date', parser: 'date' }, { key: 'end_date', parser: 'date' }]
    };
 
    var myDataTable = new YAHOO.widget.DataTable('datatable', myColumnDefs, myDataSource);
 
    var onCellClick = function (oArgs) { this.onEventShowCellEditor(oArgs); };
 
    myDataTable.subscribe('cellClickEvent', onCellClick);
 
    var mySuccessHandler = function () {
       this.onDataReturnAppendRows.apply(this, arguments);
    };
 
    var myFailureHandler = function () { alert('FAIL'); };
 
    var callback = {
        success: mySuccessHandler,
        failure: myFailureHandler,
        scope: myDataTable
    };
 
};
 
YAHOO.util.Event.onDOMReady(STWPT.init);

datatabledata.php


// NOTE: if this wasn't an example, this would be done in CodeIgniter
mysql_pconnect('localhost', 'msyql_username', 'mysql_password');
mysql_select_db('mysql_database_name');
 
$user_id = 1;      // hardcoded for this example
$facility_id = 1;  // hardcoded for this example
 
$teams = array();
 
$sql = "SELECT t.id AS team_id,
               t.name,
               t.datatable_key,
               DATE_FORMAT(t.start_date, '%m/%d/%Y') AS start_date,
               DATE_FORMAT(t.end_date, '%m/%d/%Y') AS end_date
          FROM teams AS t,
               user_facility_teams AS uft
         WHERE uft.user_id = {$user_id}
           AND uft.facility_id = {$facility_id}
           AND t.id = uft.team_id
";
 
$result = mysql_query($sql);
 
while ($row = mysql_fetch_array($result))
{
    array_push($teams, $row);
}
 
$response = '{"teams" : ';
$response .= json_encode($teams);
$response .= '}';
 
echo $response;

update.php


// NOTE: if this wasn't an example, this would be done in CodeIgniter
mysql_pconnect('localhost', 'msyql_username', 'mysql_password');
mysql_select_db('mysql_database_name');
 
$user_id = 1;      // hardcoded for this example
$facility_id = 1;  // hardcoded for this example
 
$data['column'] = $_POST['column'];
$data['value'] = trim($_POST['newValue']);
$data['team_id'] = $_POST['team_id'];
 
 
$json_response_value = $data['value'];
 
foreach ($data as $key => $value) { $data[$key] = mysql_real_escape_string($data[$key]); }
 
// if we are changing the 'name' we must also update the key used for datatable column definitions
$set_datatable_key = '';
if ($data['column'] == 'name')
{
    $datatable_key = preg_replace('/[ -]/', '_', $data['value']);
    $datatable_key = preg_replace('/%/', 'percent', $datatable_key);
    $datatable_key = strtolower($datatable_key);
 
    $set_datatable_key = ", datatable_key = '{$datatable_key}'";
 
    $sql = "UPDATE teams
               SET {$data['column']} = '{$data['value']}' {$set_datatable_key}
             WHERE id = {$data['team_id']}
    ";
 
    $replyType = 'string';
}
 
if ($data['column'] == 'start_date' || $data['column'] == 'end_date')
{
    $sql = "UPDATE teams
               SET {$data['column']} = STR_TO_DATE('{$data['value']}', '%a %b %d %Y')
             WHERE id = {$data['team_id']}
    ";
 
    $replyType = 'date';
}
 
$result = mysql_query($sql);
 
$response = array('replyCode' => '201', 'replyText' => 'Ok', 'replyType' => $replyType, 'data' => $json_response_value);
 
echo json_encode($response);

YUI Datatable – Custom Parser Example

James Young — Sun, 24 May 2009 01:40:03 +0000

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). In retrospect, I should convert it to the inches value, but this example isn’t doing that.

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

YUI Datatable – Custom Validator Example

James Young — Sun, 24 May 2009 01:37:12 +0000

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 for this example.

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

YUI Datatable – Custom Formatter Example

James Young — Sun, 24 May 2009 01:29:35 +0000

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