Kendo UI Gantt - Показать пользовательский модал для обновления задач

Question

Мне известно следующее http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt, но это не то, что мне нужно.

Мне нужно отобразить настраиваемое модальное диалоговое окно для редактирования задач, которое используется в других частях приложения вместо стандартного диалогового окна кендо.

Answer 1

Вот возможный способ:

Реализуйте обработчик для события edit и используйте e.preventDefault() для отмены встроенной обработки kendo. Это предотвратит показ их диалога (или шаблона).

Теперь вы показываете свой собственный диалог (однако вам нужно это сделать) и вставляете данные GanttTask, переданные в событие редактирования.

Когда ваш диалог закрыт, вы помещаете значения отредактированных данных в GanttTask... это важно! Поскольку вы отменили встроенную функциональность, теперь вы несете ответственность за обновление базовой модели данных.

Пример обработчика редактирования:

edit: function(e) {
    // Cancel the built-in editing functionality
    e.preventDefault();
    var editResult = showMyDialog(e.task);
    if (editResult.ok) {
      // User clicked OK instead of Cancel...or whatever mechanism your dialog uses.
      e.task.set("title", editResult.data.title);
      // other data...
    }
}

Пример пользовательского диалога:

function showMyDialog(task) {
    // Fetch/show your actual window, push in the data from the GanttTask
    alert("This is my window: " + task.title);

    // Simulate user editing of GanttTask.
    var editedTitle = "NeW tAsK!";
    // other data...

    return {
      ok: true, // or false if user clicked cancel.
      data: {
        title: editedTitle
        // other data...
      }
    };
  }

Простая демонстрация: http://dojo.telerik.com/@Stephen/apEYa