动态 Kendo UI 网格可编辑日期时间列未使用值

Question

我有一个 kendo UI 网格，它在单个列上进行了在线编辑。该列在编辑时应使用日期选择器作为输入。

但是，在日期选择器上设置值后，然后返回相同的 row/column，日期不会显示在日期选择器输入中。

我创建了一个 Dojo 来说明我的意思： https://dojo.telerik.com/eJEmoVEv/4

还有一张 gif 动图来更好地解释这个问题：

Answer 1

处理 kendo 上的绑定总是很棘手。我已经更新了您的 demo 并做了一些更改：

编辑：

当您使用 data-bind 时，您不应该处理小部件的状态。 Kendo 应该自己处理它，但是你需要告诉 kendo 使用 kendo.bind(element, model)(bind() docs) 来处理它。因此，您不需要设置 data-value 属性。

function commentEditor(container, options) {
    var datePicker = $('<input data-role="datepicker" data-format="dd/MM/yyyy" type="date" name="Comment" data-bind="value:Comment">');
    datePicker.appendTo(container);
    kendo.bind(datePicker, options.model);
}

Comment字段类型：

为了让 kendo 知道如何将 Comment 字段值作为日期处理并将其正确设置为小部件，您需要在其模型中设置正确的数据类型定义：
```
Comment: { type: "date", editable: true }
```

模板：

对模板的小修正：

template: function (dataItem) {
    if (dataItem.Comment != "") { 
        let date = kendo.parseDate(dataItem.Comment);

        if (date) {
            return kendo.toString(date, "dd/MM/yyyy");
        }
    }
    return (dataItem.Comment || "");
}

我正在通过检查 parseDate 结果来确保 Comment 内容是有效日期。如果无效，则继续执行另一个条件，验证 Comment 是否不是 null、undefined 等，如果是，则打印一个空字符串。

希望对您有所帮助。

更新

不知道为什么，但似乎 kendo 将所选值作为字符串保存到绑定属性。我已将此处理程序添加到似乎有效的小部件的 change 事件中：

datePicker.data("kendoDatePicker").bind("change", function(e) {
    let model = this,
        widget = e.sender;

    model.Comment = widget.value();
}.bind(options.model));

Updated demo

强制 Comment 属性为 Date 类型。

Answer 2

在@DontVoteMeDown 的帮助下，我终于找到了答案。日期选择器期望 Comment 字段是日期类型，因此添加 kendo.parse 然后重置评论字段解决了这个问题。

查看更新的 kendo 道场：https://dojo.telerik.com/eJEmoVEv/4

var dateTimeComment = kendo.parseDate(options.model.Comment);
options.model.Comment = dateTimeComment;

动态 Kendo UI 网格可编辑日期时间列未使用值

Dynamic Kendo UI Grid editable datetime column not using value

javascript

jquery

kendo-ui

kendo-grid

kendo-datepicker