Date Field Binding In Kendo Grid

Introduction

In this blog we are going to see how to bind the date field in kendo grid.

Kendo Grid

Create a HTML page, and write the below code in it,

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var movies = [
{ "rank": 1, "rating": 9.2, "DOR": new Date(), "title": "The Shawshank Redemption" },
{ "rank": 2, "rating": 9.2, "DOR": new Date, "title": "The Godfather" },
];
$("#grid").kendoGrid({
dataSource: {
data: movies,
schema: {
id: "rank",
model: {
fields: {
title: { type: "string" },
DOR: { type: "Date" },
rating: { type: "string" },
}
}
},
batch: true,
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
editable: "inline",
columns: [
{ field: "title", title: "Name" },
{ field: "DOR", title: "Release Date", format: "{0:MM/dd/yyyy}",
},
{ field: "rating", title: "Rating" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
]
});
});
</script>
</div>
</body>
</html>

From the above code you can notice we have a kendo grid with a movie datasource where the inline editing is enabled. In the movie data source we have a date time field; where in schema we need to mention the type as date.

As date of release is a Date field, we need to format it for better user readability.

{ field: "DOR", title: "Release Date", format: "{0:MM/dd/yyyy}",

Now we bind the date field in kendo grid. When user is in edit mode we need to render the datepicker control to update the date, the datepicker control can be initialized from editor property.

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var movies = [
{ "rank": 1, "rating": 9.2, "DOR": new Date(), "title": "The Shawshank Redemption" },
{ "rank": 2, "rating": 9.2, "DOR": new Date, "title": "The Godfather" },
];
$("#grid").kendoGrid({
dataSource: {
data: movies,
schema: {
id: "rank",
model: {
fields: {
title: { type: "string" },
DOR: { type: "Date" },
rating: { type: "string" },
}
}
},
batch: true,
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
editable: "inline",
columns: [
{ field: "title", title: "Name" },
{ field: "DOR", title: "Release Date", format: "{0:MM/dd/yyyy}",
editor: function (container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDatePicker();
},
},
{ field: "rating", title: "Rating" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
]
});
});
</script>
</div>
</body>
</html>

Summary

So far, we have seen how to bind the date field in kendo grid and format the date, then finally we saw how to initialize the datepicker control using editor column property when the user is in edit mode.