Kendo UI Gantt - Display a custom modal for task update - kendo-ui

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.

Answer 1

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