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

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

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

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

И небольшая гифка, чтобы лучше объяснить проблему: Редактируемый столбец даты и времени Dynamic Kendo UI Grid не использует значение

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
1 659
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

  1. Редактор:

    Когда вы используете 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);
    }
    
  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. Если недействительно, перейдите к другому условию, где он проверяет, не является ли Commentnull, undefined и т. д., если да, печатает пустую строку.

Я надеюсь, что это помогает.

Обновлять

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

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

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

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

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

Спасибо за ваш вклад. Однако похоже, что изменение № 2 сделало нужное мне исправление... Мой комментарий должен быть строкой по другим причинам. На самом деле это динамическое поле, которое может содержать текст/цифры/раскрывающийся список в зависимости от другого свойства. Я взял их, чтобы попытаться избежать путаницы. Я обновлю свое додзё, чтобы отразить это.

andyb952 13.05.2019 16:50

Обновлено додзё здесь: dojo.telerik.com/eJEmoVEv/4, я пытался избежать путаницы, не включив это, извините...

andyb952 13.05.2019 16:56

Спасибо за ваше последнее обновление, это был неправильный ответ, поскольку datePicker.data("kendoDatePicker") был возвращен как неопределенный (при условии, что он еще не был нарисован на странице). Однако это заставило меня внести изменения в том же направлении. Смотрите мой ответ ниже для моего исправления.

andyb952 14.05.2019 10:11
Ответ принят как подходящий

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

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

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

Другие вопросы по теме