GanttChart Blazor API

GanttChart Properties

NameTypeDefaultDescription
AdjustToNonworkingTimeboolfalseSpecifies whether nonworkingDays and nonworkingHours should be considered when calculating the dateEnd of tasks. When enabled, dateEnd is determined based only on actual working time, excluding periods defined as nonworking. If disabled (the default behavior), dateEnd is calculated using continuous calendar time, without regard for nonworking periods.
AutoScheduleboolfalse

Automatically recalculates and updates the scheduling of tasks based on their defined connections and dependencies. When tasks are linked (for example, via finish-to-start or start-to-start relationships), this process adjusts their start and end dates to maintain the intended order and constraints. If a task has no connections to other tasks, autoScheduling will not alter its dates until a new connection is established. The type of connection between tasks dictates how their possible start and end dates are constrained relative to each other.
AutoScheduleStrictModeboolfalseThis setting only impacts tasks when autoSchedule is enabled. When set to true, tasks are automatically and strictly scheduled based on their defined dependencies (connections), and users will not be able to manually drag tasks to reschedule them.

Additionally, users can specify a lag value for individual task connections. The lag attribute represents the delay or overlap (specified in milliseconds) between the start or end times of two connected tasks. By configuring the lag property within each task connection in the dataSource, you can control the timing interval between dependent tasks.
AutoScrollStepint5Specifies the speed at which the content scrolls when dragging an item and the autoScroll property is enabled. Increasing this value results in faster scrolling while dragging near the container's edge.
ColumnMenuboolfalseControls whether the column header menu is enabled or disabled. When enabled, hovering over a column header displays a dropdown button that opens a menu with quick actions such as sorting, filtering, and other column-specific operations. The available actions in this menu are context-sensitive and depend on which Gantt features are enabled; for example, the filtering option will be shown only if filtering is enabled for the corresponding column.
ColumnResizeboolfalseSpecifies whether the Table columns can be resized by the user. When enabled, users can adjust the width of each column directly from the table’s header cells in both the Task and Resource timelines. This allows for greater flexibility in customizing the Table’s appearance to better fit the displayed data.
ColumnResizeFeedbackboolfalseControls whether visual resize feedback is displayed while adjusting column width. This property is effective only when the columnResize feature is enabled. If set to true, users will see a preview of the new column size as they drag to resize; if set to false, no visual feedback will be shown during the resizing action.
CriticalPathboolfalseEnables or disables the visualization of the project’s Critical Path. When set to true, the Gantt chart highlights tasks that directly affect the project's total duration. The Critical Path represents the sequence of dependent tasks that cannot be delayed without delaying the overall project completion.
CurrentTimeobjectRepresents the current time indicator on the Gantt chart. By default, this value is set to today’s date, highlighting the present day on the timeline.
CurrentTimeIndicatorboolfalseControls the visibility of the current time indicator within the scheduling view. When enabled, a highlighted marker or line is displayed across the relevant time slots or cells to indicate the current system time, helping users easily identify the present moment within the schedule or calendar interface. Disabling this option hides the indicator from view.
CurrentTimeIndicatorIntervalint1Specifies how often, in seconds, the currentTimeIndicator is refreshed or updated. A lower value results in more frequent updates, while a higher value reduces the update rate, potentially improving performance.
DataExportGanttChartDataExportN/AConfigures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior).
DataSourceobjectN/ADetermines the set of tasks to be displayed within the Timeline. The value must be an array of objects, where each object represents a single task and includes both required and optional properties that define its behavior and appearance.

Required Task Properties:


  • label – A string value representing the name or description of the task.


  • dateStart – The task’s start date as a string in a valid date format (e.g., 'YYYY-MM-DD').


  • dateEnd – The task’s end date as a string in a valid date format.


  • type – Specifies the type of the task. Accepts one of: task (standard activity), project (parent grouping of subtasks), or milestone (key event). Each type may have type-specific behaviors and allowed attributes.



Optional Task Properties:


  • connections – An array of objects defining dependencies between tasks. Each connection object requires:


    • target – An integer specifying the zero-based index of the target task in the main tasks array.


    • type – An integer (0–3) indicating the type of dependency:

      • 0 – Start-to-Start

      • 1 – End-to-Start

      • 2 – End-to-End

      • 3 – Start-to-End




    • lag – A number denoting delay (positive) or overlap (negative) between auto-scheduled tasks, in applicable time units. Used in conjunction with autoSchedule.




  • duration – Describes how long the task lasts (e.g., "3d", "4h", "15m"). Useful when dateEnd is unknown or not specified. Duration always represents total calendar time.


  • minDuration / maxDuration – Set minimum or maximum allowed duration for the task.


  • minDateStart / maxDateStart – Define earliest/latest allowed start dates, as strings in valid date formats.


  • minDateEnd / maxDateEnd – Define earliest/latest allowed end dates, as strings in valid date formats.


  • progress – A number from 0 to 100 indicating the percentage of work completed.


  • overdue – A boolean that is true if the task’s dateEnd has passed its deadline.


  • disableDrag – Boolean. If true, users cannot drag (move) the task on the timeline.


  • disableResize – Boolean. If true, users cannot resize the duration of the task on the timeline.


  • dragProject – Boolean. If true, allows the entire project (including all subtasks) to be dragged when the project parent task is dragged. Applicable only to project tasks.


  • segments – An array of objects allowing a task to be split into multiple segments with different properties (such as distinct start dates, labels, or durations).


  • synchronized – Boolean. If true, a project’s start and end dates are calculated automatically based on its child tasks, and cannot be moved independently. Applicable only to project tasks.


  • expanded – Boolean. Determines if a project’s subtasks are visible (expanded). If false, only the project summary bar is displayed. By default, projects are collapsed. Applicable only to project tasks.



