How to intelligently format datetime in SlickGrid?
===

Question:
I'm changing a ASP.NET gridview to SlickGrid.<br />
So far, it works fine, I'm just having a tiny bit of trouble with date formatting.
<br /><br /><br />
My JSON-serialized test-data looks like this:

    [{
            "title" : "Task 1",        
            "duration" : "5 days",        
            "percentComplete" : 47,        
            "start" : "\/Date(1230764400000)\/",        
            "finish" : "\/Date(1241128800000)\/",        
            "effortDriven" : false
        },
        {
            "title" : "Task 2",        
            "duration" : "5 days",        
            "percentComplete" : 41,        
            "start" : "\/Date(1230764400000)\/",        
            "finish" : "\/Date(1241128800000)\/",        
            "effortDriven" : false
        },
        {
            "title" : "Task 3",        
            "duration" : "5 days",        
            "percentComplete" : 42,        
            "start" : "\/Date(1230764400000)\/",        
            "finish" : "\/Date(1241128800000)\/",        
            "effortDriven" : true
        },
    
    
    
        {
            "title" : "Task 100",        
            "duration" : "5 days",        
            "percentComplete" : 63,        
            "start" : "\/Date(1230764400000)\/",        
            "finish" : "\/Date(1241128800000)\/",        
            "effortDriven" : false
        }]


This is how I load the data with AJAX


    <script type="text/javascript" language="javascript">
        Date.prototype.getTicksUTC = function () {
            return Date.parse(this.toUTCString()) + this.getUTCMilliseconds();
        } // End Function getTicksUTC
    
        function GetNavigationContent() 
        {
            var filter = "nofilter" + new Date().getTicksUTC();
    
            $.getJSON('/ajax/NavigationContent.ashx?filter=' + filter, function (data) {
                grid = new Slick.Grid($("#myGrid"), data, columns, options);
    
                grid.onSort = function (sortCol, sortAsc) 
                {
                    sortdir = sortAsc ? 1 : -1;
                    sortcol = sortCol.field;
    
                    if (sortAsc == true)
                        data.sort(compare);
                    else
                        data.reverse(compare);
    
                    grid.render();
                }; // End Event onSort
    
            }); // End Function getJSON
    
        } // End Function GetNavigationContent
    
    </script>









        var columns = [
             { id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title" }
            , { id: "duration", name: "Duration", field: "duration" }
            , { id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar }
            , { id: "start", name: "Start", field: "start", minWidth: 60 }
            , { id: "finish", name: "Finish", field: "finish", minWidth: 60 }
            , { id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark }
        ];

And this are my options:
 

       var options = {
            editable: false,
            enableAddRow: false,
            enableCellNavigation: true
        };
    
        GetNavigationContent();


This is the ajax-handler that generates the test-data:

    Imports System.Web
    Imports System.Web.Services
    
    
    Public Class NavigationContent
        Implements System.Web.IHttpHandler, System.Web.SessionState.IRequiresSessionState
    
    
        Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    
            context.Response.ContentType = "application/json"
           
            Dim lsNavigationContent As New List(Of cNavigationRow)
    
            Dim seed As Random = New Random
            Dim nrThisNavigationRow As cNavigationRow = Nothing
            For i As Integer = 1 To 100 Step 1
                nrThisNavigationRow = New cNavigationRow
    
                nrThisNavigationRow.title = "Task " + i.ToString()
                nrThisNavigationRow.percentComplete = seed.Next(0, 100)
                nrThisNavigationRow.effortDriven = DirectCast(IIf(i Mod 3 = 0, True, False), Boolean)
    
                lsNavigationContent.Add(nrThisNavigationRow)
            Next
    
            Dim strJson As String = Tools.JSON.JsonHelper.Serialize(lsNavigationContent, False)
            context.Response.Write(strJson)
        End Sub
    
    
        Public Class cNavigationRow
            Public title As String = "Task 499"
            Public duration As String = "5 days"
            Public percentComplete As Integer = 9
            Public start As DateTime = System.DateTime.Parse("01.01.2009", New System.Globalization.CultureInfo("de-CH", False))
            Public finish As DateTime = System.DateTime.Parse("01.05.2009", New System.Globalization.CultureInfo("de-CH", False))
            Public effortDriven As Boolean = False
        End Class
    
    
        ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
            Get
                Return False
            End Get
        End Property
    
    
    End Class

The problem is, this renders like this (see the date columns):
![Slickgrid][1]


How do I best format the date columns ?<br />
Inputting it as already formatted string, or is there a better way, supplying the language and/or formatcode ?<br />
If I put it there as string, how will it be sorted ?<br />


  [1]: http://i.stack.imgur.com/Hs2yA.png