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

Question

I have a kendo UI Grid that has in-line editing on a single column. That column should be using a datepicker as the input when editing.

However, after setting the value on the datepicker, and then returning to the same row/column, the date does not then show in the datepicker input.

I have created a Dojo to show what I mean: https://dojo.telerik.com/eJEmoVEv/4

And a quick gif to explain the issue better:

Answer 1

Dealing with bindings on kendo is always tricky. I have update your demo with a few changes:

1. Editor:

   When you're using data-bind you're not suposed to handle the widget's state. Kendo should deal with it by itself, but you need to tell kendo to handle that using kendo.bind(element, model) ( bind() docs ). Hence, you don't need to set data-value attribute.

    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 field type:

   In order to make kendo to know how to handle the Comment field value as a date and to set it properly to the widget, you need to set the right data type in it's model definition:

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

3. Template:

   A small fix to the template:

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

   I'm making sure that the Comment content is a valid date by checking the parseDate result. If not valid, proceed to another condition where it verifies if Comment is not null , undefined , etc, if yes, prints an empty string.

I hope it helps.

Update

Not sure why, but it seems that kendo saves the selected value as string to the bound property. I have added this handler to the widget's change event that seems to work:

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

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

Updated demo

That forces Comment property to be of Date type.

Answer 2

After the help from @DontVoteMeDown I finally found an answer to this. The datepicker is expecting the Comment field to be of date type, so adding in a kendo.parse and then resetting the comment field fixed this issue.

See updated kendo dojo: https://dojo.telerik.com/eJEmoVEv/4

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