The GanttChart component can also accept a IEnumerable<object> instance as its data source for flexible data integration. For more details, see the IEnumerable<object> documentation: .
DayFormatGanttDayFormatGanttDayFormat.ShortSpecifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements.
DateEndobjectSpecifies a custom end date for the Timeline. This is useful when the user wants to define a specific end point for the Timeline, overriding the automatic calculation based on task completion dates. If no end date is provided, the Timeline will automatically use the latest end date from the existing tasks.
DateStartobjectSpecifies a custom starting date for the Timeline. This option is useful when you want the Timeline to begin on a specific date, rather than relying on the earliest start date of the tasks. If a starting date is not provided, the Timeline will automatically use the start date from the first scheduled task.
DateMarkersIEnumerable<IGanttChartDateMarker>N/ASpecifies the date markers to be shown within the timeline of the GanttChart component. Date markers highlight and optionally label particular dates and times directly on the Gantt chart, providing visual cues or annotations for significant milestones, deadlines, or events within the project's schedule.
DisabledboolfalseSpecifies whether the element is interactive and can be used by the user. When enabled, the element responds to user input; when disabled, the element appears inactive and does not accept user interactions.
DisableAutoScrollboolfalsePrevents the timeline from automatically scrolling when a task bar is being dragged or resized. This means the viewport will remain stationary during these actions, requiring the user to manually scroll if they wish to view other parts of the timeline.
DisableTaskDragboolfalsePrevents users from clicking and dragging tasks to reschedule or move them within the Timeline view. Tasks remain fixed in their current positions and cannot be repositioned through drag-and-drop actions.
DisableTaskProgressChangeboolfalsePrevents users from modifying or updating task progress values within the Timeline view. Task progress indicators will be displayed as read-only and cannot be adjusted through the Timeline interface.
DisableTaskResizeboolfalsePrevents users from adjusting the start or end dates of tasks directly within the Timeline by disabling the resize handles on tasks.
DisableSelectionboolfalsePrevents users from selecting tasks, milestones, or any other elements within the GanttChart, effectively disabling all selection interactions and highlighting within the chart area.
DisableSegmentDragboolfalsePrevents users from dragging and repositioning individual task segments within the interface. When this option is enabled, task segments remain fixed in place and cannot be moved through drag-and-drop actions.
DisableSegmentResizeboolfalsePrevents users from changing the size of the task segment. When this option is enabled, the task segment cannot be resized or adjusted, ensuring its dimensions remain fixed.
DisableWindowEditorboolfalsePrevents the window editor from opening or being used within the GanttChart component, thereby disabling any ability for users to add, edit, or configure tasks through the graphical window interface. This setting ensures that all task modifications must be handled through alternative methods, such as programmatic updates or external forms.
DurationUnitDurationDuration.MilisecondSpecifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application.
FilterRowboolfalseSpecifies whether a dedicated filter row should be displayed within the table for filtering purposes, replacing the default inline filter input. When enabled, each column in the table will provide its own filter input within a separate filter row. This property is only applicable if the filtering option is enabled; otherwise, it will have no effect.
FirstDayOfWeekint-1Specifies which day of the week the calendar view should start on. The value is a number from 0 to 6, where 0 represents Sunday, 1 represents Monday, and 6 represents Saturday. The default value is 0 (Sunday). Adjusting this setting allows you to control the first day displayed in the weekly or monthly calendar view.
GroupByResourcesboolfalseOrganizes tasks within the Task timeline by grouping them based on their assigned resources. Each resource receives its own group containing all tasks allocated to it. Tasks that have not been assigned to any resource are automatically placed in a separate group labeled "Unassigned" for easy identification.
HeaderTemplateobjectN/AEnables you to define custom header content for the Task Panel. The attribute accepts either an HTMLTemplate element, the id of an existing HTMLTemplate, or a function that returns the desired content. This provides flexibility to use static templates or generate dynamic header content programmatically.
HideDateMarkersboolfalseSpecifies whether the dateMarkers are displayed on the interface. When set to true, the date markers will be visible; when set to false, they will be hidden.
HideTimelineHeaderboolfalseBy default, the Timeline component displays a three-level header structure: the top section shows primary timeline details, the middle section displays secondary details, and the bottom section contains the main timeline header. This property allows you to hide the header container, which refers specifically to the bottom section of the header.
HideTimelineHeaderDetailsboolfalseBy default, the Timeline component displays a three-level header structure: the main timeline details (topmost header), secondary timeline details (middle header), and the primary timeline header (bottom header). This property allows you to hide the topmost container, which holds the main timeline details, effectively removing the first (outermost) header section from the Timeline display.
HideTimelineSecondHeaderDetailsbooltrueBy default, the Timeline component displays a three-level header structure: the main timeline header, a secondary header with additional details, and a primary details section. This property specifically controls the visibility of the second (middle) header, which contains supplementary timeline details. When enabled, the secondary details container will be hidden, resulting in a simplified two-level header layout.
HideResourcePanelboolfalseControls the visibility of the Resource panel in the GanttChart component. By default, the Resource panel is displayed automatically when resources are added to the GanttChart. Enabling this property will permanently hide the Resource panel, regardless of whether resources are present or not. This allows developers to prevent the Resource panel from appearing under any circumstances.
HorizontalScrollBarVisibilityHorizontalScrollBarVisibilityHorizontalScrollBarVisibility.AutoSpecifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width.
HourFormatHourFormatHourFormat.NumericSpecifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements.
InfiniteTimelineboolfalse

When this option is enabled, reaching the end of the horizontal timeline through scrolling will dynamically generate additional timeline cells, effectively extending the visible time range. The exact number of new cells added each time the scrollbar reaches the end is specified by the infiniteTimelineStep setting. This allows for an "infinite scrolling" experience, where more timeline segments are loaded as the user scrolls horizontally.
InfiniteTimelineStepint5Specifies how many new cells should be dynamically loaded and added to the Timeline when the user scrolls horizontally to the end, provided that infiniteTimeline is enabled. This controls the batch size of additional timeline cells appended each time the end of the scrollable area is reached.
InvertedboolfalseWhen enabled, this setting displays the Timeline component on the left side of the interface and the Task Tree on the right side. By default, the layout is reversed: the Task Tree appears on the left and the Timeline on the right.
KeyboardNavigationboolfalseControls whether users can navigate within the Table using the keyboard. When enabled, keyboard navigation applies to both the Task and Resource Tables, allowing users to move between table items using the keyboard.

For the Task Table, the following keyboard shortcuts are available when a task is focused:


  • Enter – Opens the Window editor, allowing you to edit the currently focused task.

  • Delete – Opens a confirmation dialog to confirm the deletion of the currently focused task.



Enabling this option improves accessibility and streamlines user interactions for both Task and Resource management within the Table.
UnlockKeystring""Sets or retrieves the unlockKey, a unique value required to unlock and access the full features of the product. Use this property to assign an unlock key for activation or to obtain the currently set unlock key.
Localestring"en"Specifies the language used for the GanttChart interface, including labels, tooltips, and other user-facing text elements.
Maxobject2100-1-1Determines the latest allowable date that can be displayed or selected on the Timeline, effectively setting the upper limit for date values within the component.
Minobject1900-1-1Specifies the earliest allowable date that can be selected or displayed on the Timeline, effectively setting the lower date limit.
MessagesobjectN/ADefines or retrieves an object containing customizable strings used within the widget's interface for localization purposes. This object allows developers to provide translated or adapted text for various UI elements, ensuring the widget can support multiple languages and regions. It is typically used in combination with the locale property to display content in the desired language.
MonthFormatMonthFormatMonthFormat.ShortSpecifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline.
MonthScaleMonthScaleMonthScale.WeekSpecifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar.
NonworkingDaysint[]new int[]{}Specifies which days of the week, represented by integers from 0 to 6 (where 0 indicates the first day of the week and 6 indicates the last), are considered nonworking days. These selected nonworking days are visually highlighted with colored cells within the timeline display. By default, nonworking days do not influence the task end dates (dateEnd). However, if the adjustToNonworkingTime property is enabled, task scheduling will automatically adjust to account for nonworking days when calculating end dates.
NonworkingHoursIEnumerable<object>N/ASpecifies which hours of the day are considered nonworking. The nonworking hours are defined using an array that can contain individual hour numbers (e.g., [1, 2, 3] represents 1 AM, 2 AM, and 3 AM as nonworking hours) and/or nested arrays to indicate continuous ranges (e.g., [[0, 6]] represents all hours from 12:00 AM to 6:00 AM inclusive as nonworking hours).

In the timeline view, cells corresponding to nonworking hours are visually distinguished (typically with a different color), helping users easily identify unavailable time slots. By default, these nonworking hours do not influence the calculation of a task’s end date (dateEnd). However, if the adjustToNonworkingTime property is enabled, the scheduler will automatically adjust tasks to skip or extend around nonworking hours.
OnTaskRenderobjectN/AThis function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:

1. 'task' – The full task object containing all associated data.
2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.
3. 'taskElement' – The root HTML element representing the task in the DOM.
4. 'segmentElement' – The HTML element representing the current segment of the task.
5. 'labelElement' – The HTML element that displays the segment’s label.

You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.
PopupWindowTabsstring[]new string[]{}Specifies which tab sections are displayed within the popup window. This property accepts the following three values:



  • general – Displays the General tab, which shows the main properties of the task as defined by the taskColumns property.


  • dependency – Displays the Dependency tab, where users can view, add, or remove connections (dependencies) related to the current task.


  • segments – Displays the Segments tab, where users can view, create, or delete segments that make up the task.



Use these values to control which tabs are visible to users in the popup window interface. Multiple values can be specified to show more than one tab.
QuarterFormatQuarterFormatQuarterFormat.ShortSpecifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation.
ResourcesobjectN/AReturns an array containing a flat list of all resource objects found within the element, including those nested at any level. This getter traverses the element's hierarchy and aggregates all resources into a single, non-nested array for simplified access.
ResourceColumnsIEnumerable<IGanttChartResourceColumn>N/ADetermines which columns are displayed in the Resource Tree.
Each entry in this property should be an Object containing the following keys:

- label: Specifies the column header text as it will appear in the Task Tree.
- value: Defines the property or content to be displayed in the cells of that column.

By default, a single column displays all resource labels. You can configure additional columns by adding objects with custom label and value pairs.

Additional configurable properties for each column object include:


  • formatFunction: A callback function that allows customization of the cell content for the column. This function receives two arguments: the label text (as a string) and the index of the resource. It should return a string, which will be used as the displayed cell content.

  • min: Sets the minimum width (in pixels or another supported unit) for the column.

  • max: Sets the maximum width for the column.

  • size: Specifies the fixed width for the column.



