Events in JavaScript Gantt Component
18 Nov 201824 minutes to read
The JavaScript Gantt Chart component offers comprehensive support for visualizing project schedules, task management, and timeline tracking through interactive charts. This documentation provides insights into leveraging the component’s rich event-driven architecture to customize and control Gantt operations effectively. Events in the Gantt Chart enable you to execute custom logic and integrations, offering flexibility for both simple and complex scenarios.
actionBegin
The actionBegin event triggers before the Gantt component processes actions such as adding, editing(cell, dialog, taskbar), deleting, sorting, filtering, dependency changes, and zooming. It provides detailed contextual information through the ActionBeginArgs argument. The argument type and structure depend on the triggered operation. Each argument type provides specific properties to help you inspect and modify the action.
The event argument structure varies based on the operation type. The following tables describe the supported argument types and their properties.
| Property | Type | Description |
|---|---|---|
action |
string | Defines the type of action being performed. |
fromItem |
IGanttData | Specifies the predecessor task in a dependency relationship. |
isValidLink |
boolean | Indicates whether the dependency link is valid. |
mergeSegmentIndexes |
Object[] | Contains indexes of segments to be merged during a context click action. |
newPredecessorString |
string | Represents the updated predecessor string. |
newTaskData |
object | Holds the newly added task data, excluding custom Gantt properties. |
predecessor |
IPredecessor | Defines the predecessor object involved in the action. |
recordIndex |
number | Specifies the index of the record being acted upon. |
splitDate |
Date | Indicates the date at which a task is split during a context click action. |
target |
Element | Refers to the target HTML element involved in the action. |
toItem |
IGanttData | Specifies the successor task in a dependency relationship. |
type |
string | Defines the type of event triggered. |
2. ITimeSpanEventArgs (Taskbar editing)
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the current action before it is processed. |
isTimelineRoundOff |
boolean | Indicates whether timeline rounding is applied during taskbar editing. |
projectStartDate |
Date | Start date of the overall project. Useful for validating task boundaries. |
projectEndDate |
Date | End date of the overall project. Useful for validating task boundaries. |
requestType |
string | Describes the type of request. For taskbar editing, values include taskbarEditing. |
3. ITaskAddedEventArgs (Adding/Editing/Deleting tasks)
| Property | Type | Description |
|---|---|---|
action |
string | Specifies the type of action, such as beforeAdd or beforeDelete. |
cancel |
boolean | Set to true to cancel the current action. |
data |
object | Contains the original task data before modification. |
modifiedRecords |
object[] | Array of records that were modified during the action. |
modifiedTaskData |
object[] | Array of task data after modification. |
newTaskData |
object | Data of the newly added task, if applicable. |
recordIndex |
number | Index of the record being modified or added. |
requestType |
string | Describes the type of request, such as beforeAdd or beforeDelete. |
rowPosition |
string | Indicates the position where the new row is added. Possible values: Top, Bottom, Above, Below. |
4. FilterEventArgs (Filtering)
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the filtering action. |
columns |
object[] | Array of columns involved in filtering. |
currentFilterObject |
object | Filter object representing the current filter condition. |
currentFilteringColumn |
string | Name of the column currently being filtered. |
requestType |
string | Describes the type of request, typically filtering. |
type |
string | Event type identifier. |
5. SortEventArgs (Sorting)
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the sorting action. |
columnName |
string | Name of the column being sorted. |
direction |
string | Sort direction: Ascending or Descending. |
requestType |
string | Describes the type of request, typically sorting. |
type |
string | Event type identifier. |
6. IDependencyEventArgs (Dependency editing)
| Property | Type | Description |
|---|---|---|
fromItem |
object | Source task object in the dependency link. |
isValidLink |
boolean | Indicates whether the new dependency link is valid. |
newPredecessorString |
string | New predecessor string after editing. |
predecessor |
string | Original predecessor string before editing. |
requestType |
string | Describes the type of request, typically validateDependency or updateDependency. |
toItem |
object | Target task object in the dependency link. |
7. ZoomEventArgs (Zooming)
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the zoom action. |
name |
string | Name of the event. |
requestType |
string | Describes the type of request, typically zooming. |
timeline |
object | Timeline settings after zoom is applied. |
actionComplete
The actionComplete event is triggered after the Gantt component successfully completes an operation such as adding, editing(cell, dialog, taskbar), deleting, sorting, filtering, dependency changes, and zooming. It provides detailed contextual information about the completed action through the ActionCompleteArgs argument. The structure of this argument varies depending on the type of operation performed, and includes specific properties that allow you to inspect the outcome and implement custom logic based on the completed action.
Below are detailed descriptions of each argument type’s properties, and their purposes.
| Property | Type | Description |
|---|---|---|
action |
string | Defines the action performed during the event. |
keyEvent |
Event | Defines the key event triggered. |
newTaskData |
object | Specifies the newly added task data without custom Gantt properties. |
recordIndex |
number | Defines the index of the record involved in the event. |
timeline |
ZoomTimelineSettings | Defines the settings applied to the Zoom timeline. |
type |
string | Defines the type of the event. |
2. FilterEventArgs (Filtering)
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the filtering action. |
columns |
object[] | Array of columns involved in filtering. |
currentFilterObject |
object | Filter object representing the current filter condition. |
currentFilteringColumn |
string | Name of the column currently being filtered. |
requestType |
string | Describes the type of request like filtering, filterAfterOpen. |
type |
string | Event type identifier. |
3. SortEventArgs (Sorting)
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the sorting action. |
columnName |
string | Name of the column being sorted. |
direction |
string | Sort direction: Ascending or Descending. |
requestType |
string | Describes the type of request, typically sorting. |
type |
string | Event type identifier. |
4. ITaskAddedEventArgs (Adding/Editing/Deleting tasks)
| Property | Type | Description |
|---|---|---|
action |
string | Specifies the type of action, such as add or delete. |
cancel |
boolean | Set to true to cancel the current action. |
data |
object | Contains the original task data before modification. |
modifiedRecords |
object[] | Array of records that were modified during the action. |
modifiedTaskData |
object[] | Array of task data after modification. |
newTaskData |
object | Data of the newly added task (if applicable). |
recordIndex |
number | Index of the record being modified or added. |
requestType |
string | Describes the type of request, such as beforeSave, beforeDelete. |
rowPosition |
string | Indicates the position where the new row is added. Possible values: Top, Bottom, Above, Below. |
5. ZoomEventArgs (Zooming)
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the zoom action. |
name |
string | Name of the event |
requestType |
string | Describes the type of request, typically zooming. |
timeline |
object | Timeline settings after zoom is applied. |
actionFailure
The actionFailure event is triggered when an operation in the Gantt encounters an error due to configuration issues, invalid data, or missing modules. It returns a FailureEventArgs object containing detailed information about the failure, including the following property:
| Property | Type | Description |
|---|---|---|
error |
Error | Defines the error information. |
beforeExcelExport
The beforeExcelExport event is triggered before initiating data export from the Gantt component to Excel or CSV format. This event enables conditional control over the export process, such as canceling the operation or applying format-specific logic.
The event argument is an object containing the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the export. |
isCsv |
boolean | Indicates if the export is CSV (true) or Excel (false). |
name |
string | Event name, typically beforeExcelExport. |
beforePdfExport
The beforePdfExport event is triggered before exporting Gantt data to a PDF file. This event provides an opportunity to conditionally cancel the export or modify behavior based on the current Gantt configuration.
The event provides an argument of type object with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set true to cancel PDF export. |
ganttObject |
Object | Reference to the Gantt Chart instance. |
name |
string | Event name, typically beforePdfExport. |
requestType |
string | Type of request, typically beforePdfExport. |
beforeTooltipRender
The beforeTooltipRender event is triggered before rendering a tooltip for interactive elements within the Gantt component. This includes taskbars, timeline headers, and connector lines. The event allows dynamic customization or suppression of tooltip content based on contextual data.
The event provides an argument of type BeforeTooltipRenderEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
args |
Object | Context info like target element and interaction type. |
content |
string | Tooltip content before rendering. |
cancel |
boolean | Set true to prevent tooltip display. |
data |
Object | Related Gantt data, such as task or header info. |
cellDeselected
The cellDeselected event is triggered when a selected cell in the Gantt component is deselected. This occurs when the selection is cleared by clicking outside the cell, selecting a different cell or row, or through programmatic control. This event is typically used to validate cell data after deselection, synchronize external state, or trigger updates based on cell-level interactions.
The event provides an argument of type CellDeselectEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the deselection. |
cellIndexes |
object[] | Row and column indices of deselected cells. |
cells |
NodeList | DOM elements of the deselected cells. |
data |
Object | Row data associated with the deselected cell. |
cellDeselecting
The cellDeselecting event is triggered when a previously selected cell in the Gantt component is deselected. This occurs when the selection is cleared either through user interaction or programmatic control. This event is typically used to validate cell data after deselection, synchronize external state, or trigger updates based on cell-level interactions.
The event provides an argument of type CellDeselectEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the deselection action. |
cellIndexes |
object[] | Row and column indices of the cells being deselected. |
cells |
NodeList | DOM elements representing the deselecting cells. |
data |
Object | Row data associated with the deselecting cell. |
cellEdit
The cellEdit event is triggered when a cell enters edit mode in the Gantt Chart component. This event allows customization of the editing behavior, such as validating input, modifying cell values, or preventing edits based on specific conditions. It helps ensure that data changes meet application requirements before being applied.
The event provides an argument of type CellEditArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set to true to cancel the cell edit action. |
cell |
Element | Cell element currently being edited. |
columnName |
string | Field name of the edited column. |
columnObject |
Object | Metadata of the edited column. |
foreignKeyData |
Object | Foreign key data, if applicable. |
isForeignKey |
boolean | Indicates if column is a foreign key. |
primaryKey |
string | Primary key field in the data source. |
row |
HTMLElement | Row element containing the edited cell. |
rowData |
Object | Data of the row associated with the edited cell. |
type |
string | Type of edit action (e.g., edit). |
validationRules |
Object | Validation rules applied to the cell, if any. |
value |
any | The current value of the cell before editing starts. |
cellSelected
The cellSelected event is triggered after a cell in the Gantt component is selected. This event provides access to the selected cell’s context and enables interaction logic based on cell-level selection. This event is commonly used to apply conditional styling, display contextual information, or trigger logic based on the selected task or field.
The event provides an argument of type CellSelectEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Cancel selection if set to true. |
cellIndex |
object | Index of the selected cell. |
cells |
Element[] | DOM elements of selected/deselected cells. |
currentCell |
Element | Currently selected cell element. |
data |
Object | Row data for the selected cell. |
previousRowCell |
Element | Previously selected cell element. |
previousRowCellIndex |
number | Index of previously selected cell. |
selectedRowCellIndex |
object[] | Indices of selected row and column. |
cellSelecting
The cellSelecting event is triggered before a cell is selected in the Gantt Chart component. It enables logic to control selection behavior based on cell context, such as preventing selection under specific conditions or customizing appearance dynamically.
The event provides an argument of type CellSelectingEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Cancel selection if set to true. |
cellIndex |
object | Index of the cell being selected. |
cells |
Element[] | DOM elements of selected/deselected cells. |
currentCell |
Element | Cell element currently being selected. |
data |
Object | Row data for the selected cell. |
previousRowCell |
Element | Previously selected cell element. |
previousRowCellIndex |
number | Index of previously selected cell. |
selectedRowCellIndex |
object[] | Indices of selected row and column. |
columnDrag
The columnDrag event is triggered while a column header is being dragged during reordering. It provides contextual details about the drag operation and enables customization of the column’s behavior during the process, such as restricting movement, applying visual styles, or preparing layout adjustments based on the interaction.
The event provides an argument of type ColumnDragEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
column |
Object | Column object currently being dragged. |
target |
Element | Element where column is dragged over. |
draggableType |
string | Type of draggable element (e.g., column). |
columnDragStart
The columnDragStart event is triggered when a column header drag operation begins in the Gantt component. This event provides access to the initial drag context and enables customization or restriction of the drag behavior.
The event provides an argument of type ColumnDragEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
column |
Object | Column object where drag started. |
target |
Element | Element where drag operation began. |
draggableType |
string | Type of draggable element (e.g., headercell). |
columnDrop
The columnDrop is triggered when a column header is dropped after a drag operation in the Gantt component. It provides drop context and supports post-reorder logic such as validation or UI updates.
The event provides an argument of type ColumnDragEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
column |
Object | Column object being dropped. |
target |
Element | Element where column is dropped. |
draggableType |
string | Type of draggable element (e.g., row, column). |
columnMenuClick
The columnMenuClick event is triggered when a column menu item is selected in the Gantt Chart. It provides access to the clicked item and its associated column, allowing you to customize menu behavior or execute additional logic.
The event provides an argument of type ColumnMenuClickEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | Name of the clicked menu item. |
column |
Object | Column object linked to the menu item. |
element |
Element | DOM element of the clicked menu item. |
item |
Object | The menu item object that was clicked. |
columnMenuOpen
The columnMenuOpen event is triggered when the column menu is opened. This event provides access to the menu context and allows customization of its appearance, behavior, or available options.
The event provides an argument of type ColumnMenuOpenEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Set true to cancel menu opening. |
name |
string | Event name: columnMenuOpen. |
column |
Object | Column object linked to the opened menu. |
element |
Element | Header element where menu was opened. |
items |
Object[] | List of available column menu items. |
left |
number | Left position of menu in viewport. |
top |
number | Top position of menu in viewport. |
parentItem |
Object | Parent item in nested menu structure. |
showSubMenuOn |
MenuOpenType | Submenu trigger type: click or hover. |
contextMenuClick
The contextMenuClick event is triggered when a context menu item is clicked within the Gantt component. This event provides access to the clicked item and the associated context, enabling customization of menu behavior or execution of additional logic.
The event provides an argument of type ContextMenuClickEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | Event name: contextMenuClick. |
element |
Element | DOM element that triggered the menu. |
event |
PointerEvent | Pointer event with interaction details. |
item |
Object | Clicked menu item with properties. |
type |
string | Type of menu item (e.g., Content). |
rowData |
Object | Data object of the related row. |
contextMenuOpen
The contextMenuOpen event is triggered when the context menu is opened in the Gantt Chart. This event allows customization of menu behavior or execution of additional logic based on the selected item and context.
The event provides an argument of type ContextMenuOpenEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | Event name: contextMenuOpen. |
element |
Element | DOM element that triggered the menu. |
event |
PointerEvent | Pointer event with interaction details. |
item |
Object | Menu item object with properties. |
type |
string | Type of menu item (e.g., Content). |
rowData |
Object | Data object of the related row. |
items |
Object[] | List of available context menu items. |
left |
number | Left position of menu in viewport. |
top |
number | Top position of menu in viewport. |
parentItem |
Object | Parent item in nested menu structure. |
showSubMenuOn |
MenuOpenType | Submenu trigger type: click or hover. |
created
The created event is triggered after the Gantt component has been fully initialized and rendered. This event is useful for executing logic that depends on the component being completely loaded and ready for interaction.
dataBound
The dataBound event is triggered after the Gantt component has successfully bound its data source and rendered the task data. This event is useful for executing logic that depends on the data being fully loaded and available in the UI.
destroyed
The destroyed event is triggered when the Gantt component is removed from the DOM using the destroy method. This event is useful for handling cleanup operations and releasing resources associated with the component instance.
The event provides an argument of type object with the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | Identifies event as destroyed. |
cancel |
boolean | Prevents destruction when set to true. |
endEdit
The endEdit event is triggered after a task is modified through cell editing. It enables post-edit actions such as validation, logging, or syncing changes with external systems.
The event provides an argument of type ITaskbarEditedEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
action |
string | Specifies type of task edit action. |
data |
IGanttData | Contains updated data for the task. |
name |
string | Identifies event as endEdit |
excelExportComplete
The excelExportComplete event is triggered after the Gantt component has completed exporting data to an Excel file. This event enables post-export actions such as displaying notifications, logging activity, or applying additional formatting to the exported content.
The event provides an argument of type ExcelExportCompleteArgs with the following property:
| Property | Type | Description |
|---|---|---|
promise |
Promise | Represents blob data for exported file. |
excelHeaderQueryCellInfo
The excelHeaderQueryCellInfo event is triggered during the Excel export process when customizing header cells in the exported file. It allows modification of header text, styles, and other properties before they are written to the Excel sheet.
The event provides an argument of type ExcelHeaderQueryCellInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | Identifies event as excelExportHeaderQueryCellInfo. |
cell |
ExcelCell | Represents current Excel header cell. |
gridCell |
Cell | ExcelCell | Refers to related Grid header cell. |
hyperLink |
Hyperlink | Contains hyperlink details for header cell. |
image |
Image | Contains image details for header cell. |
style |
ExcelStyle | Defines style settings for header cell. |
excelQueryCellInfo
The excelQueryCellInfo event is triggered during the Excel export process when customizing individual data cells in the exported file. It allows modification of cell values, styles, and formatting before they are written to the Excel sheet.
The event provides an argument of type ExcelQueryCellInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cell |
object | Represents current Excel cell being customized. |
column |
object | Metadata of column linked to cell. |
data |
object | Row data for the current cell. |
value |
string | Original value before export. |
style |
object | Style settings like font and alignment. |
colspan |
number | Specifies number of columns to span. |
hyperLink |
Hyperlink | Hyperlink details if cell includes a link. |
image |
Image | Image details if cell includes an image. |
expanded
The expanded event is triggered after a row is expanded in the Gantt Chart. It enables actions that respond to row expansion, such as loading additional data, updating UI elements, or tracking user interaction.
The event provides an argument of type ICollapsingEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
object | Data object of the expanded row |
row |
HTMLElement | DOM element of the expanded row |
name |
string | Identifies event as expanded |
cancel |
boolean | Prevents expansion when set to true |
expanding
The expanding event is triggered before a row is expanded in the Gantt Chart. It enables interception of the expansion process and allows cancellation based on custom logic or conditions.
The event provides an argument of type ICollapsingEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
object | Data object of the row being expanded |
gridRow |
HTMLElement | DOM element of the Grid row |
chartRow |
HTMLElement | DOM element of the Chart row |
name |
string | Identifies event as expanding |
cancel |
boolean | Prevents expansion when set to true |
headerCellInfo
The headerCellInfo event is triggered during the rendering of column header cells in the Gantt Chart. It allows customization of header cell appearance and content before they are displayed in the UI.
The event provides an object of type HeaderCellInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cell |
HTMLElement | Represents the header cell element being rendered. |
node |
Element | Refers to the inner content element of the header cell, used to update text or insert icons. |
name |
string | Identifies the event as headerCellInfo. |
load
The load event is triggered before the Gantt Chart component is rendered. It allows execution of pre-rendering logic such as modifying initial settings, injecting dynamic configurations, or preparing data before the component is displayed.
onMouseMove
The onMouseMove event is triggered when the mouse moves within the Gantt Chart area. It enables tracking of cursor movement and interaction with elements under the pointer.
The event provides an argument of type IMouseMoveEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
column |
Object | Column metadata at the cursor location. |
data |
IGanttData | Task or row data under the cursor. |
date |
Date | Timeline date corresponding to the cursor position. |
eventMarkers |
EventMarkerModel | Event markers present at the current position. |
indicator |
IIndicator | Indicator element such as milestone or status icon under the cursor. |
originalEvent |
Object | Native mouse event object (MouseEvent). |
predecessor |
PredecessorTooltip | Tooltip data for predecessor relationships, if available. |
onTaskbarClick
The onTaskbarClick event is triggered when a taskbar element is clicked in the Gantt Chart. It supports custom actions based on the selected task, such as displaying task details, navigating to related views, or tracking interactions.
The event provides an argument of type ITaskbarClickEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
IGanttData | Task data associated with the clicked taskbar. |
rowIndex |
number | Index of the row where the taskbar was clicked. |
target |
Element | DOM element where the click occurred. |
taskbarElement |
HTMLElement | Taskbar element that was clicked. |
name |
string | Name of the event (onTaskbarClick). |
pdfColumnHeaderQueryCellInfo
The pdfColumnHeaderQueryCellInfo event is triggered before each column header cell is exported to a PDF document in the Gantt Chart. It enables customization of header cell content, style, and formatting during the export process.
The event provides an argument of type PdfColumnHeaderQueryCellInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cell |
PdfTreeGridCell | Represents the PDF cell being exported. Supports content and style updates. |
column |
ColumnModel | Provides column configuration details such as field name and header text. |
headerTemplate |
ITemplateDetails | Contains template content including text or image for the header cell. |
image |
PdfImage | Specifies an image to be rendered in the header cell. |
style |
PdfGanttCellStyle | Defines visual styles such as font, background color, and borders. |
value |
string | Object | Value to be displayed in the header cell. Can be customized. |
name |
string | Identifies the event as pdfColumnHeaderQueryCellInfo. |
pdfExportComplete
The pdfExportComplete event is triggered after the Gantt Chart completes the process of exporting data to a PDF document. It enables post-export operations such as handling the generated file, displaying notifications, or logging export activity.
The event provides an object with the following property:
| Property | Type | Description |
|---|---|---|
name |
string | Identifies the event as pdfExportComplete |
pdfQueryCellInfo
The pdfQueryCellInfo event is triggered for each cell during the PDF export process in the Gantt Chart. It allows customization of individual cell content, style, and formatting in the exported PDF document.
The event provides an argument of type PdfExportCompleteArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
object | Task and Gantt data for the current row. |
value |
Date | string | number | boolean | PdfTextWebLink | PdfImage | Value displayed in the cell during PDF export. |
column |
Column | Column configuration for the current cell. |
style |
PdfGanttCellStyle | Style settings like font, color, and padding. |
cell |
PdfTreeGridCell | PDF cell object being rendered and customized. |
hyperLink |
Hyperlink | Hyperlink details if the cell includes a link. |
image |
Image | Image details if the cell includes an image. |
pdfQueryTaskbarInfo
The pdfQueryTaskbarInfo event is triggered for each taskbar during the PDF export process in the Gantt Chart. This event allows customization of the taskbar appearance and content in the exported PDF document.
The event provides an argument of type PdfQueryTaskbarInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
IGanttData | Task data for the current taskbar being exported. |
indicators |
IIndicator[] | Indicators displayed on the taskbar during PDF export. |
labelSettings |
ILabel | Custom content or image for taskbar labels. |
taskbar |
ITaskbarStyle | Style settings like color, border, and progress bar. |
taskbarTemplate |
ITemplateDetails | Template for taskbar appearance including text or image. |
pdfQueryTimelineCellInfo
The pdfQueryTimelineCellInfo event is triggered for each timeline cell during the PDF export process in the Gantt chart. It allows customization of the appearance, content, and style of timeline cells in the exported PDF document.
The event provides an argument of type pdfQueryTimelineCellInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
timelineCell |
PdfGanttCellStyle | Style settings for the timeline cell being rendered. |
value |
string | Text content displayed in the timeline cell. |
queryCellInfo
The queryCellInfo event is triggered during the rendering of each cell in the Gantt Chart. It allows customization of cell content, appearance, and style before they are displayed.
The event provides an argument of type QueryCellInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cell |
HTMLElement | Represents the cell element being rendered. |
column |
Column | Configuration object for the current column. |
data |
object | Data object for the row associated with the cell. |
foreignKeyData |
object | Foreign key data for the cell, if applicable. |
rowIndex |
number | Index of the row containing the cell. |
colIndex |
number | Index of the column containing the cell. |
colspan |
number | Number of columns the cell spans across. |
queryTaskbarInfo
The queryTaskbarInfo event is triggered while rendering each taskbar in the Gantt Chart. It allows customization of taskbar appearance, content, and behavior before they are displayed in the UI.
The event provides an argument of type IQueryTaskbarInfoEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
baselineColor |
string | Color applied to the baseline indicator. |
data |
IGanttData | Task data associated with the taskbar. |
leftLabelColor |
string | Color of the left-side label. |
milestoneColor |
string | Color used for milestone taskbars. |
progressBarBgColor |
string | Background color of the progress bar. |
rightLabelColor |
string | Color of the right-side label. |
rowElement |
Element | Row element containing the taskbar. |
taskLabelColor |
string | Color of the task label text. |
taskbarBgColor |
string | Background color of the taskbar. |
taskbarBorderColor |
string | Border color of the taskbar. |
taskbarElement |
Element | Defines the taskbar element. |
taskbarType |
string | Defines the taskbar type. |
recordDoubleClick
The recordDoubleClick event is triggered when a row in the Gantt Chart is double-clicked. It enables custom actions based on the selected task, such as opening detailed views, initiating inline editing, or displaying contextual information.
The event provides an argument of type RecordDoubleClickEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cell |
Element | The cell element that was double-clicked. |
cellIndex |
number | Index of the clicked cell within the row. |
column |
Column | Column configuration for the clicked cell. |
foreignKeyData |
Object | Foreign key data linked to the column, if applicable. |
name |
string | Name of the event (recordDoubleClick). |
row |
Element | The row element that was double-clicked. |
rowData |
IGanttData | Data object representing the selected task. |
rowIndex |
number | Index of the row in the data source. |
target |
Element | DOM element that initiated the double-click. |
resizeStart
The resizeStart event is triggered when a column resize action begins in the Gantt Chart. It allows interception of the resize process to apply validations or restrict resizing for specific columns.
The event provides an argument of type ResizeArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Prevents column resizing when set to true. |
column |
Column | Details of the column being resized initially. |
resizeStop
The resizeStop event is triggered when a column resize operation is completed in the Gantt Chart. It enables layout updates, persistence of dimensions, or UI adjustments.
The event provides an argument of type ResizeArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Cancels the resize operation when set to true. |
column |
Column | Provides information about the resized column. |
resizing
The resizing event is triggered continuously while a column is being resized in the Gantt Chart. It provides access to the current column width and supports dynamic updates to layout, styling, or constraints while the resize operation is in progress. This event is commonly used to enforce minimum or maximum widths, preview layout changes, or display contextual indicators during interaction.
The event provides an argument of type ResizeArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Stops resizing dynamically during interaction. |
column |
Column | Current column details during resizing process. |
rowDataBound
The rowDataBound event is triggered each time a row is bound to data in the Gantt chart. It enables customization of row appearance and content based on the associated task data. This event supports scenarios such as applying conditional formatting, injecting tooltips or icons, and modifying row structure to reflect task-specific context or status.
The event provides an argument of type RowDataBoundEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
IGanttData | Task data bound to the current row. |
isSelectable |
boolean | Indicates if the row is selectable or not. |
row |
Element | Row element rendered in the Gantt Chart. |
rowHeight |
number | Height of the row being rendered. |
rowDeselected
The rowDeselected event is triggered after a row is deselected in the Gantt Chart. It enables logic execution tied to selection changes, such as removing visual highlights, updating contextual UI elements, or tracking interaction patterns. This event supports scenarios involving both user-driven and programmatic deselection, ensuring consistent behavior across selection workflows.
The event provides an argument of type RowDeselectEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
IGanttData[] | Data for the row(s) that were deselected. |
foreignKeyData |
Object | Object[] | Foreign key data linked to deselected row(s). |
isHeaderCheckboxClicked |
boolean | True if header checkbox triggered deselection. |
isInteracted |
boolean | True if deselection was triggered by interaction. |
row |
Element | Row element that was deselected. |
rowIndex |
number | Index of the deselected row. |
rowIndexes |
number[] | Indexes of all deselected rows. |
target |
Element | Target element that triggered the deselection. |
rowDeselecting
The rowDeselecting event is triggered before a row is deselected in the Gantt Chart. It enables conditional control over the deselection process, allowing validations, confirmation prompts, or logic to prevent deselection based on task state or application rules. This event supports consistent behavior across both interactive and programmatic selection workflows.
The event provides an argument of type RowDeselectEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
IGanttData[] | Data for the row(s) being deselected. |
foreignKeyData |
Object | Object[] | Foreign key data linked to deselected row(s). |
isHeaderCheckboxClicked |
boolean | True if header checkbox triggered deselection. |
isInteracted |
boolean | True if deselection was triggered by interaction. |
row |
Element | Row element being deselected. |
rowIndex |
number | Index of the row being deselected. |
rowIndexes |
number[] | Indexes of all rows being deselected. |
target |
Element | Target element that triggered the deselection. |
rowDrag
The rowDrag event is triggered while a row is being dragged in the Gantt Chart. It allows customization during drag operations, such as showing visual indicators, applying drag constraints, or tracking drag operations.
The event provides an argument of type RowDragEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
Object[] | Data for the selected rows being dragged. |
dropIndex |
number | Index of the target row where the drop is intended. |
fromIndex |
number | Original index of the dragged row. |
originalEvent |
object | Mouse event associated with the drag action. |
rows |
Element[] | DOM elements of the selected rows. |
target |
Element | Target element where the drag started. |
rowDragStart
The rowDragStart event is triggered when a row drag operation begins in the Gantt Chart. It allows handling of drag initiation, such as applying movement restrictions, customizing visuals, or initiating tracking mechanisms.
The event provides an argument of type RowDragEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
Object[] | Selected rows data . |
dropIndex |
number | Target index for dropping the dragged row. |
fromIndex |
number | Original index of the dragged row. |
originalEvent |
object | Native mouse event that started the drag. |
rows |
Element[] | DOM elements of the dragged rows. |
target |
Element | Element where the drag was initiated. |
rowDragStartHelper
The rowDragStartHelper event is triggered before a row drag operation begins in the Gantt Chart. It allows handling of drag eligibility checks, such as validating conditions, modifying behavior, or canceling the drag action.
The event provides an argument of type RowDragEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
Object[] | Selected rows data objects. |
dropIndex |
number | Target index for potential drop. |
fromIndex |
number | Original index of the row being dragged. |
originalEvent |
object | Native mouse event that initiated the drag. |
rows |
Element[] | DOM elements of the selected rows. |
target |
Element | Element where the drag was initiated. |
rowDrop
The rowDrop event is triggered after a row is dropped into a new position in the Gantt Chart. It allows handling of row reordering, such as updating data, validating hierarchy changes, or tracking user actions.
The event provides an argument of type RowDragEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
Object[] | Selected rows data objects. |
dropIndex |
number | Target index for the dropped row. |
dropPosition |
string | Position relative to the target row. |
dropRecord |
IGanttData | Dropped record after reordering. |
fromIndex |
number | Original index of the dragged row. |
modifiedRecords |
IGanttData[] | Records updated after the drop. |
originalEvent |
object | Native mouse event that completed the drag. |
requestType |
string | Type of request triggered by the drop. |
rows |
Element[] | DOM elements of the dragged rows. |
target |
Element | Element where the drag was initiated. |
rowSelected
The rowSelected event is triggered after a row is selected in the Gantt Chart. It enables actions that respond to selection changes, such as styling the row, displaying related details, or tracking user interaction.
The event provides an argument of type RowSelectEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
data |
IGanttData | Data for the selected row. |
foreignKeyData |
Object | Object[] | Foreign key data linked to selected row. |
isHeaderCheckboxClicked |
boolean | True if header checkbox triggered selection. |
isInteracted |
boolean | True if selection was triggered by interaction. |
previousRow |
Element | Previously selected row element. |
previousRowIndex |
number | Index of the previously selected row. |
row |
Element | Element[] | Currently selected row element(s). |
rowIndex |
number | Index of the selected row. |
rowIndexes |
number[] | Indexes of all selected rows. |
target |
Element | Target element that triggered the selection. |
rowSelecting
The rowSelecting event is triggered before a row is selected in the Gantt Chart. It enables actions that intercept the selection process, such as validating conditions, prompting confirmation, or canceling the selection.
The event provides an argument of type RowSelectingEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Prevents row selection when set to true. |
data |
IGanttData | Data for the row being selected. |
foreignKeyData |
Object | Object[] | Foreign key data linked to selected row. |
isCtrlPressed |
boolean | True if CTRL key was pressed during selection. |
isHeaderCheckboxClicked |
boolean | True if header checkbox triggered selection. |
isInteracted |
boolean | True if selection was triggered by interaction. |
isShiftPressed |
boolean | True if SHIFT key was pressed during selection. |
previousRow |
Element | Previously selected row element. |
previousRowIndex |
number | Index of the previously selected row. |
row |
Element | Element[] | Row element(s) being selected or deselected. |
rowIndex |
number | Index of the row being selected. |
rowIndexes |
number[] | Indexes of all rows being selected. |
target |
Element | Target element that triggered the selection. |
splitterResizeStart
The splitterResizeStart event is triggered when the splitter bar begins resizing in the Gantt Chart layout.It enables actions that respond to resize initiation, such as applying layout constraints, customizing visuals, or tracking user interaction.
The event provides an argument of type ResizeArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Defines whether the event is cancelable. |
column |
Column | Defines the resizing column details. |
splitterResized
The splitterResized event is triggered after the splitter bar has been resized in the Gantt Chart layout. It enables actions that respond to final layout changes, such as saving pane dimensions, updating related components, or tracking user interaction.
The event provides an argument of type ISplitterResizedEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
cancel |
boolean | Indicates if the event is cancelable. |
element |
HTMLElement | Splitter container element. |
event |
Event | Event that triggered the resize. |
index |
number[] | Indexes of resized panes. |
pane |
HTMLElement[] | Pane elements involved in resizing. |
paneSize |
number[] | Final sizes of the resized panes. |
separator |
HTMLElement | Splitter bar element that was resized. |
splitterResizing
The splitterResizing event is triggered continuously while the splitter bar is being dragged in the Gantt Chart layout. It enables responsive actions during resizing, such as enforcing layout constraints, updating visual elements, or tracking user interaction.
The event provides an argument of type ResizingEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | Event name: splitterResizing. |
element |
HTMLElement | Splitter container element. |
event |
MouseEvent | Mouse event triggering the resize. |
index |
number[] | Indexes of panes being resized. |
pane |
HTMLElement[] | Pane elements involved in resizing. |
paneSize |
number[] | Current sizes of the panes. |
separator |
HTMLElement | Splitter bar element being dragged. |
taskbarEdited
The taskbarEdited event is triggered after a taskbar is modified in the Gantt Chart. It enables actions that respond to task updates, such as saving changes, validating edits, or updating related components.
The event provides an argument of type TaskbarEditedEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
action |
string | Type of taskbar edit action. |
cancel |
boolean | Indicates if the event is cancelable. |
data |
IGanttData | Data of the edited task. |
editingFields |
ITaskData | Fields being edited in the task. |
previousData |
ITaskData | Task data before the edit. |
recordIndex |
number | Index of the edited task. |
roundOffDuration |
boolean | Indicates if duration is rounded off. |
segmentIndex |
number | Index of the edited segment. |
target |
Element | Target element of the edit. |
taskBarEditAction |
string | Type of taskbar edit performed. |
taskbarEditing
The taskbarEditing event is triggered while a taskbar is being dragged or resized in the Gantt Chart. It enables actions that respond to live taskbar changes, such as enforcing constraints, updating tooltips, or canceling edits based on conditions.
The event provides an argument of type ITaskbarEditedEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
action |
string | Type of taskbar edit in progress. |
cancel |
boolean | Set true to cancel the edit. |
data |
IGanttData | Data of the task being edited. |
editingFields |
ITaskData | Fields currently being modified. |
previousData |
ITaskData | Task data before the edit. |
recordIndex |
number | Index of the task being edited. |
roundOffDuration |
boolean | Indicates if duration should be rounded. |
segmentIndex |
number | Index of the segment being edited. |
target |
Element | Target element involved in the edit. |
taskBarEditAction |
string | Specific type of taskbar edit action. |
toolbarClick
The toolbarClick event is triggered when any toolbar item is clicked in the Gantt chart. It enables actions that respond to toolbar interactions, such as overriding default behavior, confirming actions, or triggering external workflows.
The event provides an argument of type ClickEventArgs with the following properties:
| Property | Type | Description |
|---|---|---|
name |
string | Specifies name of the event |
item |
object | Clicked toolbar item info |
originalEvent |
PointerEvent | Native DOM event |
cancel |
boolean | Cancel default action |