title: How to intelligently format datetime in SlickGrid?
body: <p>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:</p>
  
  <pre><code>[{
          "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
      }]
  </code></pre>
  
  <p>This is how I load the data with AJAX</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
      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
  
  &lt;/script&gt;
  
  
  
  
  
  
  
  
  
      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 }
      ];
  </code></pre>
  
  <p>And this are my options:</p>
  
  <pre><code>   var options = {
          editable: false,
          enableAddRow: false,
          enableCellNavigation: true
      };
  
      GetNavigationContent();
  </code></pre>
  
  <p>This is the ajax-handler that generates the test-data:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>The problem is, this renders like this (see the date columns):
  <img src="https://i.stack.imgur.com/Hs2yA.png" alt="Slickgrid"></p>
  
  <p>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 /></p>