2

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: Issue

andyb952
  • 1,931
  • 11
  • 25

2 Answers2

2

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.

DontVoteMeDown
  • 21,122
  • 10
  • 69
  • 105
  • Thanks for your input. It seems like change #2 has made the fix I need, however... My comment must be a string for other reasons. It is actually a dynamic field and can contain text/numerics/dropdownlist dependent on another property. I took these out to try and stop confusion. I will update my dojo to reflect this. – andyb952 May 13 '19 at 14:50
  • Updated dojo here: https://dojo.telerik.com/eJEmoVEv/4, I was trying to save confusion by not including this sorry... – andyb952 May 13 '19 at 14:56
  • 1
    Thanks for your last update, it wasn't the correct answer as datePicker.data("kendoDatePicker") was returned as undefined (assuming because it wasn't drawn on the page yet). However that did lead me to make a change in the same direction. See my answer below for my fix. – andyb952 May 14 '19 at 08:11
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;
andyb952
  • 1,931
  • 11
  • 25