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

Question

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

但是，在设置日期选择器的值之后，然后返回到相同的行/列，则日期不会显示在日期选择器输入中。

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

和快速gif以便更好地解释该问题：

Answer 1

在剑道上绑定绑定总是很棘手。我对您的demo进行了一些更改：

1. 编辑器：

   在使用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);
   }
   

2. Comment字段类型：

   为了使kendo知道如何将Comment字段值作为日期进行处理并将其正确设置为窗口小部件，您需要在模型定义中设置正确的数据类型：

   Comment: { type: "date", editable: true }
   

3. 模板：

   对模板的小修正：

   template: function (dataItem) {
       if (dataItem.Comment != "") { 
           let date = kendo.parseDate(dataItem.Comment);
   
           if (date) {
               return kendo.toString(date, "dd/MM/yyyy");
           }
       }
       return (dataItem.Comment || "");
   }
   

   我通过检查Comment结果来确保parseDate的内容是有效日期。如果无效，请继续执行另一种情况，以验证Comment不是null，undefined等，如果是，则打印一个空字符串。

希望对您有帮助。

更新

不知道为什么，但是kendo似乎将所选值作为字符串保存到bound属性。我已将此处理程序添加到似乎起作用的小部件的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然后重新设置comment字段可以解决此问题。

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

id