kendo grid with java.util.Date doesn't work

Question

I have a kendo grid with data being populated using ajax request.

the model returned from the controller has a java.util.Date field called someDate and the returned data in json for that field is like

{"total":3,
"data":[
{"someDate":1433116800000,"someValue":111.00},
{"someDate":1444116800000,"someValue":222.00},
{"someDate":1455116800000,"someValue":333.00}]}

The dataSouce is as below:

    "dataSource": {
        "schema": {
            "total":"total",
            "data":"data"
        },
        "transport":{
            "parameterMap":function parameterMap(options, operation) {
                if(operation==="read"){
                    return JSON.stringify(options);
                } else {
                    return JSON.stringify(options.models);
                }
            },
            "read":{
                "dataType":"json",
                "contentType":"application/json",
                "type":"POST",
                url : "${ajaxGetData}&param="+someParam
            }
        }

columns in the grid is like this

"columns":
    [{
        "field":"someValue",
        "title":"Some Value",
        "type":"numeric"
    },{
        "field":"someDate",
        "title":"Date",
        "type":"date",
        format:"{0:yyyy-MM-dd hh:mm:ss tt}"
    }

The issue is that the date and time is not displayed properly. If I use a template, I have to remove the "type":"date" for it to work however the filters don't work properly.

template:'#= kendo.toString( new Date(someDate), "yyyy/MM/dd hh:mm:ss tt") #'

How to show Date in a specific format "yyyy/MM/dd hh:mm:ss tt".

This JS Fiddle might help (but doesn't have the exact json structure with data and total)

Answer 1

Would it be possible to use ISO 8601 format for you dates, if that's possible the type date in the model definition should work (if you're using GSON library take a look here)

edit

According to the comments you can make use of the schema.parse, a sample of this using your provided fiddle will look like this:

var grid = $("#grid").kendoGrid({
    dataSource: {
        data: createRandomData(10),
        schema: {
            model: {
                fields: {
                    FirstName: { type: "string" },
                    LastName: { type: "string" },
                    City: { type: "string" },
                    Title: { type: "string" },
                    BirthDate: { type: "date" },
                    Age: { type: "number" }
                }
            },
            parse: function(response) {
                  var products = [];
                  for (var i = 0; i < response.length; i++) {
                      response[i].BirthDate = new Date(response[i].BirthDate);
                  }
                  return response;
                }
        },
        pageSize: 10
    },
    height: 500,
    scrollable: true,
    sortable: true,
    selectable: true,
    change:onChangeSelection,            
    filterable: true,
    pageable: true,
    columns: [
        {
            field: "FirstName",
            title: "First Name"
        },
        {
            field: "LastName",
            title: "Last Name"
        },
        {
            field: "City"
        },
        {
            field: "Title"
        },
        {
            field: "BirthDate",
            title: "Birth Date",
            //template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
        },
        {
            field: "Age"
        }
    ]
}).data("kendoGrid");

I hope it works.