Kendo 网格内联编辑日期时间

Question

我对 kendo 网格自定义编辑器有疑问。当我单击 kendo 网格上的编辑按钮时，我想使用 dateTimePicker 作为我的编辑器。但是当我尝试使用 dateTimePicker 自定义我的网格时，总是出现错误：

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

这是简单的源代码：

  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)
            });
}

或者你可以在这个link

上查看

我也已经在许多不同的来源上检查过了，例如：

Reference 1
Reference 2

Answer 1

您的 "dateTime" 字段是数字，但您使用的是 "datetime" 类型的网格选项。在编辑器功能中，在自定义输入上使用 "data-bind" 属性会阻止 kendoUI 代码，因为我认为它需要某种日期文本..

我更改了您的代码，将字段类型更新为数字并删除了输入属性。错误消失了。但是您需要使用自定义事件实现 DateTimePicker，以便在更改编辑器值时更新网格 dataItem 的数值。或者可能是在您的示例中单击 "Update" 按钮时，我猜是通过将日期时间值解析为整数并设置网格 dataItem..

http://dojo.telerik.com/ecICE

额外说明：在将其绑定到网格之前，我还会考虑操纵我的数据源数组以将这些数值更改为 JS DateTime 值。这可能是更简单的解决方案。

--

Kendo 网格内联编辑日期时间

Kendo Grid inline editing DateTime

javascript

dojo

kendo-grid

kendo-datetimepicker