Taskbar in TypeScript Gantt Chart Control
18 Nov 20184 minutes to read
The taskbar in the TypeScript Gantt Chart control visually represents tasks on the timeline, showing duration, progress, and dependencies, enabling intuitive project management. Taskbars support customization through properties like taskbarHeight for sizing and queryTaskbarInfo event for conditional formatting based on task data like progress. Multi-taskbar support in resource view, enabled by enableMultiTaskbar, summarizes child task progress in collapsed parent taskbars. Connector lines, styled via connectorLineWidth and connectorLineBackground, illustrate dependencies. Tooltips, controlled by tooltipSettings, provide hover details for taskbars, baselines, and timelines, with templates for custom content. Editing interactions include dragging for rescheduling (via allowTaskbarDragAndDrop) and resizing for duration, progress changes, triggering events like taskbarEditing and taskbarEdited for validation.
Customize taskbar height
Taskbar height for child and parent tasks is set using the taskbarHeight property, which accepts pixel values and must be less than rowHeight to avoid overflow.
The following example demonstrates how to set a custom taskbar height of 40 pixels, delivering consistent appearance across tasks while preserving full responsiveness.
Apply conditional formatting
Conditional formatting replaces default taskbar appearance using the queryTaskbarInfo event, accessing task data to modify colors, progress bars, or styles based on criteria like progress.
This example demonstrates formatting taskbars based on progress, where args.data.progress in the event handler dynamically sets args.taskbarBgColor and args.progressBarBgColor to visually highlight critical tasks or milestones.
Customize gripper icons
Gripper icons for taskbar editing (start, end, progress) are customized by targeting CSS classes like .e-gantt-left-resize-gripper or .e-gantt-right-resize-gripper with custom styles, overriding default icons for branded appearances.
In the following example, the progress gripper icon is customized by targeting the .e-gantt-progress-resize-gripper class. The custom styles also ensure touch-friendly sizing to support responsive and accessible user interactions.
Control taskbar and notes icon visibility
Taskbars and notes icons can be hidden dynamically using the queryTaskbarInfo and queryCellInfo events, enabling conditional visibility based on task data (e.g., hiding milestones or empty notes for cleaner timelines). Hiding taskbars affects only the timeline element, not the row or labels, and requires taskFields.notes for notes icon rendering.
The following example hides taskbars for specific tasks and notes icons for empty notes:
This code hides taskbars for tasks with IDs 7–10 (e.g., estimation tasks) and notes icons for empty Info fields, using queryTaskbarInfo and queryCellInfo. The .e-notes-info class ensures robust icon targeting, and taskFields.notes enables notes rendering.
Prevent taskbar editing for specific tasks
Taskbar editing, including dragging, resizing, or adding dependencies, can be prevented for specific tasks (e.g., locked milestones or completed tasks) using the actionBegin event for validation and queryTaskbarInfo to hide editing UI elements like grippers and connector points. This ensures visual and functional restrictions, with ARIA attributes updated for accessibility.
The following example disables taskbar editing for Task ID 4 by canceling drag, resize, and dependency actions in the actionBegin event and hiding resize grippers and connector points in queryTaskbarInfo using CSS classes. Editing remains enabled for other tasks through the Edit service injection and the allowTaskbarEditing property, while global CSS ensures the styles are applied to the Gantt Chart component’s DOM.
Customize taskbar templates
Taskbar templates allow full replacement of the default taskbar UI, enabling custom designs such as progress bars, badges, or icons. You can customize task rendering using the taskbarTemplate property for child tasks. You can also use parentTaskbarTemplate for parent tasks and milestoneTemplate for milestones. The taskbarTemplate function receives a props object that contains task-specific details and computed ganttProperties, such as the taskbar width and progress value. These properties can be used to dynamically calculate dimensions and control the visual presentation of the taskbar. For advanced conditional styling or logic, the queryTaskbarInfo event can be used.
This example renders a custom taskbar with a progress bar and a badge showing the task’s progress percentage. The progress bar width is calculated from the taskbar width and progress value in props.ganttProperties, ensuring each taskbar displays accurate progress at runtime.
Enable multi-taskbar support
In project view, multi-taskbar support, enabled by enableMultiTaskbar, renders parent taskbars summarizing child progress when collapsed, providing aggregated visualization.
The following example enables multi-taskbar:
This feature aggregates child progress in parent taskbars, updating dynamically on child changes.
Customize connector lines
Connector lines for dependencies are styled using connectorLineWidth for thickness and connectorLineBackground for color, enhancing dependency visibility.
The following example demonstrates connector customization. The specified properties are applied globally to all connectors, while the queryTaskbarInfo event supports per-dependency customization through the args.connectorLineBackground property.
Configure tooltips
Tooltips for taskbars, connectors, baselines, and event markers are enabled by default via tooltipSettings.showTooltip, set to true. Disable for specific elements or customize content with templates.
The following example enables tooltips:
Tooltips display on hover, with touch-and-hold support for mobile via the tooltip popup.
Disable taskbar tooltip
You can disable the taskbar tooltip using the beforeTooltipRender event by setting args.cancel to true.
Customize tooltip templates
You can customize the following tooltip types in the Gantt chart using the tooltipSettings configuration:
Taskbar tooltip
Taskbar tooltips are customized using tooltipSettings.taskbar template, accessing task data for formatted content.
The following example customizes taskbar tooltips:
The template uses data to display fields like TaskName and Progress, ensuring responsive display.
Connector line tooltip
Connector tooltips, customized via tooltipSettings.connectorLine, show dependency details like type and offset.
The following example customizes connector tooltips:
Baseline tooltip
A baseline tooltip can be customized using the tooltipSettings.baseline property.
The following example customizes baseline tooltips:
Timeline tooltip
Timeline tooltips, customized with tooltipSettings.timeline, display date details.
The following example customizes timeline tooltips:
Tooltip Touch interaction
To perform touch and hold action on a element, refer to tooltip popup.