[Solved] Best way : Grid + JSON + Date

[Gert]

Hello,

I'm struggling with dates correct.

What I have :

1) JSON generated by PHP
2) Kendo UI Grid

What I need :

1) display date in custom format
2) grid has to be sortable on the date-field
3) I have to manually add a new record in the datasource with a new Date(jQuery)

What is the best way :
1) what is the best way to put a date in  a JSON file ?
    that is what I have now, a PHP datetime-object ->  creatiedatum":{"date":"2015-01-29 15:38:55","timezone_type":3,"timezone":"Europe\/Brussels"}
2) How do I display the date as 'dd-MM-yyyy' in the grid and keep it sortable !
3) How do I add a new record by code in jQuery
    This is what I have now, works fine besides the date-field (???????)
  

$("#grid").data("kendoGrid").dataSource.insert(0, {

              id: 99,

              done: false,

              title: 'computer',

              description: "a new computer for IT-Dep.",

              creationDate: ??????????


               

          });

Thx,
Gert

[Coty]

Hi Gert, I can't help you with your entire issue, but to display a date in a specific format in a grid  you need to tell the grid the datatype of the date in the schema, and then supply a format to the desired date column.  Here is an example that I use.  You want to pay attention to the MeetingDate field.  I only specified the meeting date field in my schema because that's the only column that needs it for the functionality I wanted.  

 

$("#grid").kendoGrid({
                               dataSource: {
                                   data: myMeetings,
                                   schema: {
                                       model: {
                                           fields: {
                                               MeetingDate: { type: "date" }
                                           }
                                       }
                                   },
                               },
                               groupable: true,
                               sortable: true,
                               filterable: true,
                               pageable: {
                                   refresh: false,
                                   pageSizes: [10, 20, 50, 100],
                                   buttonCount: 5,
                                   pageSize: 20
                               },
                               columns: [{
                                   field: "MeetingName",
                                   title: "Name",
                                   template: "<a href='/${URLBase}/meetings/${MeetingId}/'>${MeetingName}</a>",
                                   filterable: true
                               }, {
                                   field: "MeetingDate",
                                   title: "Date",
                                   width: 90,
                                   format: "{0:MM/dd/yyyy}",
                                  filterable: {
                                       ui: "datepicker"
                                   }
                               }, {
                                   field: 'StartTime',
                                   title: "Start Time",
                                   template: "${StartTime} <a style='float: right;' data-mid='${MeetingId}' title='Add this Meeting to your calendar' class='ical iCalendarLink'>Add to your calendar</a>",
                                   width: 106,
                                   filterable: false
                               }, {
                                   field: "Location",
                                   title: "Location",
                                   filterable: true
                               }, {
                                   field: 'agenda',
                                   template: kendo.template($("#agendas-template").html()),
                                   title: "Agendas",
                                   filterable: false,
                                   sortable: false,
                                   groupable: false
                               }]
                           });

[Gert]

thx for the quick answer.

I did a little research and testing myself and found following solution for PHP->JSON->Kendo UI

schema: {
                            model: {
                                id: "id",
                                fields: {
                                    id: {editable: true, nullable: true},
                                    title: {editable: false, type: "string"},
                                    creationdate: {type: "datetime", parse: customParser}
                                }
                            }
                        }

...
...
//because the PHP->JSON generated a DateTime Object we have to take the 'date' property of Date !
//JSON : creationdate":{"date":"2015-01-29 15:38:55","timezone_type":3,"timezone":"Europe\/Brussels"}

function customParser(data) {
            return  kendo.parseDate(data.date, 'yyyy-MM-dd')

        }


.....
....
 // in the field defintions
  {field: "creationdate", title: "created", width: 150, format: "{0:dd-MM-yyyy}", type: "datetime",
                       }

I hope someone can use this code also :)

regards,
Gert

[Gert]

schema: {
                            model: {
                                id: "id",
                                fields: {
                                    id: {editable: true, nullable: true},
                                    title: {editable: false, type: "string"},
                                    creationdate: {type: "datetime", parse: customParser}
                                }
                            }
                        }

...
...
//because the PHP->JSON generated a DateTime Object we have to take the 'date' property of Date !
//JSON : creationdate":{"date":"2015-01-29 15:38:55","timezone_type":3,"timezone":"Europe\/Brussels"}

function customParser(data) {
            return  kendo.parseDate(data.date, 'yyyy-MM-dd')

        }


.....
....
 // in the field defintions
  {field: "creationdate", title: "created", width: 150, format: "{0:dd-MM-yyyy}", type: "datetime",
                       }