剑道UI网格版本"v2012.3.1114"不支持日期/时间编辑功能

Question

我以前使用Kendo-UI v2012.2.710 - 但是当我更新到Kendo-UI v2012.3.1114时，我的代码停止工作。我不太确定发生了什么变化，因为我的代码看起来很简单。谁能对此有所了解？

回

滚到以前的版本以保持此功能正常工作不是一种选择，因为它可能会破坏其他功能。

<div id="gridTiming"></div>
<script>
    var entries = [
        { "city":"Boston", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z" },
        { "city":"Kyoto", "time":"23:14", datetime: "2012-08-28T23:14:00.000Z"},
        { "city":"La Paz", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z"},
        { "city":"San Francisco", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z"},
        { "city":"Salt Lake City", "time":"08:14", datetime: "2012-08-28T08:14:00.000Z"},
        { "city":"Salvador", "time":"11:14", datetime: "2012-08-28T11:14:00.000Z"},
        { "city":"Salzburg", "time":"16:14", datetime: "2012-08-28T16:14:00.000Z" },
        { "city":"San Diego", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z" }
    ];
    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({});
    }
    $("#gridTiming").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");
                        }
                        if (elem.datetime && typeof elem.datetime === "string") {
                            elem.datetime = kendo.parseDate(elem.datetime, "yyyy-MM-ddTHH:mm:ss.fffZ");
                        }
                    });
                    return response;
                }
            }
        },
        columns: [
            { command: [ "edit" ] },
            { field:"city", title:"City" },
            { field:"time", title:"Time", format:"{0:HH:mm}", editor: timeEditor },
            { field:"datetime", title:"Date - Time", format:"{0:yyyy-MM-dd HH:mm}", editor: dateTimeEditor }
        ],
        editable: "inline",
        navigatable: true
    });
</script>

编辑：以下一对jsFiddles演示了这个问题：

• 版本 1，使用 Kendo-UI v2012.2.710
• 版本 2，使用 Kendo-UI v2012.3.1114

要查看问题，请执行以下操作：

1. 单击行上的"编辑"
2. 更改任何项目。
3. 点击"更新"

Troy Alford：两个版本都会更新底层网格的数据 - 但只有v2012.2.710版本会正确关闭对话框并将网格的单元格标记为已更改。

Answer 1

我已经创建了 2 个 jsFiddles 来测试您的问题 - 但两个版本的 Kendo-UI 都对我有用，无需更改您的代码。

• 版本 1，使用 Kendo-UI v2012.2.710
• 版本 2，使用 Kendo-UI v2012.3.1114

编辑：添加了由@Emiliano Bartolome提供的更新版本到OP。这些链接是：

• 版本 1，使用 Kendo-UI v2012.2.710
• 版本 2，使用 Kendo-UI v2012.3.1114

我应该注意，这些jsFiddles依赖于CDN Kendo-UI并通过CDN jQuery 1.8.2。我使用的链接是：

• Kendo-UI v2012.2.710 ： http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js
• Kendo-UI v2012.3.1114 ： http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js
• jQuery 1.8.2 ： http://code.jquery.com/jquery-1.8.2.js

Answer 2

谜团

解开了！对于新版本，我们必须在 schema.model 中定义id .

我已经更新了版本 2，使用 Kendo-UI v2012.3.1114

我在模型中所做的是将id设置为city，现在它可以工作了！

model:{
    id:"city"
},