schema:{
total: function(){ return scope.totalDocumentCount },
model: {
id: "DocumentId",
fields: {
Date: { type: 'date'}
}
}
},
3 Answers, 1 is accepted
Hi Xiaohong,
Based on the provided information, I have created a sample project. I have added the date of interest and it appears that it is interpreted as a date data type. This can be confirmed by the actual rendered text in the grid as well as the DatePicker being automatically loaded in the filter menu:
https://dojo.telerik.com/ixAmuJEk
Is it possible for you to modify the sample in order to replicate the defect and send it back to me?
Kind regards,
Tsvetomir
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/.
Rank 1
Hi Tsvetomir,
Thank you very much. I noticed that you made the following change to the incoming data format. We can change the incoming data format by updating the other component with some effort.
data: [{OrderDate:new Date("Oct 06, 2020 04:30 PM")}],
Actually I made it work by adding parse to the schema of the grid (see below) without changing the incoming data format.
schema:{
model: {
fields: {
date:
{ type: 'date'}
}
},
parse :
function(data) {
for (var
record of data) {
for
(var fieldName in record) {
if
(fieldName == "date") {
record[fieldName]
= new Date(record[fieldName]);
}
}
}
return
data;
}
}
Following is the content of a stand-alone test html file. Wonder if you can make it work without the custom
parse.
<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8">
<title>Kendo
UI: Implementing the Grid Widget
</title>
<link
href="content/kendo.common.min.css" rel="stylesheet"
type="text/css"/>
<link
href="content/kendo.default.min.css" rel="stylesheet"
type="text/css"/>
<link
href="content/myCustom.css" rel="stylesheet"
type="text/css"/>
<script
src="scripts/jquery.min.js"
type="text/javascript"></script>
<script
src="scripts/kendo.web.min.js"
type="text/javascript"></script>
</head>
<body>
<div
id="cars"></div>
<script
type="text/javascript">
$(document).ready(function()
{
var
cars = [
{year:
2012, make: "Ferrari", model: "California", date: "Oct
17, 2013 01:57 AM"},
{year:
2012, make: "Ferrari", model: "458 Italia"},
{year:
2012, make: "Lamborghini", model: "Aventador", date:
"Apr 15, 2004 09:50 AM"},
{year:
2012, make: "Lamborghini", model: "Gallardo LP-570", date:
"Aug 07, 2008 09:50 PM"},
{year:
2012, make: "Porsche", model: "911 GT3", date:
"2009-10-23 04:44 AM"},
{year:
2012, make: "McLaren", model: "MP14-12C", date:
"2018-04-01 05:23 PM"},
{year:
2012, make: "Koenigsegg", model: "CCX"},
{year:
1971, make: "Plymouth", model: "(Hemi) Barracuda", date:
"Jun 15, 2020 06:08 PM"},
{year:
1967, make: "Ford", model: "Shelby Mustang GT500", date:
"Dec 13, 2019 12:12 PM"},
{year:
1972, make: "Jaguar", model: "E-Type", date: "May 15,
2015 11:15 PM"}
];
var
carsDataSource = new kendo.data.DataSource({
data:
cars,
pageSize:
5 ,
sort:
{field: "year", dir: "asc"} ,
schema:{
model:
{
fields:
{
date:
{ type: 'date'}
}
},
parse
: function(data) {
for
(var record of data) {
for
(var fieldName in record) {
if (fieldName ==
"date") {
record[fieldName]
= new Date(record[fieldName]);
}
}
}
return
data;
}
}
});
carsDataSource.read();
$("#cars").kendoGrid({
dataSource:
carsDataSource,
columns:
[
{
field: "year", title: "Year"} ,
{
field: "make", title: "Make" } ,
{
field: "model", title: "Model" } ,
{
field: "date", title: "Date", format: '{0:MMM dd, yyyy
h:mm:ss tt}' } ,
{
command: ["edit", "destroy"]}
],
scrollable:
false,
pageable:
true,
sortable:
true,
groupable:
true,
filterable:
true,
editable:
"inline"
});
});
</script>
</body>
</html>
Hi Xiaohong,
Thank you for sharing the sample project for reference. Indeed, the dates would be parsed automatically only if you spell the month with its full name rather than the abbreviation. This can be confirmed by removing the parsing logic and setting the full names. Since the abbreviatures are considered as custom formats, they are not parsed automatically.
Nevertheless, the approach with the parse function is recommended and you could use it as-is.
Best regards,
Tsvetomir
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/.