Use this configuration to tailor which resource attributes appear as columns in the Resource Tree and how they are displayed.
ResourceFilteringboolfalseSpecifies whether the Resource Table supports filtering functionality, allowing users to narrow down and display specific data based on filter criteria. If set to true, filters can be applied to the Resource Table; if false, filtering options will be disabled.
ResourcePanelHeaderTemplateobjectN/AEnables you to define a custom header for the Resource Panel by specifying the content through one of the following options: an HTMLTemplate element, the ID of an existing template, or a function that returns the desired HTML. This allows for flexible and dynamic header customization to fit your application's needs.
ResourcePanelMinobject100Specifies the minimum allowable size (in pixels) for the Resource Panel, ensuring that users cannot resize the panel below this value. This setting helps maintain usability and proper display of the panel's content.
ResourcePanelSizeobjectSpecifies the dimensions (width and/or height) of the Resource Panel, controlling how much space it occupies within the user interface. Adjusting this value directly affects the visible area available for displaying resource-related content.
ResourcePanelRefreshRateint0Controls how frequently the Resource Panel updates when a task is dragged, resized, or its progress is changed on the Timeline. By setting this property, you can customize the interval (in milliseconds) between automatic refreshes of the resource Tree and Timeline during these interactions. By default, the Resource Panel refreshes instantly after each change, but adjusting this value can help optimize performance for complex project schedules or large datasets.
ResourceTimelineModeGanttChartResourceTimelineModeGanttChartResourceTimelineMode.DiagramSpecifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals).
ResourceTimelineViewGanttChartResourceTimelineViewGanttChartResourceTimelineView.HoursSpecifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience.
PagingboolfalseDetermines whether paging functionality is enabled. When set to true, data is divided into discrete pages for easier navigation and viewing; when false, all data is displayed in a single, continuous view. You can use this property to enable or disable paging, or retrieve its current state.
RightToLeftboolfalseGets or sets a value that determines whether the element’s alignment supports right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adjusted to display text and UI elements in a right-to-left orientation, ensuring proper localization for RTL locales.
SelectedTaskIdsIEnumerable<object>N/A

"Allows you to specify which tasks are selected by providing their unique task IDs, or retrieve the IDs of the currently selected tasks. If a task does not already have an ID, the system automatically generates an internal ID for it based on its position in the task hierarchy (using its index or tree path)."
SelectedResourceIdsIEnumerable<object>N/ASets which resources to select by their id or gets the currently selected resource ids. If no id is provided for the resource, an internal id is generated for each resource according to it's index(tree path)."

---

'Improved Version:'

Specifies which resources should be selected by providing their unique IDs, or retrieves the list of currently selected resource IDs. If a resource does not have a user-defined ID, the system automatically generates an internal ID for each resource based on its position within the resource hierarchy (tree path or index). This ensures that every resource can be uniquely identified, even if explicit IDs are not assigned.
SelectionModeGanttChartSelectionModeGanttChartSelectionMode.ManyDefines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled.
ShadeUntilCurrentTimeboolfalseControls whether the current time shader is active. When enabled, all cells corresponding to past time periods will be visually shaded to distinguish them from present and future time slots. Disabling this option will display all cells without any time-based shading.
ShowSelectionColumnboolfalseDisplays the selection column in the Task or Resource Table. When enabled, a checkbox column appears, allowing users to select individual tasks or resources directly from the table. This feature facilitates bulk actions or easy identification of selected items.
ShowBaselineboolfalseControls the visibility of task baselines in the interface. Baselines represent the original planned schedule of tasks and are specified using the 'planned' attribute on each task object within the dataSource property. When this option is enabled, the baselines will be displayed alongside the actual task data for comparison.
ShowProgressLabelboolfalseDisplays a progress label within the progress bars for each Timeline task, providing a clear visual indication of the current completion percentage directly on the corresponding task's bar.
SnapToNearestboolfalseIf enabled, the dateStart and dateEnd values of tasks will be automatically adjusted (coerced) to align with the nearest timeline cell boundary, based on the current timeline view. This setting also affects task positioning during drag-and-drop operations, ensuring that tasks always snap to the closest valid timeline interval when they are moved or resized.
SortModeGanttChartSortModeGanttChartSortMode.NoneSpecifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers.
TasksIEnumerable<IGanttChartTask>A getter method that returns a flattened array containing all task objects nested within the element, regardless of their depth or hierarchical structure. This allows easy access to every task in the element as a single-level array.
TaskColumnsIEnumerable<IGanttChartTaskColumn>N/A'Description'

Defines which columns are displayed in the Task Tree. The value of this property should be an array of objects, each describing a column. Each column object must include the following required keys:

- label: Specifies the text that will appear as the column header in the Task Tree.
- value: Specifies the key of the task attribute from the dataSource to display as the cell content in that column.

By default, one column will be shown with all task labels. Additional columns can be configured using this property.

'Optional properties for each column object:'


  • formatFunction: A function for customizing the display content of each cell in the column. Receives the final label value (string) and returns the desired rendering (string or element).

  • min: Sets the minimum width of the column (in pixels or CSS units).

  • max: Sets the maximum width of the column (in pixels or CSS units).

  • size: Sets the default (actual) width of the column (in pixels or CSS units).

  • customEditor: A callback for providing a custom editor for the column when editing via a dialog/window. It accepts two arguments:

    • label: The column label.

    • value: The current cell value in the column.


    The function should return the editor component or element.

  • setCustomEditorValue: A callback used to programmatically set the value of the custom editor.

  • getCustomEditorValue: A callback used to programmatically retrieve the value from the custom editor.



This configuration enables fine-grained customization of how task attributes are displayed and edited within each column of the Task Tree.
TaskFilteringboolfalseSpecifies whether users can apply filters to the Task Table, allowing them to view only tasks that meet certain criteria. If enabled, filtering options will be available; if disabled, the Task Table will display all tasks without filtering capabilities.
TaskPanelMinobject200Specifies the minimum size of the Task Panel when the Resource Panel is visible. This property ensures that the Task Panel does not shrink below the defined size, maintaining usability and layout integrity when both panels are displayed.
TaskPanelSizeobjectSpecifies the dimensions of the Task Panel when the Resource Panel is displayed. This setting controls how much space the Task Panel occupies, ensuring it remains visible and accessible alongside the Resource Panel.
TimelineMinobject200Specifies the minimum width, in pixels, that the timeline component can be resized or displayed at. This ensures that the timeline will not shrink below the defined width, maintaining usability and proper layout.
TreeMinobject100Specifies the minimum width (in pixels) that the task table can be resized to, ensuring the table does not become narrower than this value. This helps maintain readability and layout consistency.
TreeSizeobject100Specifies the width of the task table, controlling how much horizontal space it occupies within its container. Adjust this value to set the overall size of the table and ensure proper display and alignment within your layout.
TooltipGanttChartTooltipN/AControls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas.
VerticalScrollBarVisibilityVerticalScrollBarVisibilityVerticalScrollBarVisibility.AutoSpecifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary.
ViewGanttChartViewGanttChartView.YearSpecifies the date range displayed on the timeline. Accepted values include:


  • day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.

  • week: The timeline presents each day within a single week, providing a broader weekly overview.

  • month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.

  • year: The timeline displays each month of the year, providing a high-level annual perspective.

  • resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.



The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline.
YearFormatYearFormatYearFormat.NumericSpecifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation.
WeekFormatWeekFormatWeekFormat.LongSpecifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation.
Themestring""Specifies or retrieves the visual theme applied to the element, controlling its overall appearance and styling (such as colors, backgrounds, and typography) according to predefined theme options.
UnfocusableboolfalseDetermines whether the element can receive keyboard focus. When set to true, the element becomes focusable and can be navigated to using the Tab key or programmatically via JavaScript. When accessed, returns a boolean indicating the current focusability state of the element.

GanttChart Methods

