Displaying dates with ToGridData

Jun 10, 2011 at 4:17 PM


I am having trouble displaying dates that are stored in sql, when I pass the model to ToGridData the dates come back as: /Date(###)/.

In the view I've set the CellType:  cs.Add(x => x.Updated).SetCellType(GridCellType.DATE) the view is the same. I also tried addding SetFormatter("\'date'") in which case I get: NaN/Nan/Nan/ in the field.

I can get the date to display properly if I build the json myself converting the date to a string.

I must be missing something simple, any ideas?



Jun 12, 2011 at 9:19 AM
Edited Jun 12, 2011 at 9:19 AM


Your code is actually ok, the problem is in the default JavaScriptSerializer used by MVC which doesnt serialize DateTime objects correctly.

You can fix this by either changing the column to a string representation of the date (still using the formatter & CellType.DATE), or implementing your own JavascriptTypeConverter.

This is very inconvenient and I'm hoping to commit a work-around for this in a few days.

Jun 12, 2011 at 6:46 PM

I've comitted a fix that should take care of all the dirty DateTime handling, let me know if it's ok now.

Jun 13, 2011 at 6:00 PM


It's starting to work. I do get a date back. How do I go about customizing the format? I am getting d/m/yyyy. I would like d/mmm/yyyy hh:mm.

I've tried:

.SetFormatter("Date"); - which gives the current date/time

.SetFormatter("'Date'"); - which gives the unserialized date

.SetCustomAttributes("formatoptions: 'm/d/Y hh:mm'");  which gives d/m/y

 I even tried setting newFormat in mvc.controls.manager.js - but this seems less than ideal.


Thanks again for the quick update


Jun 13, 2011 at 6:22 PM
Edited Jun 13, 2011 at 6:27 PM

I'm working on a redesign for all the formatting shabang to make it a bit more natural and strongly-typed, though for an ad-hoc solution you can use the CustomAttributes, e.g:

.SetColumns<MVC.Controls.Examples.Models.Store>(cs =>
cs.Add(x => x.Created).SetCellType(GridCellType.DATE).SetCustomAttributes("formatoptions:{newformat: 'd/m/Y hh:MM'}");

(Currently not all date formats are supported, see the DateFormat overload in mvc.controls.manager.js for details or contact me for additional impl details)

Jun 13, 2011 at 6:42 PM

That works. I'm looking forward to your redesign.

I would like to get full month, I need to display a date with an obvious format that will not confuse Americans or Europeans..


Thanks again for the timely help

Dec 6, 2011 at 1:34 PM

I've tried this:

cs.Add(x => x.Date).SetCellType(GridCellType.DATE).SetCustomAttributes("formatoptions:{newformat: 'd/m/Y'}");

But the only thing that shows in the cell is something like this /Date(1172703600000)/

Any ideas on what to do?


Dec 6, 2011 at 1:48 PM

Are you using the latest build?

Dec 6, 2011 at 7:57 PM
Edited Dec 6, 2011 at 8:02 PM

Yes it's the latest recommended download.

But I checked the mvc.controls.manager.js file and couldnt find any DateFormat.

Dec 6, 2011 at 9:42 PM

I meant the latest code comiitted (http://mvcjquerycontrols.codeplex.com/SourceControl/list/changesets the Latest Version link on the right)

Dec 7, 2011 at 6:59 AM
Edited Dec 7, 2011 at 1:17 PM

Thanks, I downloaded the latest version and now it's working.

Maybe you could help with another question too? I'm trying to make a property not editable but still displayed in the edit form, just like a normal label.

Another thing I seem to be unable to figure out is how to concatenate two properties and display them in a cell.

Thank you so much for the help.

Mar 23, 2012 at 1:39 PM
Edited Mar 27, 2012 at 1:21 PM

The formatting does not work if the data source includes null dates.  The "Loading" text is displayed but the control fails to get any further.  A JavaScript exception is thrown - "Uncaught TypeError: Cannot read property 'constructor' of null".

I can make the problem go away by setting hidden for a primary key column to false, but it reappears when I show another page of results.

EDIT: Sorry, my mistake.  Applied the latest version again and it's fine.