Refer below code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script type="text/javascript">
$(function () {
var data = [
{ "id": 1, "dateTime": 1420947900000 },
{ "id": 2, "dateTime": 1421034300000 },
{ "id": 3, "dateTime": 1421036100000 },
];
$("#grid").kendoGrid({
selectable: true,
editable: "inline",
columns: [
{
field: "dateTime",
title: "Date Time",
width: "200px", type: "number",
template: "#= kendo.toString(new Date(parseInt(dateTime)), 'MM/dd/yyyy hh:mm') #",
editor: dateTimeEditor2
},
{ command: ["edit", "destroy"], title: " ", width: "170px" }
],
dataSource: {
transport: {
read: function (e) {
e.success(data);
},
update: function (e) {
alert(e.dateTime);
}
},
schema: {
model: {
id: "id",
fields: {
dateTime: { type: "number" },
}
}
}
}
});
function dateTimeEditor2(container, options) {
$('<input type="text" />')
.appendTo(container)
.kendoDateTimePicker({
format: "MM/dd/yyyy hh:mm",
value: kendo.toString(new Date(options.model.dateTime), 'MM/dd/yyyy hh:mm')
});
}
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
For more details refer below link.
https://demos.telerik.com/kendo-ui/grid/editing-custom