NameTypeArgumentsDescription
AddFiltervoidIEnumerable<object> columns, object filterGroupEnables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.Args: IEnumerable<object> columns - An object or an array of objects with the following syntax: <ul><li><b>type</b> - indicates the type of column to filter. Possible values are 'task' or 'resource'.</li><li><b>value</b> - the value of the column that must match the value attribute of a taskColumns/resourceColumns object(e.g. 'label', 'dateStart', etc).</li></ul>.,object filterGroup - A Smart.Utilities.FilterGroup object. Here's an example for creating a FilterGroup object: <pre>const filterGroup = new window.Smart.Utilities.FilterGroup(), filterObject = filterGroup.createFilter('string', 'Task B', 'STARTS_WITH_CASE_SENSITIVE'); filterGroup.addFilter('or', filterObject); gantt.addFilter({ type: 'task', value: 'label' }, filterGroup);</pre>
BeginUpdatevoidN/AInitiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.
ClearFiltersvoidN/ARemoves all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.
ClearResourcesvoidN/ADeletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.
ClearSelectionvoidN/ADeselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.
ClearSortvoidN/ARemoves any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.
ClearStatevoidN/ARemoves a previously stored state of the element from LocalStorage, based on the element's unique id attribute. "Note: The element must have an id specified for this operation to work."
ClearTasksvoidN/ADeletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.
CloseWindowvoidN/ACloses any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.
Collapsevoidobject idCollapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.Args: string id - The id of a project item that should be collapsed.
Collapsevoidstring idCollapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.Args: string id - The id of a project item that should be collapsed.
Collapsevoidint idCollapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.Args: string id - The id of a project item that should be collapsed.
CreateConnectionvoidobject startTaskIndex, object taskEndIndex, int connectionType, int lagEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.Args: object startTaskIndex - The id of the start task or the connection string like '2-3-0'. <b>If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary</b>,object taskEndIndex - The id of the end task.,int connectionType - The type of the connection. A numeric value from 0 to 3. The connection type can be: <ul><li><b>0</b> - Start-to-Start connection.</li><li><b>1</b> - End-to-Start connection.</li><li><b>2</b> - End-to-End connection.</li><li><b>3</b> - Start-to-End connection.</li></ul>,int lag - The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.
CreateConnectionvoidobject startTaskIndexEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.
CreateConnectionvoidint startTaskIndex, int taskEndIndex, int connectionType, int lagEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.Args: int startTaskIndex - The id of the start task or the connection string like '2-3-0'. <b>If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary</b>,int taskEndIndex - The id of the end task.,int connectionType - The type of the connection. A numeric value from 0 to 3. The connection type can be: <ul><li><b>0</b> - Start-to-Start connection.</li><li><b>1</b> - End-to-Start connection.</li><li><b>2</b> - End-to-End connection.</li><li><b>3</b> - Start-to-End connection.</li></ul>,int lag - The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.
CreateConnectionvoidint startTaskIndexEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.
CreateConnectionvoidstring startTaskIndex, string taskEndIndex, int connectionType, int lagEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.Args: string startTaskIndex - The id of the start task or the connection string like '2-3-0'. <b>If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary</b>,string taskEndIndex - The id of the end task.,int connectionType - The type of the connection. A numeric value from 0 to 3. The connection type can be: <ul><li><b>0</b> - Start-to-Start connection.</li><li><b>1</b> - End-to-Start connection.</li><li><b>2</b> - End-to-End connection.</li><li><b>3</b> - Start-to-End connection.</li></ul>,int lag - The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.
CreateConnectionvoidstring startTaskIndexEstablishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.
EndUpdatevoidN/AConcludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.
EnsureVisiblevoidobject taskIdEnsures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.Args: string taskId - The id of the target Task.
EnsureVisiblevoidstring taskIdEnsures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.Args: string taskId - The id of the target Task.
EnsureVisiblevoidint taskIdEnsures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.Args: int taskId - The id of the target Task.
Expandvoidobject idExpands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.Args: string id - The id of a project task that should be expanded.
Expandvoidstring idExpands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.Args: string id - The id of a project task that should be expanded.
Expandvoidint idExpands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.Args: string id - The id of a project task that should be expanded.
ExportDatavoidstring dataFormat, object callbackExports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.Args: string dataFormat - Determines the format of the exported file. Three possible values are available: <ul><li><b>pdf</b></li><li><b>xlsx</b></li><li><b>html</b></li><li><b>tsv</b></li><li><b>csv</b></li><li><b>xml</b></li></ul>,object callback - A callback that allows to format the exported data based on a condition. For additional details, refer ro the Smart Export Documentation.
ExportDatavoidstring dataFormatExports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.
GetConnectionDetailsobjectstring connectionIdReturns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.Args: string connectionId - A connection id. Each connection has a unique id that is assigned when a connection is created.
GetConnectionsIEnumerable<object>N/ARetrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:<br/><br/>- **id**: A unique identifier for the connection.<br/>- **type**: The type or category of the connection (e.g., dependency, sequential, etc.).<br/>- **startTaskId**: The unique identifier of the task where the connection originates.<br/>- **endTaskId**: The unique identifier of the task where the connection terminates.<br/>- **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).<br/>- **endIndex**: The index position within the end task where the connection attaches.<br/>- **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.<br/><br/>This structure provides all necessary details for understanding the relationship and timing between connected tasks.
GetDataSourceAsync()Task<IEnumerable<object>>'N/A'Gets the &quot;DataSource&quot; property as Task&lt;IEnumerable&lt;object&gt;&gt;.
GetIsExpandedAsync()Task<bool>'N/A'Gets the &quot;IsExpanded&quot; property as Task&lt;bool&gt;.
GetItemPathstringobject itemReturns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.Args: object item - A GattChartTask/GanttChartResource item object.
GetResourceobjectobject itemIdReturns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.Args: string itemId - The id/path of a resource.
GetResourceobjectstring itemIdReturns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.Args: string itemId - The id/path of a resource.
GetResourceobjectint itemIdReturns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.Args: int itemId - The id/path of a resource.
GetResourceIndexintobject resourceReturns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.Args: object resource - A GanttChartResource object.
GetResourceTasksIEnumerable<object>object resourceReturns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.Args: object resource - A GanttChartResource object or it's id.
GetResourceTasksIEnumerable<object>string resourceReturns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.Args: string resource - A GanttChartResource object or it's id.
GetResourcesIEnumerable<object>N/AReturns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.
GetSelectedIdsIEnumerable<object>N/AReturns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.
GetSelectedResourcesIEnumerable<object>N/AReturns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.
GetSelectedTasksIEnumerable<object>N/AReturns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.
GetStateIEnumerable<object>N/AProvides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.
GetTaskobjectobject itemIdReturns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.Args: string itemId - The id/path of a task.
GetTaskobjectstring itemIdReturns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.Args: string itemId - The id/path of a task.
GetTaskobjectint itemIdReturns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.Args: int itemId - The id/path of a task.
GetTaskConnectionsobjectobject taskIdReturns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.Args: object taskId - A GanttChartTask object or it's id.
GetTaskConnectionsobjectstring taskIdReturns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.Args: string taskId - A GanttChartTask object or it's id.
GetTaskConnectionsobjectint taskIdReturns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.Args: int taskId - A GanttChartTask object or it's id.
GetTaskIndexintobject taskReturns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.Args: object task - A GattChartTask object.
GetTaskProjectobjectobject taskReturns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.Args: object task - A GantChartTask object.
GetTasksIEnumerable<object>N/AReturns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.
GetValueAsync()Task<string>'N/A'Gets the &quot;Value&quot; property as Task&lt;string&gt;.
GetWorkingHoursIEnumerable<object>N/AReturns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).
HideTooltipIEnumerable<object>N/AConceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.
InsertResourcevoidobject resourceId, object resourceObjectAdds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.Args: string resourceId - A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.,object resourceObject - An object describing a Gantt Chart resource.
InsertResourcevoidobject resourceIdAdds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.
InsertTaskobjectobject taskObject, object project, int indexInserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.Args: object taskObject - An object describing a Gantt Chart task.,object project - A number or string that represents the id of a project (e.g. '0') or a project object definition present in the GanttChart. This parameter determines the parent project of the task that will be inserted. If <b>null</b> is passed as an arguemnt the new task will be inserted at root level without a parent project.,int index - The index where the new item should be inserted(e.g. 2). This index will determine the position of the newly inserted task.
InsertTaskobjectobject taskObjectInserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.
IsWorkingDayvoidDateTime dateDetermines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.Args: DateTime date - A javascript Date object or a string/number which represents a valid JS Date.
LoadStatevoidIEnumerable<object> stateEnhancement:<br/><br/>Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.Args: IEnumerable<string> state - An Array containing a valid structure of Gantt Chart tasks.
LoadStatevoidN/AEnhancement:

Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.
OpenWindowvoidobject taskIdOpens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.Args: object taskId - A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').
OpenWindowvoidstring taskIdOpens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.Args: string taskId - A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').
OpenWindowvoidint taskIdOpens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.Args: int taskId - A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').
PrintvoidN/AConfigures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.
Refreshvoid'N/A'Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements.
Refreshvoidbool fullRefreshRefreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.Args: bool fullRefresh - If set the GanttChart will be re-rendered completely.
RefreshvoidN/ARefreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.
RemoveAllConnectionsvoidN/ARemoves all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.
RemoveConnectionobjectobject startTaskIndex, int taskEndIndex, int connectionTypeRemoves a connection between two tasks. <br/>The function can be called in one of two ways:<br/><br/>1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").<br/>2. With a single connection string argument that describes the connection (e.g., "1->2:FS").<br/><br/>This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.Args: object startTaskIndex - The index of the start task or the connection string like '2-3-0.,int taskEndIndex - The index of the end task.,int connectionType - The type of the connection. A numeric value from 0 to 3.
RemoveConnectionobjectobject startTaskIndexRemoves a connection between two tasks.
The function can be called in one of two ways:

