javascript - 不使用值的动态 Kendo UI 网格可编辑日期时间列

Question

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

但是，在日期选择器上设置值并返回同一行/列后，日期不会显示在日期选择器输入中。

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

还有一个快速的 gif 动图来更好地解释这个问题:

Answer 1

处理剑道绑定(bind)总是很棘手。我已经更新了你的demo有一些变化:

1. 编辑:

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

2. 注释字段类型:

   为了让 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 || "");
   }
   

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

希望对你有帮助。

更新

不知道为什么，但剑道似乎将所选值作为字符串保存到绑定(bind)属性中。我已将此处理程序添加到似乎有效的小部件的 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类型。