This is a migrated thread and some comments may be shown as answers.

Format JSON Date in Grid

3 Answers 1496 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 19 Sep 2012, 08:19 PM
Here is an example of a JSON date passed to the client:

    "date":         {
        "date": 14,
        "day": 2,
        "hours": 0,
        "minutes": 0,
        "month": 7,
        "seconds": 0,
        "time": 1344920400000,
        "timezoneOffset": 300,
        "year": 112
    }

How can I display this date in a Kendo grid as MM/dd/yyyy? I have tried:
$("#resultsGrid").kendoGrid( {
  dataSource: {
            type: "json"
    },
     columns: [
            {
                field: "date",
                title: "Date",
                format: "{0:MM/dd/yyyy}"
}]});


However, the grid displays [object Object].

3 Answers, 1 is accepted

Sort by
0
OnaBai
Top achievements
Rank 2
answered on 20 Sep 2012, 02:54 PM
I'm afraid that your dates are not actually of type "Date". You should do some extra work.
Either you change the server to send it as expected or you should implement a "parse" function (this is one of the ways of converting data) in your datasource schema for converting it into Date.
$("#grid").kendoGrid({
    dataSource:{
        type:"json",
        data:dates,
        schema:{
            parse:function (data) {
                var res = [];
                $.each(data, function (idx, elem) {
                    res.push({ date:new Date(elem.date.time) });
                });
                return res;
            }
        }
    },
    columns:[
        {
            field:"date",
            title:"Date",
            format:"{0:MM/dd/yyyy}"
        }
    ]
});
Here I iterate on each element of the returned array and get the elem.date.time  and convert it into Date.
0
James
Top achievements
Rank 1
answered on 20 Sep 2012, 06:16 PM
Thanks. You're right; the "date" object is the JSON representation of a Java Date object.

A search form exists on the page. When the user clicks submit, an AJAX call to the server is made. The response data is used to populate the grid. The function that you assigned to parse worked well in my handle AJAX response function. This code is executed on the response data prior to calling grid.dataSource.data(response) and grid.refresh(). Thanks again for your help.
0
Basem
Top achievements
Rank 1
answered on 19 Nov 2012, 03:14 AM
Or you can specify the field type directly in the grid column itself:
columns: [
  {
    field: 'StartDate',
    title: 'Starts',
    type: 'date',
    template: '#= kendo.toString(StartDate, "yyyy/MM/dd") #'
  }
]
Ends up being this on the frontend: 2012/11/18
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
OnaBai
Top achievements
Rank 2
James
Top achievements
Rank 1
Basem
Top achievements
Rank 1
Share this question
or