Blazor Gantt Chart Example - Task Editing Capabilities

This sample demonstrates the phases involved in building a residential house, from soil testing through handover of the completed property. It also demonstrates add, delete, update operations in the Blazor Gantt Chart to help you manage tasks throughout the project.

Editing is configurable through GanttEditSettings and AllowTaskbarEditing. The component supports two editing Mode options: Auto and Dialog.

Common toolbar actions include:

• Add - Click the Add toolbar button to create a new task.
• Edit - Double click a row, double click a taskbar, or click the Edit toolbar button after selecting a row.
• Indent - Click the Indent toolbar button after selecting a row.
• Outdent - Click the Outdent toolbar button after selecting a row.
• Delete - Click the Delete toolbar button after selecting a row.
• Update and Cancel - Save or discard changes using the Update and Cancel toolbar buttons.

In this demo, Auto mode is enabled as default.

• Cell Edit – Double-click a grid cell to edit its value.
• Toolbar Edit – Click the toolbar button to open the edit dialog and modify the selected record.
• Chart Row Edit – Double-click a chart row to open the edit dialog for that record.
• Taskbar Editing – Drag or resize the taskbar to update task duration. Resize the progress indicator to modify the progress value.
• Dependency Management – Click and drag from a task’s start or end point to create a dependency and set its predecessor. Edit existing connector lines by dragging the connector points on parent taskbars, child taskbars, or milestones.

When a taskbar or connector point is dragged, the Gantt Chart automatically detects proximity to the viewport edges and initiates horizontal or vertical scrolling. This ensures smooth interaction and seamless navigation across the chart area. For further details, refer to the documentation.