Динамический Kendo UI Grid Редактируемый столбец даты и времени без значения - PullRequest
Новая
       55

Динамический Kendo UI Grid Редактируемый столбец даты и времени без значения

1 голос
/ 13 мая 2019

У меня есть сетка пользовательского интерфейса кендо, в которой есть встроенное редактирование для одного столбца. Этот столбец должен использовать указатель даты в качестве входных данных при редактировании.

Однако после установки значения в указателе даты и возврата к той же строке / столбцу дата не отображается во входных данных средства выбора даты.

Я создал додзё, чтобы показать, что я имею в виду: https://dojo.telerik.com/eJEmoVEv/4

И быстрый GIF, чтобы лучше объяснить проблему: Issue

Ответы [ 2 ]

1 голос
/ 14 мая 2019

После помощи @DontVoteMeDown я наконец нашел ответ на этот вопрос. DatePicker ожидает, что поле «Комментарий» будет иметь тип даты, поэтому добавление в kendo.parse, а затем сброс поля комментария устранили эту проблему.

Смотрите обновленное кендо додзё: https://dojo.telerik.com/eJEmoVEv/4

var dateTimeComment = kendo.parseDate(options.model.Comment);
options.model.Comment = dateTimeComment;
1 голос
/ 13 мая 2019

Работа с привязками на кендо всегда сложна. Я обновил вашу демо с некоторыми изменениями:

  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 тип поля:

    Чтобы кендо узнало, как обрабатывать значение поля 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 и т. Д., Если да, печатает пустую строку.

Надеюсь, это поможет.

Обновление

Не знаю почему, но кажется, что кендо сохраняет выбранное значение в виде строки в привязанном свойстве. Я добавил этот обработчик в событие change виджета, которое, кажется, работает: 

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

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

Обновленная демоверсия

Это заставляет свойство Comment иметь тип Date.

...