Knockout-Kendo.js Grid date formatting

Question

I am using Knockout.js integration with Kendo UI Grid (http://rniemeyer.github.io/knockout-kendo/web/Grid.html).

In my JSON I am returning a date which shows up as Oct 06 2015, 03:54 PM -04:00.

I have specified the column type and the format as format: "{0:MM/dd/yyyy HH:mm tt}" but it seems it is getting completely ignored.

The following is the kendogrid binding definition:

<div data-bind="kendoGrid: {
  data: projectSubmissions,
  dataSource: {
    schema: {
      model: {
        fields: {
          SubmissionId: { type: 'number' } ,
          FormName: { type: 'string' } ,
          IdVersion: { type: 'string' },
          SubmittedDateFormatted: { type: 'string'},
          SubmittedDate: { type: 'date'},
        }
      }
    }
  },
  groupable: false,
  scrollable: false,
  filterable: {
    extra: false,
    operators: {
      string: {
          startswith: 'Starts with',
          eq: 'Is equal to',
          neq: 'Is not equal to'
      }
    }
  },
  sortable: true,
  pageable: { pageSize: 10 },
  columns: [
    {
      field: 'SubmissionId',
      title: 'No.',
      width: 70,
    }
    ,{ field: 'FormName', title: 'Form', width:120 }
    ,{ field: 'IdVersion', title: 'Id/Version', width:100}
    ,{
      field: 'SubmittedDate',
      filterable: true,
      title: 'Submitted Date',
      format: '{0:MM/dd/yyyy HH:mm tt}',
      width: 120
    }
    ,{ field: 'Inspector', title: 'Inspector', filterable: true, width:140 }
    ,{ field: 'CellNo', title: 'Cell No.', width:100, filterable: false }
  ]
}"></div>

Answer 1

Your problem is not with the format setting. This controls how to format a value for display. Your problem is with the value itself. For the format to succeed, the value needs to be a Date object to begin with, and as it is now, it's a string.

You could use a mapping object (as shown here) to create a Date object during the mapping process:

var mapping = {
  SubmittedDate: {
    create: function(options) {
              return new Date(options.data);
    }
};
ko.mapping.fromJS(data, mapping, this);