Editing Dialog
The Gantt provides an option for opening an edit dialog that contains a built-in mechanism for updating the corresponding task and its dependencies.
Basic Concepts
Each time a task is clicked or double-clicked, the respective taskClick
or taskDblClick
event is emitted, and allows you to call a method that will open the edit dialog.
To implement the dialog editing use the following methods and events:
- When the end user clicks a task in the Timeline pane, this triggers the Gantt
taskClick
event. - The
TaskClickEvent
data includes the data item, associated with the clicked task, theGanttComponent
instance, and the original click event data. - To open the task edit dialog, use the Gantt
editTask
method,
and pass the data item and a FormGroup instance containing the editable fields.
- To process the Gantt data accordingly, use the
save
event handler. TheTaskEditEvent
event data contains theGanttComponent
instance, theTaskEditItem
, theEditEventDependencies
, and theFormGroup
instance, passed to theeditTask
method. - Use the
closeTaskDialog
method in thecancel
event handler to close the editing dialog without modifying the data. The event is fired when the end user clicks the dialog "close" or "cancel" buttons. - Use the
openConfirmationDialog
method in thetaskDelete
event handler to optionally display a confirmation dialog to prompt the user to confirm deleting a task. The event is fired when the user clicks the "delete" button in the edit dialog or the "delete" icon within each task. - Use the
remove
event handler to process the data accordingly when a task is deleted. The event data contains theGanttComponent
instance, and theTaskEditItem
to enable updating the parent tasks as necessary.
All tasks should have valid start and end dates where the end date is after the start date.
The following example demonstrates how to set up and use the edit dialog of the Kendo UI Gantt for Angular using Reactive Forms.
Editing Tabs
The Editing Dialog displays a collection of tabs, containing task-related content, which enables the user to edit the taks's general information, its predecessors and its successors.
General
The General section of the editing dialog allows users to edit the title, completion ratio, start, and end dates of a given task. To process any changes made by the user, utilize the FormGroup
instance, provided to the save
event handler.
Predecessors
Displays a list of all predecessor dependencies for a certain task. The edit mode allows the user to update a dependency's starting task, associated with the fromId
field, as well as to create a new dependency or remove an existing one.
Successors
Displays a list of all successor dependencies for a certain task. The edit mode allows the user to update a dependency's finishing task, associated with the toId
field, as well as to create a new dependency or remove an existing one.
To process any changes made by the user, utilize the dependencies
instance, provided to the save
event handler.
Editing on Double Click
To open the edit dialog when the user double-clicks a task, replace the taskClick
event with taskDblClick
in Step 1
from the Basic Concepts
instructions.
The following example demonstrates how to open the edit dialog when the user double-clicks a task.