У меня есть сетка пользовательского интерфейса кендо, в которой есть встроенное редактирование в одном столбце. Этот столбец должен использовать средство выбора даты в качестве ввода при редактировании.
Однако после установки значения в средстве выбора даты и последующего возврата к той же строке/столбцу дата не отображается во входных данных средства выбора даты.
Я создал Додзё, чтобы показать, что я имею в виду: https://dojo.telerik.com/eJEmoVEv/4
Работать с привязками в кендо всегда сложно. Я обновил ваш демо с несколькими изменениями:
Редактор:
Когда вы используете data-bind
, вы не должны обрабатывать состояние виджета. Кендо должно справиться с этим само по себе, но вам нужно сказать кендо, чтобы оно справилось с этим, используя kendo.bind(element, model)
(bind()
документы). Следовательно, вам не нужно устанавливать атрибут 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);
}
Comment
тип поля:
Чтобы заставить кендо знать, как обрабатывать значение поля Comment
как дату и правильно установить его для виджета, вам нужно установить правильный тип данных в его определении модели:
Comment: { type: "date", editable: true }
Шаблон:
Небольшое исправление в шаблоне:
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
.
Обновлено додзё здесь: dojo.telerik.com/eJEmoVEv/4, я пытался избежать путаницы, не включив это, извините...
Спасибо за ваше последнее обновление, это был неправильный ответ, поскольку datePicker.data("kendoDatePicker") был возвращен как неопределенный (при условии, что он еще не был нарисован на странице). Однако это заставило меня внести изменения в том же направлении. Смотрите мой ответ ниже для моего исправления.
После помощи @DontVoteMeDown я наконец нашел ответ на этот вопрос. Средство выбора даты ожидает, что поле «Комментарий» будет иметь тип даты, поэтому добавление kendo.parse, а затем сброс поля комментария устранило эту проблему.
Смотрите обновленное кендо додзё: https://dojo.telerik.com/eJEmoVEv/4
var dateTimeComment = kendo.parseDate(options.model.Comment);
options.model.Comment = dateTimeComment;
Спасибо за ваш вклад. Однако похоже, что изменение № 2 сделало нужное мне исправление... Мой комментарий должен быть строкой по другим причинам. На самом деле это динамическое поле, которое может содержать текст/цифры/раскрывающийся список в зависимости от другого свойства. Я взял их, чтобы попытаться избежать путаницы. Я обновлю свое додзё, чтобы отразить это.