We are facing an unusual issue with the Kendo UI Grid on our production site.
Some users are experiencing date fields showing as null in Google Chrome, while they appear correctly in private browsing mode and other browsers like IE and MSEdge. We have been unable to reproduce the issue.
The code is outlined below. When exporting the grid to Excel, the date fields export properly, but when displaying them, they show 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") }
]
});
In addition, we observed that after clearing browser history and cookies, the issue resolved itself. Moreover, we load the JS file appended with a datetime tick:
(//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