1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").
2. With a single connection string argument that describes the connection (e.g., "1->2:FS").

This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.
RemoveConnectionobjectint startTaskIndex, int taskEndIndex, int connectionTypeRemoves a connection between two tasks. <br/>The function can be called in one of two ways:<br/><br/>1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").<br/>2. With a single connection string argument that describes the connection (e.g., "1->2:FS").<br/><br/>This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.Args: int startTaskIndex - The index of the start task or the connection string like '2-3-0.,int taskEndIndex - The index of the end task.,int connectionType - The type of the connection. A numeric value from 0 to 3.
RemoveConnectionobjectint startTaskIndexRemoves a connection between two tasks.
The function can be called in one of two ways:

1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").
2. With a single connection string argument that describes the connection (e.g., "1->2:FS").

This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.
RemoveConnectionobjectstring startTaskIndex, int taskEndIndex, int connectionTypeRemoves a connection between two tasks. <br/>The function can be called in one of two ways:<br/><br/>1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").<br/>2. With a single connection string argument that describes the connection (e.g., "1->2:FS").<br/><br/>This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.Args: string startTaskIndex - The index of the start task or the connection string like '2-3-0.,int taskEndIndex - The index of the end task.,int connectionType - The type of the connection. A numeric value from 0 to 3.
RemoveConnectionobjectstring startTaskIndexRemoves a connection between two tasks.
The function can be called in one of two ways:

1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").
2. With a single connection string argument that describes the connection (e.g., "1->2:FS").

This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.
RemoveResourcevoidobject resourceIdDeletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.Args: object resourceId - A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.
RemoveResourcevoidstring resourceIdDeletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.Args: string resourceId - A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.
RemoveResourcevoidint resourceIdDeletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.Args: int resourceId - A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.
RemoveTaskvoidobject taskIdRemoves the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.Args: object taskId - A number or string that represents the id of a task or the actual item object.
RemoveTaskvoidstring taskIdRemoves the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.Args: string taskId - A number or string that represents the id of a task or the actual item object.
RemoveTaskvoidint taskIdRemoves the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.Args: int taskId - A number or string that represents the id of a task or the actual item object.
RemoveTaskConnectionvoidobject taskStart, object taskEndDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.Args: object taskStart - The start task object or it's id.,object taskEnd - The end task object or it's id.
RemoveTaskConnectionvoidobject taskStartDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.
RemoveTaskConnectionvoidint taskStart, int taskEndDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.Args: int taskStart - The start task object or it's id.,int taskEnd - The end task object or it's id.
RemoveTaskConnectionvoidint taskStartDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.
RemoveTaskConnectionvoidstring taskStart, string taskEndDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.Args: string taskStart - The start task object or it's id.,string taskEnd - The end task object or it's id.
RemoveTaskConnectionvoidstring taskStartDeletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.
Rendervoid'N/A'Re-renders the Blazor Component. This method will make a full re-render.
SaveStatevoidIEnumerable<object> stateStores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. "Note: The element must have a unique <code>id</code> attribute assigned for this functionality to work properly."Args: IEnumerable<string> state - An Array containing a valid structure of Gantt Chart tasks.
SaveStatevoidN/AStores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. Note: The element must have a unique id attribute assigned for this functionality to work properly.
ScrollToDatevoidDateTime dateScrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.Args: DateTime date - The date to scroll to.
SelectResourcevoidobject idEnables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.Args: string id - The id of the resource to select.
SelectResourcevoidstring idEnables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.Args: string id - The id of the resource to select.
SelectResourcevoidint idEnables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.Args: string id - The id of the resource to select.
SelectTaskvoidobject idEnables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.Args: string id - The id of the task to select.
SelectTaskvoidstring idEnables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.Args: string id - The id of the task to select.
SelectTaskvoidint idEnables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.Args: string id - The id of the task to select.
SetLocalevoidstring locale, object messagesSets the locale of a component.Args: string locale - The locale abbreviation. For example: 'de'.,object messages - Object containing the locale messages.
SetLocalevoidstring localeSets the locale of a component.
SetWorkTimevoidIEnumerable<object> settingsEnables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.Args: IEnumerable<object> settings - An object definition that contains the days and hours that should be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
SetWorkTimevoidstring settingsEnables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.Args: string settings - An object definition that contains the days and hours that should be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
ShowTooltipvoidobject target, string contentDisplays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.Args: object target - The HTMLElement that will be the target of the tooltip.,string content - Allows to set a custom content for the Tooltip.
ShowTooltipvoidobject targetDisplays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.
Sortvoidobject columnsAutomatically sorts the tasks and resources in the GanttChart when the <b>sortable</b> option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.Args: object columns - An Array of objects which determine which columns to be sorted, the sort order and the type of item to sort: task or resource. If no arguments are provided sorting will be removed. <br /> An object should have the following properties: <ul><li><b>value</b> - a string that represents the value of a <b>taskColumn</b> to sort.</li><li><b>sortOrder</b> - a string that represents the sorting order for the column: 'asc' (asscending sorting) or 'desc' (descending) are possible values. </li><li><b>type</b> - a string that represents the type of item to sort. This property determines which panel will be sorted. Two possible values: 'task', 'resource'.</li></ul>
StateHasChangedvoid'N/A'Refreshes the state and Re-renders the Blazor Component, if necessary.
UnselectResourcevoidobject idEnables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.Args: string id - The id of the resource to unselect.
UnselectResourcevoidstring idEnables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.Args: string id - The id of the resource to unselect.
UnselectResourcevoidint idEnables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.Args: string id - The id of the resource to unselect.
UnselectTaskvoidobject idEnables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.Args: string id - The id of the task to unselect.
UnselectTaskvoidstring idEnables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.Args: string id - The id of the task to unselect.
UnselectTaskvoidint idEnables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.Args: string id - The id of the task to unselect.
UnsetWorkTimevoidIEnumerable<object> settingsRemoves any previously defined working hours for the user or resource. This method serves as the counterpart to <b>setWorkingTime</b>, effectively clearing or resetting the working time settings that were established earlier.Args: IEnumerable<object> settings - An object definition that contains the days and hours that should not be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
UnsetWorkTimevoidstring settingsRemoves any previously defined working hours for the user or resource. This method serves as the counterpart to <b>setWorkingTime</b>, effectively clearing or resetting the working time settings that were established earlier.Args: string settings - An object definition that contains the days and hours that should not be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
UpdateResourcevoidobject resourceId, object taskObjectUpdates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.Args: object resourceId - A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following smartTree syntax), or a number that represents the index of a resource.,object taskObject - An object describing a Gantt Chart resource. The properties of this object will be applied to the target resource.
UpdateTaskvoidobject taskId, object taskObjectUpdates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.Args: object taskId - A number or string that represents the id of a task/project(e.g. '0') or the object definition of the task/project.,object taskObject - An object describing a Gantt Chart task. The properties of this object will be applied to the desired task.

GanttChart Events

