Kendo UI Gantt - Display a custom modal for task update

Question

I am aware of the following http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template but it is not what I need.

I need to display a custom modal dialog for task edition that is used in other parts of the app instead of the default kendo dialog.

What is this custom modal like? Can't you make the template definition equal to the markup of the custom modal. — The Dread Pirate Stephen, Dec 14 '16 at 20:06
Do you know a way I can disable start and end validation from the default kendo dialog to edit tasks? — Juan Pablo Fernandez, Dec 14 '16 at 20:15

score 3 · Accepted Answer · answered Dec 14 '16 at 20:27

Here's a possible way:

Implement a handler for the edit event and use e.preventDefault() to cancel kendo's built-in handling. This will prevent their dialog(or the template) from showing.

Now you show your own dialog(however you need to do that) and push in the GanttTask data passed to the edit event.

When your dialog is closed, you push the values of the edited data into the GanttTask...this is important! Since you cancelled the built-in functionality, it is now your responsibility to update the underlying data model.

Example edit handler:

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...
    }
}

Example custom dialog:

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...
      }
    };
  }

Simple demo: http://dojo.telerik.com/@Stephen/apEYa

Kendo UI Gantt - Display a custom modal for task update

1 Answers1