Grid DateFormat not applied

[Jason Russell]

I'm having a problem where the format is not being applied for a date column

Here's my sample code: http://jsplayground.syncfusion.com/dd4dvbni

    <script>

      $(function(){

        var _dm_notes = ej.DataManager([]);        

        var data1 = [{"@odata.etag":"W/\"1993644\"","annotationid":"fc17478b-95b4-e711-8156-e0071b684991","subject":"Busy Bee","notetext":"Jason's Note on Busy Bee Chemist and Newsagency","createdon":"2017-10-19T06:20:07Z","noteuser_x002e_fullname":"Jason Russell","noteuser_x002e_bkl_usertype":965130000}];

        var data2 = [{"@odata.etag":"W/\"1993651\"","annotationid":"faa6c0f6-95b4-e711-8156-e0071b684991","subject":"Appointment","notetext":"Jason's Note against an Appointment that is regarding a Customer (Busy Bee)","createdon":"2017-10-19T06:23:08Z","noteuser_x002e_fullname":"Jason Russell","noteuser_x002e_bkl_usertype":965130000}];

        $("#Notes").ejGrid({

            dataSource  : _dm_notes,

            editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false },

            columns     : [

                { headerText: "ID",      field: "annotationid",type: "guid",      visible: false },

                { headerText: "Date",    field: "createdon", type:"datetime", format: "{0:dd-MMM-yyyy}" }

            ]

        });

        

        var changes = { "added": data1.concat(data2), "deleted": {}, "changed": {} };

        _dm_notes.saveChanges(changes);

        

        $("#Notes").ejGrid("refreshContent");

      });

    </script>

You can see my date in the datasource comes in the ISO format: "2017-10-19T06:23:08Z"

However, when I try to apply a more user-friendly format (dd-MMM-yyyy) it doesn't seem to apply.

I also have a question about sorting on date columns. When the formatting is applied, will the sort continue to work?

[Mani Sankar Durai]

Hi Jason, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and based on your requirement we have already documented a KB that can be available from the below link 

Link: https://www.syncfusion.com/kb/3017/date-fields-in-json-data-are-not-formatted-properly-in-ajax-post 

To properly format the date field we suggest you to use ej.parseJSON when binding the data using dataSource method. 

We have also modified your sample that can be available from the below link 

Link: http://jsplayground.syncfusion.com/drg2ke1d 

Also we can now sort based on the formatted value for date column. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Ravikumar]

 $(function(){

        var _dm_notes = ej.DataManager([]);        

        var data1 = [{"@odata.etag":"W/\"1993644\"","annotationid":"fc17478b-95b4-e711-8156-e0071b684991","subject":"Busy Bee","notetext":"Jason's Note on Busy Bee Chemist and Newsagency","createdon":"2017-10-19","noteuser_x002e_fullname":"Jason Russell","noteuser_x002e_bkl_usertype":965130000}];

        var data2 = [{"@odata.etag":"W/\"1993651\"","annotationid":"faa6c0f6-95b4-e711-8156-e0071b684991","subject":"Appointment","notetext":"Jason's Note against an Appointment that is regarding a Customer (Busy Bee)","createdon":"2017-10-19","noteuser_x002e_fullname":"Jason Russell","noteuser_x002e_bkl_usertype":965130000}];

        $("#Notes").ejGrid({

            dataSource  : _dm_notes,

            editSettings: { allowEditing: false, allowAdding: false, allowDeleting: false },

            columns     : [

                { headerText: "ID",      field: "annotationid",type: "guid",      visible: false },

                { headerText: "Date",    field: "createdon", type:"datetime", format: "{0:dd.MM.yyyy}" }

            ]

        });

        

        var changes = { "added": data1.concat(data2), "deleted": {}, "changed": {} };

        _dm_notes.saveChanges(changes);

        ej.parseJSON(_dm_notes);

        $("#Notes").ejGrid("refreshContent");

then the data format is not working

[Manivannan Padmanaban]

Hi Ravikumar, 

Greetings from Syncfusion Support. 

We are able to reproduce the reported issue while using the shared code example. On further analyzing, we could see that the reported issue was occur because the date values as defined as string instead of date object in the dataSource( i.e. data1 & data2).  

To avoid the reported issue, we suggest you to use the date object value for date field. Refer to the modified sample link below, 

http://jsplayground.syncfusion.com/0isisvrm 

Kindly get back to us, if you need further assistance. We will be happy to assist you. 

Regards, 

Manivannan Padmanaban