I'm trying to make the SomeDate field format in the kendo grid below work, but no matter what I do, it always returns the ISO string instead of the formatted date. I even tried to define a template in the columns object, and used kendo.format, but I got the exact same result, an ISO string.
I need this data load to be delayed (autoBind:false), I can't provide any data at the beginning. I do know the field types in advance, and I'm defining it as "date". This got to use a locally defined variable.
I tested the code below in Kendo UI Dojo and it returns the ISO string also, so I know it is not an issue with my local libraries.
Why is the date not being formatted correctly? What am I missing?
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-main.min.css" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/jszip.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = [{ProductName:"My Product",UnitPrice:123,SomeDate:"2022-01-01T00:00:00-06:00"}];
var $myGrid = $("#grid").kendoGrid({
autoBind: false,
dataSource: {
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
SomeDate: { type: "date" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "SomeDate", title: "Some Date", format: "{0:d}", width: "130px" }
]
});
$myGrid.data("kendoGrid").dataSource.data(myData);
});
</script>
</div>
</body>
</html>1 Answer, 1 is accepted
Hi Ricardo,
The date field is not being formatted accordingly as it is coming in a string format:
This:
console.log("SomeDate", typeof myData[0].SomeDate)Returns:
Thus, you need to convert this string to date before binding it to the Grid, for example:
myData[0].SomeDate = kendo.parseDate(myData[0].SomeDate)Then the format will be correctly applied to the column filed. Here is the modified Dojo:
Hope this helps.
Regards,
Nikolay
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.