Problem with timezones with JSDO and Kendo Grid - Forum - Mobile - Progress Community

Problem with timezones with JSDO and Kendo Grid

 Forum

Problem with timezones with JSDO and Kendo Grid

  • Hi,

    We have an issue with OE JSDO with Kendo UI grid. We have a simple get records method exposed as a RESTful service on a Pacific app server instance and a save changes method. Simple dataset that includes an ABL date field.

    We have a Kendo grid with a popup edit that allows you to update information, including a date field (date of birth) and send the updates to the app server.

    It all seems to work, however some records cause an error on the app server.

    Looking at the service catalog the date field in the dataset is passed down as type string. On certain records, the update to the app server passes back the date as a string with a TZ offset like this:

    Wed May 21 1980 00:00:00 GMT+0100

    This causes the update to fail. In other instances it works. We have noticed that when it works, the date string passed back is

    Thu Jan 30 1975 00:00:00 GMT+0000

    So we are not sure whether this is an issue with the Kendo grid or with the JSDO. I suspect it is the JSDO that is causing this issue when serializing the date in the update to pass back. The version of the JSDO we are using is v4.

    Has anyone come across this?

    Regards

     

  • Hello,

    The expected behavior when working with Kendo UI is for the date fields to be handled as JavaScript dates in memory.

    When the data is sent to the server, date fields should be serialized as an ISO 8601 formatted string (example: "2015-07-16T16:39:02.789Z").

    Internally, the catalog provides the schema to the DataSource and indicates that the field is date.

    However, it looks like somehow the date are not being encoded.

    What does the value look like when it is read from the server?

    Are you updating the date field?

    Do you have any formatting options for the column in the Kendo UI Grid?

    Perhaps, the configuration is telling the grid to handle the field as string rather than as a date.

    Could you try specifying: type: "date" in the column definition?

    I hope this helps.

  • Here is a URL to the Kendo date formatting which might help you:

    docs.telerik.com/.../dateformatting

    I was using a date in my grid and how to format the field in the field definition for the grid like this:

        { field: "OrderDate", type: "date", format:"{0:MM-dd-yyyy}", width: "110px" }

    Hope this helps

  • The data from the server looks like this to include the date.

    "PersonTitle":"Mr","Forenames":"Fred","Surname":"Smith","DOB":"1991-05-20",

    The date is part of a group of fields that can be updated in the grid using a grid popup. The error occurs if any of the data is changed, not just the date. However, some records produce the error and others do not, even though the data returned from the server is in the same format each time. The example above is the snippet of JSON from a record where the update fails. The date wasn't changed on the grid popup.

    "PersonTitle":"Mr","Forenames":"Fred","Surname":"Jones","DOB":"1991-05-19T23:00:00.000Z"

    This has pushed the time back 1 hour. On records that update without successfully, the time is correct, so in this case, it would have been "DOB":"1991-05-20T00:00:00.000Z"

    The grid has a param map for the date

    $('#grid').kendoGrid({
                    // define transports as the class functions
                    dataSource: {
                        transport: person.transport,
                        parameterMap: function (options, operation) {
                            if (operation != "read") {
                                var d = new Date(options.DOB);
                                options.DOB = kendo.toString(new Date(d), "0:dd/MM/yyyy");							
                                return options;
                            }
                        },
                        schema: {
                            model: {
                                id: '_id',
                                fields: { DOB: { type: "date", } }
                            }
                        },

    The columns are defined as:

    editable: 'popup',
    toolbar: ['create'],
    columns: [
     { field: 'PersonRef', title: 'Person Ref', width: 150, editor: function (element, options) { element.text(options.model.PersonRef) } },
     { field: 'Initials', title: 'Initials', width: 70 },
     { field: 'Forenames', title: 'Forenames', width: 150 },
     { field: 'Surname', title: 'Surname', width: 150 },
     { field: 'Gender', title: 'Gender', width: 80 },
     { field: 'DOB', title: "Date of Birth", type: 'date', width: 100, format: "{0:dd/MM/yyyy}" },
     { field: 'NhiNo', title: 'NI Number', width: 150 },
     { command: ['edit', 'destroy'], title: ' ', width: '250px' }
    ]

    Date picker on the date column:
    function dateEditor(container, options) {
      $('<input data-value-field="DOB" data-bind="value:' + options.field + '"/>')
       .appendTo(container)
    	.kendoDatePicker({ format: "dd/MM/yyyy" });
    }
  • Hello,

    Thank you for the additional information.

    I noticed that you are using the old approach to integrate the JSDO with Kendo UI and you are not using the new integration code.

    With the new version, the CRUD methods for the transport are built-in and you would not use the parameterMap property.

    You may want to update your code to use the new integration code.

    Here is a recent post that I made which provides info on the new version:

       community.progress.com/.../67714.aspx

    Regarding the issue.

    The update to the DOB field seems to be done exclusively by the code that you have in parameterMap.

    The code in parameterMap seems to be causing the issue:

       options.DOB = kendo.toString(new Date(d), "0:dd/MM/yyyy");

    Please notice that the the AppServer expects a date using ISO8601, so it should actually use a format like "yyyy-MM-dd".

    (The new integration code handles dates as JavaScript dates internally and the date is serialized as an ISO 8601 formatted string when sent to the server.)

    The Date(dateString) constructor uses UTC, rather than local time.

    See: developer.mozilla.org/.../Date

    This means that new Date("1991-05-20") returns something like the following:

       Sun May 19 1991 20:00:00 GMT-0400

    Notice that it shows 19 as the day.

    The call to kendo.toString() just parses the values.

    The call to kendo.toString(new Date("1991-05-20"), "dd/MM/yyyy") returns something like the following:

    "19/05/1991"

    There seems to be another conversion happening which then sends "1991/05/19" as "1991-05-19T23:00:00.000Z", however, the root cause seems to the call to kendo.toString() to parse the date.

    Depending on your goal, a possible way to fix the issue would be to use the Date(year, month*, day) constructor.

    (*) month is zero based.

    Example:

    kendo.toString(new Date(1991, 4, 20), "dd/MM/yyyy")

    What date datatype are you using for the date in the temp-table definition?

    You could use a DATETIME-TZ field in the temp-table definition to ensure that the timezone portion is processed.

    Please let me know if this helps.