Using data formats with JS array

When the data comes from XML or CSV file - quite often it is necessary to transform it from the 'transport' format to some nicer visual form, say from ISO8601 date to more readable 'dd-mmm-yy'. For this purpose you can use the set of formatting classes -

AW.Formats.String
AW.Formats.Number
AW.Formats.Date

Those classes provide dataToText() and textToData() methods which are used to transform data from a 'transport' format to readable cell text (or, more precisely, html).

Another pair of methods - dataToValue() and valueToData() - provide transformations to the value type (String, Number or Date as opposed to readable text) which you can process programmatically, i.e. add, compare, sort (currently used for sorting).


The same approach could be used with JS array, however when the JS array is produced by the server-side script you can already pre-format the data for display and avoid dataToText() client-side transformation.

In this case the formatting classes might still be necessary for the correct sorting, but as the data is already in text form - the sorting procedure will call textToValue() method (instead of dataToValue()).

var myText = [
    ["aaa", "111", "2-21-2005"],
    ["bbb", "22", "11-1-2005"]
];

var string = new AW.Formats.String;
var number = new AW.Formats.Number;
var date = new AW.Formats.Date;

var obj = new AW.UI.Grid;
obj.setCellText(myText);
obj.setCellFormat([string, number, date]);

obj.setColumnCount(3);
obj.setRowCount(2);

document.write(obj);

However if you for some reason want to send the data in some intermediary form and process it on the client - you can do it with JS array too, just using setCellData() method instead of setCellText() together with formatting classes:

var myData = [
    ["aaa", "111", "2-21-2005"],
    ["bbb", "22", "11-1-2005"]
];

var string = new AW.Formats.String;
var number = new AW.Formats.Number;
var date = new AW.Formats.Date;

var obj = new AW.UI.Grid;
obj.setCellData(myData);
obj.setCellFormat([string, number, date]);

obj.setColumnCount(3);
obj.setRowCount(2);

document.write(obj);

To summarize - the grid uses cell text for display, cell value for sorting and cell data if the data comes in some intermediary format and formatting classes provide methods which transform data to text, value or back.

I would like to display a column of timestamps in the grid in the format:

"18:23 14-Feb-2006"

I can produce this server side as text in this format and deliver it into the grid as text (setCellText) via a js array.

But then how do I (can I?) use the above methods to load this into the grid, preserving its 'value' for sorting purposes?

There are several posts (e.g. this) explaining how to handle dates, but I haven't seen anything when time is involved as well i.e. timestamps.

Any help would be greatly appreciated.

Will

Will,

it should be enough to set correct date format -

date.setTextFormat("hh:mm dd-mmm-yyyy");

complete example -

var myText = [
    ["aaa", "111", "18:23 14-Feb-2006"],
    ["bbb", "22", "23:15 11-Jan-2005"]
];

var string = new AW.Formats.String;
var number = new AW.Formats.Number;
var date = new AW.Formats.Date;

date.setTextFormat("hh:mm dd-mmm-yyyy");

var obj = new AW.UI.Grid;
obj.setCellText(myText);
obj.setCellFormat([string, number, date]);

obj.setColumnCount(3);
obj.setRowCount(2);

document.write(obj);

Alex
Just what I needed...thanks a lot.
Will

Does the date in the javascript array need to be in the format 'mm-dd-yyyy'?

My dates are coming from the database in 'yyyy-mm-dd' format.
When I try to use the cell format methods to make it 'mm-dd-yyyy', I run into problems.

Joel,

While I'm sure you figured it out, I'll post this so others can read it.

I can get my formatting from MySQL into my grid with date formats like 'yyyy-mmm-dd'.... note the three (3) m's, not two. Two m's signifies the minutes token... not month.

=)

wow was I wrong... even in my own code I use 'yyyy-mm-dd'... note the two m's instead of three.... three is the month in abbrev form (Feb, Apr, etc)

the issue I had when starting was that the MySQL database output was yyyy-mm-dd.... putting that directly isn't a good idea and gives problems, but if you change it to what a Date() object in JS looks like, I did mm-dd-yyyy, then your format in the cell being 'yyyy-mm-dd' won't cause problems.

Sorry for the brain-fart on my part.... i feel dumb for my previous post.... =)