NameTypeDescriptionEvent Detail
OnBeginUpdateEventCallback<Event>This event is triggered when a batch update operation begins, specifically after the <b>beginUpdate</b> method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.N/A
BeginUpdatedevent GanttChartBeginUpdatedEventHandlerThis event is triggered when a batch update operation begins, specifically after the <b>beginUpdate</b> method has been executed. It signals that subsequent changes to the data will be grouped as part of a batch, allowing for improved performance and deferred processing until the update process is completed.GanttChartBeginUpdatedEventArgs
OnEndUpdateEventCallback<Event>This event is triggered after the <b>endUpdate</b> method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.N/A
EndUpdatedevent GanttChartEndUpdatedEventHandlerThis event is triggered after the <b>endUpdate</b> method has been executed, indicating that a batch update operation has completed. It signals that any batched changes have been applied, and the system can now perform follow-up actions or refresh the affected components.GanttChartEndUpdatedEventArgs
OnConnectionStartEventCallback<Event>This event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.dynamic startIndex- The index of the task that a connection is started from.
ConnectionStartedevent GanttChartConnectionStartedEventHandlerThis event is fired when the user initiates the process of connecting one task to another—such as starting to draw a link or dependency between two tasks. Within the event handler, you can call event.preventDefault() to cancel the connection operation before it completes. This provides an opportunity to validate conditions, enforce business rules, or restrict certain connections as needed.GanttChartConnectionStartedEventArgs
OnConnectionEndEventCallback<Event>This event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.string id- The id of the connection that was created., dynamic startTaskId- The id of the task that a connection is started from., dynamic startIndex- The index of the task that a connection is started from., dynamic endIndex- The index of the task that a connection ended to., dynamic endTaskId- The id of the task that a connection ended to., dynamic type- The type of connection. Fours types are available: <ul><li><b>0</b> - start-to-start</li><li><b>1</b> - end-to-start</li><li><b>2</b> - end-to-end</li><li><b>3</b> - start-to-end</li></ul>
ConnectionEndedevent GanttChartConnectionEndedEventHandlerThis event is triggered when the user successfully establishes a link or dependency between two distinct tasks, typically by connecting their endpoints within the user interface. It signifies that a relationship (such as a workflow, sequence, or prerequisite) has been created between the selected tasks.GanttChartConnectionEndedEventArgs
OnChangeEventCallback<Event>This event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.dynamic value- The index of the new selected task., dynamic oldValue- The index of the previously selected task.
Changedevent GanttChartChangedEventHandlerThis event is triggered whenever a user selects or deselects a Task item. It fires both when a Task becomes selected and when a previously selected Task is unselected, allowing you to respond to changes in Task selection state.GanttChartChangedEventArgs
OnColumnResizeEventCallback<Event>This event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the <b>columnResize</b> property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.string dataField- The name of the column. Corresponds to the <b>value</b> attribute of a <b>taskColumns/resourceColumns</b> object., dynamic headerCellElement- The HTMLElement column cell element that was resized., string widthInPercentages- The new width of the column in percentages., string width- The new width of the column in pixels.
ColumnResizedevent GanttChartColumnResizedEventHandlerThis event is triggered whenever a column within the Tree component is resized by the user. You can enable or disable column resizing functionality using the <b>columnResize</b> property. When column resizing is enabled, this event allows you to respond to changes in column width, such as updating layout or saving user preferences.GanttChartColumnResizedEventArgs
OnClosingEventCallback<Event>This event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.dynamic owner- The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip., dynamic item- The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip., dynamic target- The instance of the window/tooltip that is going to close., dynamic type- The type of window/tooltip that is going to close. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
Closingevent GanttChartClosingEventHandlerThis event is fired immediately before the task editing window or tooltip is about to close. At this stage, you have the opportunity to intercept and prevent the closing operation by calling event.preventDefault() within your event handler. This allows you to perform validation, display confirmation dialogs, or execute other logic before the window or tooltip is dismissed.GanttChartClosingEventArgs
OnCloseEventCallback<Event>This event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.dynamic owner- The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip, dynamic item- The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip., dynamic target- The instance of the window/tooltip that is closed., dynamic type- The type of window/tooltip that is closed. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
Closedevent GanttChartClosedEventHandlerThis event is triggered when the task editing window is closed or hidden by the user. It indicates that the user has exited the task editing interface, either by saving changes, cancelling, or clicking outside the window. This event can be used to perform cleanup actions, update the UI, or save edits as necessary.GanttChartClosedEventArgs
OnCollapseEventCallback<Event>This event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.dynamic isGroup- A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled., dynamic item- The object details of the collapsed item., int index- The index of the collapsed item., string label- The label of the collapsed item., dynamic value- The value of the collapsed item.
Collapsedevent GanttChartCollapsedEventHandlerThis event is triggered whenever a user collapses an item, such as hiding or minimizing a section, panel, or list element within the interface. It enables developers to execute custom logic or UI updates in response to the item's transition from an expanded (visible) state to a collapsed (hidden or minimized) state.GanttChartCollapsedEventArgs
OnDragStartEventCallback<Event>This event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.string id- The id of the task that is going to be dragged., dynamic item- The object of the task that is going to be dragged., dynamic dateStart- The start date of the task that is going to be dragged., dynamic dateEnd- The end date of the task that is going to be dragged., dynamic segment- The segment object that is going to be dragged. This attribute is undefined if a segment is not going to be dragged.
DragStartedevent GanttChartDragStartedEventHandlerThis event is triggered when a user begins dragging a task element. In the event handler function, you can call event.preventDefault() to cancel or prevent the drag operation from proceeding. This allows you to implement custom logic to determine whether dragging should be allowed for a specific task, based on application requirements.GanttChartDragStartedEventArgs
OnDragEndEventCallback<Event>This event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.string id- The id of the task that is was dragged., dynamic item- The object of the task that is was dragged., dynamic dateStart- The start date of the task that is was dragged., dynamic dateEnd- The end date of the task that is was dragged., dynamic segment- The segment object that was dragged. This attribute is undefined if a segment has not been dragged.
DragEndedevent GanttChartDragEndedEventHandlerThis event is triggered when the user completes dragging a task and releases it, indicating the end of the drag-and-drop operation for that specific task. It can be used to perform actions such as updating the task's position, saving changes, or triggering related callbacks after the drag action concludes.GanttChartDragEndedEventArgs
OnExpandEventCallback<Event>This event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.dynamic isGroup- A boolean flag indicating whether the collapsed item is a resource group. This is the case when <b>groupByResoruces</b> is enabled., dynamic item- The index of the expanded item., int index- The index of the expanded item., string label- The label of the expanded item., dynamic value- The value of the expanded item.
Expandedevent GanttChartExpandedEventHandlerThis event is triggered when a user expands an item, such as clicking to reveal additional content or details. It can be used to execute custom logic in response to the item's expansion, such as loading more data, updating the user interface, or tracking user interactions.GanttChartExpandedEventArgs
OnFilterEventCallback<Event>This event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.dynamic type- The type of items that have been filtered ( task or resource )., dynamic action- The name of the filtering action (whether filtering is added or removed)., dynamic filters- The filters that have been applied. Filters represent JQX.Utilities.FilterGroup objects.
Filteredevent GanttChartFilteredEventHandlerThis event is triggered whenever a filter is applied to the GanttChart, such as when the user sets specific criteria to display only certain tasks or time periods. It allows developers to execute custom logic in response to filtering actions, such as updating related UI components or fetching additional data based on the current filter state.GanttChartFilteredEventArgs
OnItemClickEventCallback<Event>This event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.string id- The id of the task., dynamic item- The item that was clicked. It can be a task, resource or connection., dynamic type- The type of item. Possible values are: 'task', 'project', 'resource', 'connection'., dynamic originalEvent- The original DOM event.
ItemClickedevent GanttChartItemClickedEventHandlerThis event is triggered whenever a user clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.GanttChartItemClickedEventArgs
OnItemDoubleClickEventCallback<Event>This event is triggered whenever a user double clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.string id- The id of the task., dynamic item- The item that was clicked. It can be a task, resource or connection., dynamic type- The type of item. Possible values are: 'task', 'project', 'resource', 'connection'., dynamic originalEvent- The original DOM event.
ItemDoubleClickedevent GanttChartItemDoubleClickedEventHandlerThis event is triggered whenever a user double clicks on a task, resource, or connection within either the Timeline area or the Tree columns of the interface. It enables developers to handle user interactions with these elements, allowing for custom behaviors or actions in response to the selection.GanttChartItemDoubleClickedEventArgs
OnItemInsertEventCallback<Event>This event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.dynamic type- The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'., dynamic item- An object that represents the actual item with it's attributes.
ItemInsertedevent GanttChartItemInsertedEventHandlerThis event is triggered whenever a new Task, Resource, or Connection is added to the system—such as when a user creates a new task, assigns a new resource, or establishes a new connection between entities. The event allows you to handle actions or updates related to these insertions in real time.GanttChartItemInsertedEventArgs
OnItemRemoveEventCallback<Event>This event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.string id- The id of the task., dynamic type- The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'., dynamic item- An object that represents the actual item with it's attributes.
ItemRemovedevent GanttChartItemRemovedEventHandlerThis event is triggered whenever a Task, Resource, or Connection is deleted or removed from the system. It allows you to perform actions or update the user interface in response to the removal of these entities. The event provides relevant information about the item that was removed, enabling you to handle cleanup, logging, or other custom behaviors as needed.GanttChartItemRemovedEventArgs
OnItemUpdateEventCallback<Event>This event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.string id- The id of the task., dynamic type- The type of item that has been modified. The type could be: 'connection', 'task', 'project', 'resource'., dynamic item- An object that represents the actual item with it's attributes.
ItemUpdatedevent GanttChartItemUpdatedEventHandlerThis event is triggered whenever a Task, Resource, or Connection undergoes an update. This includes changes to properties, status, or associations within any of these entities. Use this event to respond to modifications such as edits, status transitions, or reassignments involving Tasks, Resources, or Connections in the system.GanttChartItemUpdatedEventArgs
OnOpeningEventCallback<Event>This event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.dynamic owner- The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip, dynamic item- The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip., dynamic target- The instance of the window/tooltip that is going to open., dynamic type- The type of window/tooltip that is going to open. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
Openingevent GanttChartOpeningEventHandlerThis event is fired immediately before the task editing window or tooltip is about to open. At this stage, you have the opportunity to intercept and potentially cancel the opening operation by calling event.preventDefault() within your event handler. This allows you to implement custom logic to control whether the editing window or tooltip should be displayed.GanttChartOpeningEventArgs
OnOpenEventCallback<Event>This event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.dynamic owner- The HTMLElement that is the owner of the tooltip. This attribute is defined only when the event is related to the tooltip, dynamic item- The item object that is related to the tooltip owner. It can be a task/segment/resource/indicator object. This attribute is defined only when the event is related to the tooltip., dynamic target- The instance of the window/tooltip that is opened., dynamic type- The type of window/tooltip that is opened. There are three types of windows inside GanttChart: <ul><li><b>confirm</b> - a confirm window. This type of window is usually used to confirm the deletion of a task.</li><li><b>task</b> - a window used for task editing.</li><li><b>connection</b> - a window used to delete a connection.</li></ul>. If the event is a tooltip event, there are several tooltip types: <ul><li>indicator - when the tooltip owner is an indicator.</li><li>segment - when the tooltip owner is a task segment.</li><li>task - when the tooltip owner is a task.</li><li>resource - when the tooltip target is a resource.</li></ul>
Openedevent GanttChartOpenedEventHandlerThis event is triggered whenever the task editing window becomes visible, such as when a user opens the edit task modal or interface. It is also triggered whenever a tooltip related to task actions is shown. This allows developers to respond to both the display of the task edit view and the appearance of relevant tooltips.GanttChartOpenedEventArgs
OnProgressChangeStartEventCallback<Event>This event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.string id- The id of the task., int index- The index of the task which progress is going to be changed., dynamic progress- The progress of the task before it is changed.
ProgressChangeStartedevent GanttChartProgressChangeStartedEventHandlerThis event is fired whenever the progress of a task bar begins to change due to user interaction, such as dragging the progress handle or clicking on the bar. Within the event handler, you can call event.preventDefault() to cancel or prevent the progress update from occurring. This provides an opportunity to validate the operation or implement custom logic before the task bar value is changed.GanttChartProgressChangeStartedEventArgs
OnProgressChangeEndEventCallback<Event>This event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).string id- The id of the task., int index- The index of the task which progress is has been changed., dynamic progress- The progress of the task after it was changed.
ProgressChangeEndedevent GanttChartProgressChangeEndedEventHandlerThis event is triggered whenever there is an update to a task's progress value. It occurs each time the task progresses, such as when a user completes a step or when the system automatically tracks advancement. The event provides updated information about the current state of the task’s progress, enabling UI elements or other components to respond accordingly (e.g., updating a progress bar or displaying status messages).GanttChartProgressChangeEndedEventArgs
OnResizeStartEventCallback<Event>This event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.string id- The id of the task that is going to be resized., dynamic item- The object of the task that is going to be resized., dynamic dateStart- The start date of the task that is going to be resized., dynamic dateEnd- The end date of the task that is going to be resized., dynamic segment- The segment object that is going to be resized. This attribute is undefined if a segment is not going to be resized.
ResizeStartedevent GanttChartResizeStartedEventHandlerThis event is triggered when the user begins resizing a task, such as changing its duration or endpoints. Within the event handler function, you can prevent the resizing operation from proceeding by calling event.preventDefault(). This allows developers to implement custom logic or validation before allowing the resize action to continue.GanttChartResizeStartedEventArgs
OnResizeEndEventCallback<Event>This event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.string id- The id of the task that was resized., dynamic item- The object of the task that was resized., dynamic dateStart- The start date of the task that was resized., dynamic dateEnd- The end date of the task that was resized., dynamic segment- The segment object that was resized. This attribute is undefined if a segment has not been resized.
ResizeEndedevent GanttChartResizeEndedEventHandlerThis event is triggered when a user completes resizing a task, indicating that the resize action has ended and the new task size has been set.GanttChartResizeEndedEventArgs
OnSortEventCallback<Event>This event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.dynamic type- The type of columns that have been sorted ( task or resource column )., dynamic columns- An array of objects that contains the currently sorted column objects., dynamic sortDataFields- The dataFields of the columns that have been sorted. The dataField corresponds to the <b>value</b> property of a <b>taskColumns/resourceColumns</b> object., dynamic sortOrders- The orders of the columns that have been sorted., dynamic sortDataTypes- The data types of the columns that have been sorted.
Sortedevent GanttChartSortedEventHandlerThis event is triggered whenever the user sorts the GanttChart by clicking on a column header. It fires each time the sorting order or the sorted column changes, allowing you to respond to updates in the displayed task order.GanttChartSortedEventArgs
OnScrollBottomReachedEventCallback<Event>This event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.N/A
ScrollBottomReachedevent GanttChartScrollBottomReachedEventHandlerThis event is triggered when the user scrolls to the very bottom of the Timeline component, indicating that all currently loaded timeline items have been reached. It can be used to implement features such as infinite scrolling or loading additional content when the end of the timeline is visible.GanttChartScrollBottomReachedEventArgs
OnScrollTopReachedEventCallback<Event>This event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.N/A
ScrollTopReachedevent GanttChartScrollTopReachedEventHandlerThis event is triggered when the Timeline component reaches its uppermost scroll position, indicating that the user has scrolled all the way to the top of the Timeline. Use this event to load earlier items, display notifications, or perform other actions when the beginning of the Timeline is reached.GanttChartScrollTopReachedEventArgs
OnScrollLeftReachedEventCallback<Event>This event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.N/A
ScrollLeftReachedevent GanttChartScrollLeftReachedEventHandlerThis event is triggered when the user scrolls the Timeline component all the way to the start of its horizontal axis, reaching the earliest (leftmost) visible position. Use this event to detect when the Timeline has reached its starting boundary during horizontal scrolling.GanttChartScrollLeftReachedEventArgs
OnScrollRightReachedEventCallback<Event>This event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.N/A
ScrollRightReachedevent GanttChartScrollRightReachedEventHandlerThis event is triggered when the user scrolls to the far right end of the Timeline component horizontally, indicating that no additional content is available in that direction.GanttChartScrollRightReachedEventArgs

