动态 Kendo UI Grid 可编辑日期时间列不使用值答案

【问题标题】：Dynamic Kendo UI Grid editable datetime column not using value动态 Kendo UI Grid 可编辑日期时间列不使用值
【发布时间】：2019-05-13 13:29:38
【问题描述】：

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

但是，在 datepicker 上设置值后，然后返回到同一行/列，日期不会显示在 datepicker 输入中。

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

还有一个可以更好地解释问题的快速 gif：

【问题讨论】：

标签： javascript jquery kendo-ui kendo-grid kendo-datepicker

【解决方案1】：

处理剑道的绑定总是很棘手。我已经更新了您的demo，并进行了一些更改：

编辑：

当您使用data-bind 时，您不应该处理小部件的状态。剑道应该自己处理它，但你需要告诉剑道使用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 类型。

【讨论】：

感谢您的意见。似乎更改 #2 已经完成了我需要的修复，但是......由于其他原因，我的评论必须是一个字符串。它实际上是一个动态字段，可以包含依赖于另一个属性的文本/数字/下拉列表。我把这些拿出来试图阻止混乱。我将更新我的道场以反映这一点。
这里更新了道场：dojo.telerik.com/eJEmoVEv/4，我试图通过不包括这个抱歉来避免混乱......
感谢您的上次更新，这不是正确的答案，因为 datePicker.data("kendoDatePicker") 被返回为未定义（假设因为它尚未在页面上绘制）。然而，这确实让我朝着同一个方向做出改变。请参阅下面的答案以了解我的解决方法。

【解决方案2】：

在@DontVoteMeDown 的帮助下，我终于找到了答案。 datepicker 期望 Comment 字段为日期类型，因此添加 kendo.parse 然后重置 comment 字段可解决此问题。

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

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

【讨论】：