dgrid and DateTextBox

Question

I am trying to get a dgrid OnDemandGrid to work with dijit.form.DateTextBox as an editor. The data is fed to OnDemandGrid via JSON. Initially, I was trying to feed dates in the raw format from the MySQL database (e.g. YYYY-MM-DD HH:MM:SS), however when DateTextBox seemed incapable of parsing that string, I tried feeding it just the date (e.g. 2012-11-20). However, this too failed to work.

So, my primary issue is getting DateTextBox to process the date information. A secondary issue is how to deal with the time information, since DateTextBox cannot edit times. My current approach is that when I split the SQL date string, I am feeding dgrid the time as a separate column for a dijit.form.TimeTextBox. This seems like a messy solution, so I'm open to suggestions.

Here's my grid code:

var grid = new declare([OnDemandGrid, Editor, Keyboard, Selection])({
    store: store,
    query: {aid: "1900", action: "objectListGenerator2" },
    bufferRows: 40,
    loadingMessage: "Loading...",
    columns: [
        {field: "oid", label: "Object ID"},
        Editor({field: "startDate", name: "Start Date", editorArgs: { selector: 'date', datePattern: 'yyyy-mm-dd', locale: 'en-us' }}, DateTextBox, "click"),
        Editor({field: "startTime", name: "Start Time"}, TimeTextBox, "click"),
        Editor({field: "endDate", name: "End Date"}, DateTextBox, "click"),
        Editor({field: "endTime", name: "End Time"}, TimeTextBox, "click"),
        {field: "endDateOid", label: "End OID"}
    ],
}, "grid");

Here's a sample string of my JSON source:

[{"content":"2012-11-20 18:12:00","oid":"2112","author":"","endDateOid":"2113","group":"","endTime":"17:59:00","poid":"0","id":null,"startTime":"18:12:00","gmt":"2012-11-22 00:12:43","name":"The Windows 8 Disaster Rolls On","paid":"1900","endDate":"2012-11-21","type":"startDate","startDate":"2012-11-20","cache":"","cachedate":"0000-00-00 00:00:00"},
{"content":"2013-01-01 17:59:00","oid":"2114","author":"","endDateOid":"2115","group":"","endTime":"16:59:00","poid":"0","id":1,"startTime":"17:59:00","gmt":"2012-11-22 00:14:49","name":"The Windows 8 Disaster Rolls On","paid":"1900","endDate":"2013-01-02","type":"startDate","startDate":"2013-01-01","cache":"","cachedate":"0000-00-00 00:00:00"}]

are you creating it programatically or declarative? Can you provide a [fiddle](http://www.jsfiddle.net)? — nozzleman, Nov 22 '12 at 08:08
Programmatically. I'll try to get the code onto Fiddle tomorrow, but for now posted it above. Thanks for your reply! — Timothy R. Butler, Nov 22 '12 at 08:26
one desperate attempt could be changing the `editorArgs.datePattern` from `yyyy-mm-ss` to `yyyy-MM-ss` (according to the required ISO8601/RFC3339 format). Anyway, the [documentation](http://dojotoolkit.org/reference-guide/1.8/dijit/form/DateTextBox.html) say something like that accessing the `value` attribute of the `DateTextBox` needs to be done using native JavaScript `Date`-objects. But i dont think thats the problem here, as the `dgid` Documentation says, that DateTextBoxes can be used as Editors for the Cells (as you know ;) )... difficult :/ — nozzleman, Nov 22 '12 at 08:56
Thanks, @nozzleman! I tried that formatting change, but it seems to be of no avail. However, I've discovered something: if I remove "click" from the column definition (and thus allow the `DateTextBox` to be created immediately), the correct date shows up. Any thoughts on why this might be? Incidentally, I created a Fiddle, but dgrid does not seem to be loading from the CDN version of Dojo that it provides: http://jsfiddle.net/tbutler/v9zaL/1/ . Thanks for your help! — Timothy R. Butler, Nov 22 '12 at 17:33

score 0 · Accepted Answer · answered Jan 03 '13 at 04:05

As I noted in the comments, if I remove "click" from the column definition and thus allow the DateTextBox to be created immediately, the correct date shows up. I'm not sure why the data is not parsed properly if the DateTextBox is added later, but at least creating it immediately yields a workable result.

dgrid and DateTextBox

1 Answers1