Enums

GanttChartDataExportItemType

GanttChartDataExportItemType.Task
GanttChartDataExportItemType.Resource

GanttDayFormat

GanttDayFormat.TwoDigit
GanttDayFormat.Numeric
GanttDayFormat.Long
GanttDayFormat.Short
GanttDayFormat.Narrow

Duration

Duration.Day
Duration.Hour
Duration.Minute
Duration.Second
Duration.Milisecond

HorizontalScrollBarVisibility

HorizontalScrollBarVisibility.Auto
HorizontalScrollBarVisibility.Disabled
HorizontalScrollBarVisibility.Hidden
HorizontalScrollBarVisibility.Visible

HourFormat

HourFormat.Default
HourFormat.TwoDigit
HourFormat.Numeric

MonthFormat

MonthFormat.TwoDigit
MonthFormat.Numeric
MonthFormat.Long
MonthFormat.Short
MonthFormat.Narrow

MonthScale

MonthScale.Day
MonthScale.Week

QuarterFormat

QuarterFormat.Numeric
QuarterFormat.Long
QuarterFormat.Short

GanttChartResourceTimelineMode

GanttChartResourceTimelineMode.Diagram
GanttChartResourceTimelineMode.Histogram
GanttChartResourceTimelineMode.Custom

GanttChartResourceTimelineView

