Kendo JS Grid Issue with Date Fields

Question

We have strange issue with the Kendo UI Grid in production site.

For some users the date fields are showing as null in Google chrome and working fine in private window and other browsers like IE,MSEdge. We are unable to reproduce the issue

The code code is as below. While exporting the grid to Excel, the date filed are exporting fine, but while showing it was showing as null

var dataSource = new kendo.data.DataSource({
    type: "odata-v4",
    transport: {
        read: {
            url: api + "/api/odata/Orders",
            dataType: "json"
        },

        parameterMap: function (options, type) {
            var paramMap = kendo.data.transports["odata-v4"].parameterMap.call(this, options, type);
            delete paramMap.$inlinecount;
            delete paramMap.$format;
            return paramMap;
        }
    },
    schema: {
        data: function (data) {

            return data.value;
        },
        total: function (data) {
            return data["@odata.count"];
        },
        model: {
            fields: {
                LINE_ID: { type: "string" },
                REQUESTED_DATE: { type: "datetime" },
                SCHEDULE_SHIP_DATE: { type: "datetime" },
                ACTUAL_SHIPMENT_DATE: { type: "datetime" },
                INVOICE_DATE: { type: "datetime" },
                INVOICE_NUMBER: { type: "string" },

            }
        }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    sort: {
        field: "REQUESTED_DATE",
        dir: "desc"
    }
});

$("#grid").kendoGrid({
    toolbar: [
        { template: "<a role='button' class='k-button k-button-icontext k-grid-excel'><i class='fa fa-file-excel-o'></i> <span data-i18n='excel-export'>Excel Export</span></a>" },
        { template: "<input type='search' id='searchbox' class='k-input pull-right-not-xs' placeholder='Search...'  data-i18n='[placeholder]search'>" }
    ],
    excel: {
        fileName: "Orderdetails.xlsx",
        allPages: true,
        filterable: true
    },
    dataSource: dataSource,
    height: 480,
    autoBind: false,
    filterable: true,
    selectable: "row",
    sortable: true,
    reorderable: true,
    resizable: true,
    columnHide: onColumnChange,
    columnShow: onColumnChange,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columnMenu: true,
    columns: [
        { field: "LINE_ID", width: 150, hidden: true, title: i18next.t("id") },

        {

            columns:
                [

                    { field: "REQUESTED_DATE", template: "#if(REQUESTED_DATE != null){# #=kendo.toString(kendo.parseDate(REQUESTED_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", minScreenWidth: 1200, width: 120, title: i18next.t("requested") },
                    { field: "SCHEDULE_SHIP_DATE", template: "#if(SCHEDULE_SHIP_DATE != null){# #=kendo.toString(kendo.parseDate(SCHEDULE_SHIP_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", minScreenWidth: 500, width: 120, title: i18next.t("scheduled") },
                    { field: "ACTUAL_SHIPMENT_DATE", template: "#if(ACTUAL_SHIPMENT_DATE != null){# #=kendo.toString(kendo.parseDate(ACTUAL_SHIPMENT_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", hidden: true, title: i18next.t("actual") },
                ],
            minScreenWidth: 1000,
            title: i18next.t("shipment-date")
        },
        { field: "INVOICE_DATE", template: "#if(INVOICE_DATE != null){# #=kendo.toString(kendo.parseDate(INVOICE_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", hidden: true, width: 150, title: i18next.t("invoice-date") },
        { field: "INVOICE_NUMBER", hidden: true, width: 150, title: i18next.t("invoice-number") }

    ]
});

Also we noted that, when we clear the browser history and cookies it was working fine. Also we are loading the JS file appended with date time tick i.e

(//js/orders.js?v=1544691642371)

Update: All the dates format are coming as

2019-04-17T08:05:00-07:00
2018-11-22T08:05:22-08:00

Examine the network tab of Chrome devtools and see what is returned from the Cache. And share the information as well. — Xizario

Ангел Петров Ангел Петров · Accepted Answer · 2018-12-17T20:11:06

I would suggest the following.

Check in the browser's developer tool how are the dates returned from the endpoint.
Double check the model fields definitions. I noticed that they have a type of 'datetime' which is not recognizable. In the context of JavaScript they should be 'date' as noted here.

Specifies the type of the field. The available options are "string", "number", "boolean", "date" and "object". The default is "string".

Remove the templates for the columns and check whether the dates display correctly.

Kendo JS Grid Issue with Date Fields

1 Answers