JSFiddle - React, Tailwind, and code Playground

by Brandon

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<div id="grid"></div>

JavaScript

var entries = [
    { "type":"ACH", "begintime":"07:00 AM", "endtime": "07:00 AM"},
    { "type":"Check", "begintime":"07:00 AM", "endtime": "07:00 AM"},
    { "type":"Wire", "begintime":"07:00 AM", "endtime": "07:00 AM"},
    { "type":"Bank Transfer", "begintime":"07:00 AM", "endtime": "07:00 AM"}
];

function timeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoTimePicker({});
}

function dateTimeEditor(container, options) {
    console.log("options", options);
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({});
}

$("#grid").kendoGrid({
    dataSource:{
        data:entries,
        schema:{
            parse:function (response) {
                $.each(response, function (idx, elem) {
                    if (elem.time && typeof elem.time === "string") {
                        elem.time = kendo.parseDate(elem.time, "HH:mm:ss");
                    }
                    if (elem.datetime && typeof elem.datetime === "string") {
                        elem.datetime = kendo.parseDate(elem.datetime, "HH:mm:ss");
                    }
                });
                return response;
            }
        }
    },
    columns:[
        { command: [ "edit" ] },
        { field:"type", title:"Cash Transation Type" },
        { field:"begintime", title:"Begin Time(CT)", format:"{0:hh:mm tt}", editor: timeEditor },
        { field:"endtime", title:"End Time(CT)", format:"{0:hh:mm tt}", editor: timeEditor },
    ],
    editable:"inline",
    navigatable:true
});