GanttChartResourceTimelineView.Hours
GanttChartResourceTimelineView.Tasks
GanttChartResourceTimelineView.Custom

GanttChartSelectionMode

GanttChartSelectionMode.One
GanttChartSelectionMode.Many
GanttChartSelectionMode.Extended

GanttChartSortMode

GanttChartSortMode.None
GanttChartSortMode.One
GanttChartSortMode.Many

GanttChartTaskType

GanttChartTaskType.Project
GanttChartTaskType.Milestone
GanttChartTaskType.Task

VerticalScrollBarVisibility

VerticalScrollBarVisibility.Auto
VerticalScrollBarVisibility.Disabled
VerticalScrollBarVisibility.Hidden
VerticalScrollBarVisibility.Visible

GanttChartView

GanttChartView.Day
GanttChartView.Week
GanttChartView.Month
GanttChartView.Quarter
GanttChartView.Year

YearFormat

YearFormat.TwoDigit
YearFormat.Numeric

WeekFormat

WeekFormat.Long
WeekFormat.Numeric

GanttChartDataExport Properties

NameTypeDefaultDescription
ExportFilteredboolfalseSpecifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.
FileNamestring"jqxGanttChart"Specifies the name of the file that will be generated and saved when the export operation is completed.
ItemTypeGanttChartDataExportItemTypeGanttChartDataExportItemType.TaskSpecifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.

GanttChartDateMarker Properties

NameTypeDefaultDescription
Labelstring""Determines the marker label.
DateobjectnullDetermines the date for the marker. The date can include time as well.
ClassNamestring""Allows to add a custom class name to the marker.

GanttChartResourceColumn Properties

NameTypeDefaultDescription
Labelstring""Column's label.
Valuestring""Column's value. The value shold reference an actual resoruce attribute.
Minobject0Column's min size.
Sizeobject0Column's size.

GanttChartTask Properties

NameTypeDefaultDescription
ConnectionsIEnumerable<object>nullTasks connection.
Classstring""Project, Task or Milestone CSS class.
DateStartobject""Project, Task or Milestone start date.
DateEndobject""Project, Task or Milestone end date.
Deadlineobject""Determines the deadline for the Project, Task or Milestone.
DisableResourcesboolfalseProject, Task or Milestone with disabled resources.
DisableDragboolfalseProject, Task or Milestone dragging is disabled.
DisableResizeboolfalseProject, Task or Milestone resizing is disabled.
DragProjectbooltrueProject, Task or Milestone drag enabled in the view.
Durationobject0The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.
IsExpandedboolfalseProject, Task or Milestone expanded state in the view.
HiddenobjectfalseTask visibility.
Idstring""Project, Task or Milestone id.
IndicatorsIEnumerable<IGanttChartTaskIndicator>nullDetermines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
Labelstring""Project, Task or Milestone label.
OnRenderobjectnullProject, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
  • task - the task object.
  • segment - the task current segment object. If the task has only one segment, the task object is passed again.
  • taskElement - the task's html element.
  • segmentElement - the task's segment html element.
  • labelElement - the task's segment label html element.
MaxDateStartobject""Project, Task or Milestone max start date.
MinDateStartobject""Project, Task or Milestone min start date.
MaxDateEndobject""Project, Task or Milestone max end date.
MinDateEndobject""Project, Task or Milestone min end date.
MinDurationobject0The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
MaxDurationobject0The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
OverdueboolfalseDetermines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
PlannedGanttChartTaskPlannednullDetermines the planned dateStart/dateEnd for as the baseline for the task.
Progressint0Project, Task or Milestone progress.
ResourcesIEnumerable<object>new List<object>()Project, Task or Milestone resources.
SegmentsIEnumerable<IGanttChartTaskSegment>nullDetermines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
SynchronizedboolfalseProject, Task or Milestone synchronized in the view.
TasksIEnumerable<object>new List<object>()Project's tasks. Only projects can have tasks.
TypeGanttChartTaskTypeGanttChartTaskType.TaskProject, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'
Valueobject""Project, Task or Milestone value.

GanttChartTaskIndicator Properties

NameTypeDefaultDescription
Labelstring""Indicator label.
Dateobject""Indicator date(can include time).
ClassNamestring""A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
Iconstring""Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
Tooltipstring""Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.

GanttChartTaskPlanned Properties

NameTypeDefaultDescription
DateStartobject""Determines the planned dateStart of the task.
DateEndobject""Determines the planned dateEnd of the task.
Durationobject0Determines the planned duration of the task.

GanttChartTaskSegment Properties

NameTypeDefaultDescription
Labelstring""Segment label.
DateStartobject""Segment start date.
DateEndobject""Segment end date.
DisableDragboolfalseDetermines whether segment dragging is disabled.
DisableResizeboolfalseDetermines whether segment resizing is disabled.
Durationobject0The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.

GanttChartTaskColumn Properties

NameTypeDefaultDescription
DisableEditboolfalseDetermines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.
DateFormatobjectnullApplies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property:
dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }
. Another option is to use a date format string. Built-in Date formats:
// short date pattern
'd' - 'M/d/yyyy',
// long date pattern
'D' - 'dddd, MMMM dd, yyyy',
// short time pattern
't' - 'h:mm tt',
// long time pattern
'T' - 'h:mm:ss tt',
// long date, short time pattern
'f' - 'dddd, MMMM dd, yyyy h:mm tt',
// long date, long time pattern
'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
// month/day pattern
'M' - 'MMMM dd',
// month/year pattern
'Y' - 'yyyy MMMM',
// S is a sortable format that does not vary by culture
'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

Date format strings:
'd'-the day of the month;
'dd'-the day of the month
'ddd'-the abbreviated name of the day of the week
'dddd'- the full name of the day of the week
'h'-the hour, using a 12-hour clock from 1 to 12
'hh'-the hour, using a 12-hour clock from 01 to 12

'H'-the hour, using a 24-hour clock from 0 to 23
'HH'- the hour, using a 24-hour clock from 00 to 23
'm'-the minute, from 0 through 59
'mm'-the minutes,from 00 though59
'M'- the month, from 1 through 12
'MM'- the month, from 01 through 12
'MMM'-the abbreviated name of the month
'MMMM'-the full name of the month
's'-the second, from 0 through 59
'ss'-the second, from 00 through 59
't'- the first character of the AM/PM designator
'tt'-the AM/PM designator
'y'- the year, from 0 to 99
'yy'- the year, from 00 to 99
'yyy'-the year, with a minimum of three digits
'yyyy'-the year as a four-digit number;
'yyyyy'-the year as a four-digit number.
NumberFormatobjectnullApplies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings:
'd' - decimal numbers.
'f' - floating-point numbers.
'n' - integer numbers.
'c' - currency numbers.
'p' - percentage numbers.

For adding decimal places to the numbers, add a number after the formatting stri

For example: 'c3' displays a number in this format $25.256
Labelstring""Column's label.
Valuestring""Column's value.
Sizeobject0Column's size.
MinWidthobject0Column's min width.
CustomEditorobjectnullA function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments:
  • name - the name of the task property that is going to be edited.
  • value - the value of the task property that is going to be edited.
It's also important to define a getCustomEditorValue to return the value from the custom editor.
GetCustomEditorValueobjectnullA function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
SetCustomEditorValueobjectnullA function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments -
  • editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
  • columnValue - the value property of the column.
  • value - the value of the task property that the column displays(the editor value).

GanttChartTooltip Properties

NameTypeDefaultDescription
ArrowboolfalseSpecifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.
Delayint50Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).
EnabledboolfalseDetermines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.
Offsetint[]nullSpecifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.