Kendo Grid inline editing DateTime

Question

I have a problem with kendo grid custom editor. I want to use dateTimePicker as my editor when i click edit button on kendo grid. But when i try to custom my grid with dateTimePicker, there is always an error:

Uncaught TypeError: e.indexOf is not a function ---------- kendo.custom.min.js:1 

Here is simple source code :

  var data = [
            {"id":1, "dateTime": 1420947900000},
            {"id":2, "dateTime": 1421034300000},
            {"id":3, "dateTime": 1421036100000},
            ];
$("#grid").kendoGrid({
    selectable: true,
    editable: "inline",
    columns: [
        { 
            field: "dateTime", 
            title: "<center>Date Time</center>", 
            width: "200px",
            format: "{0:MM/dd/yyyy hh:mm}",
            template: "#= kendo.toString(new Date(parseInt(dateTime)), 'MM/dd/yyyy hh:mm') #",
            editor: dateTimeEditor2
        },
        { command: ["edit", "destroy"], title: "&nbsp;", width: "170px" }
    ],
    dataSource: {
        transport: {
            read: function(e) {
                e.success(data);
            },
            update: function(e) {
                //my update Function
        alert(e.dateTime);
            },
            autosync: true
        },
        schema: {
             model: {
                 id: "id",
                 fields: {
                     dateTime: { type: "datetime" },
                 }
             }
        }
    }
});
function dateTimeEditor2(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field 
            + '" data-bind="value:' + options.field + '" />')
            .appendTo(container)
            .kendoDateTimePicker({
                format:"MM/dd/yyyy hh:mm",
                value: new Date(options.model.dateTime)
            });
}

Or you can check it on this link

I already check it on many different source too, for example :

1. Reference 1
2. Reference 2

Answer 1

Your "dateTime" field is numeric, but you're using "datetime" type for grid options. And in the editor function, using "data-bind" attribute on the custom input brakes the kendoUI codes, because it expects some sort of a date text I think..

I changed your code updating field types to numeric and removing the input attributes. The error is gone. Bu you need to implement your DateTimePicker with custom events to update the numeric value of grid dataItem when the editor value is changed. Or probably when "Update" button is clicked in your example i guess, by parsing datetime value to integer and setting grid dataItem..

http://dojo.telerik.com/ecICE

Extra Note: I would also consider manipulating my datasource array to change those numeric values to JS DateTime values before binding it to grid. That would probably be the simpler solution.

--