Custom parsers for YUI DataTable



Recently, I was working on a project where the team had created a page with a table of data. Each row in the table represented a recod in a database. Each row was a form and some of the cells could be edited.

We wanted to convert the table to a grid in an onubtrusive manner. We used the YUI DataTable and set the DataSource responseType to an HTML Table.

this.myDS.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;

One of the challenges was in parsing the data out of the cells that contained input boxes.

After some wrangling, we determined an approach. We created custom parsers intended to pull data out of cells with input boxes.

These functions are examples of what we started with. Obviously, you may want to account for things such as spaces between the word "value" and the "=". You'll probbaly eliminate the indexOf entirely.

Our functions are put into their own namespace. For the sake of example, we'll say the namespace is myNS.

First, we created a simple function that can be used as a formatter to pull the value:

YAHOO.myNS.parseValueFromInput = function(s) {
var intLocation = s.indexOf("value=");
if ( intLocation == -1 ) {
s = "";
}
else {
s = s.substring(intLocation+6);
if ( s.substring(0,1) == "\"" ) {
s = s.substring(1);
s = s.substring(0, s.indexOf("\""));
}
else {
s = s.substring(0, s.indexOf(" "));
}
};
return s;
};

This is sufficient for many cases, but we later discovered that column sorting in the grid did not always work as desired, so we added a couple more functions that ensure the proper datatype is returned.

// Parse a String from an input field
YAHOO.myNS.parseStringFromInput = function(s) {
s = YAHOO.myNS.parseValueFromInput(s);
return YAHOO.util.DataSource.parseString(s);
}

// Parse a Number from an input field
YAHOO.myNS.parseNumberFromInput = function(s) {
s = YAHOO.myNS.parseValueFromInput(s);
return YAHOO.util.DataSource.parseNumber(s);
}


We take advantage of the existing YAHOO.util.DataSource parse functions to get the proper return type. This gives us assurance the returned value will work as intended.

Use of these parsers is very straightforward. You use them just as you would one of the built-in parsers.

this.myDS.responseSchema = {
fields: [{key:"orderItemId"},
// YUI parser
{key:"line", parser:YAHOO.util.DataSource.parseNumber},
// Custom parser
{key:"memo", parser:YAHOO.myNS.parseStringFromInput},
// Custom parser
{key:"qty", parser:YAHOO.myNS.parseNumberFromInput},
{key:"label"},
{key:"uom"},
{key:"price"}
]
};


One additional tip; you don't want to create a parseCurrencyFromInput parser as the sorting will not work correctly. If you need currency, parse as a number and use a formatter to present the currency as desired.

2 comments:

  1. Thanks for posting this example and contributing to the wealth of knowledge about YUI. The community is what makes this work.

    ReplyDelete
  2. So helpul. Thanks so much.

    ReplyDelete