New to Kendo UI for Angular? Start a free 30-day trial

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, the GanttComponent 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. The TaskEditEvent event data contains the GanttComponent instance, the TaskEditItem, the EditEventDependencies, and the FormGroup instance, passed to the editTask method.
Use the closeTaskDialog method in the cancel 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 the taskDelete 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 the GanttComponent instance, and the TaskEditItem 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.

Change Theme

Theme

Loading ...

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.

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.

Change Theme

Theme

Loading ...