Format JSON Date in Grid

4 posts, 0 answers
  1. James
    James avatar
    11 posts
    Member since:
    Sep 2012

    Posted 19 Sep 2012 Link to this post

    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].

  2. OnaBai
    OnaBai avatar
    55 posts
    Member since:
    Aug 2012

    Posted 20 Sep 2012 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. James
    James avatar
    11 posts
    Member since:
    Sep 2012

    Posted 20 Sep 2012 Link to this post

    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.
  5. Basem
    Basem avatar
    27 posts
    Member since:
    Dec 2010

    Posted 18 Nov 2012 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready