GanttChart Properties
GanttChart Methods
Name | Type | Arguments | Description |
---|---|---|---|
AddFilter | void | IEnumerable<object> columns, object filterGroup | Enables 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> |
BeginUpdate | void | N/A | Initiates 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. |
ClearFilters | void | N/A | Removes all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content. |
ClearResources | void | N/A | Deletes 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. |
ClearSelection | void | N/A | Deselects 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. |
ClearSort | void | N/A | Removes 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. |
ClearState | void | N/A | Removes 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." |
ClearTasks | void | N/A | Deletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage. |
CloseWindow | void | N/A | Closes 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. |
Collapse | void | object id | Collapses 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. |
Collapse | void | string id | Collapses 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. |
Collapse | void | int id | Collapses 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. |
CreateConnection | void | object startTaskIndex, object taskEndIndex, int connectionType, int lag | Establishes 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. |
CreateConnection | void | object startTaskIndex | Establishes 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. |
CreateConnection | void | int startTaskIndex, int taskEndIndex, int connectionType, int lag | Establishes 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. |
CreateConnection | void | int startTaskIndex | Establishes 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. |
CreateConnection | void | string startTaskIndex, string taskEndIndex, int connectionType, int lag | Establishes 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. |
CreateConnection | void | string startTaskIndex | Establishes 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. |
EndUpdate | void | N/A | Concludes 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. |
EnsureVisible | void | object taskId | Ensures 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. |
EnsureVisible | void | string taskId | Ensures 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. |
EnsureVisible | void | int taskId | Ensures 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. |
Expand | void | object id | Expands 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. |
Expand | void | string id | Expands 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. |
Expand | void | int id | Expands 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. |
ExportData | void | string dataFormat, object callback | Exports 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. |
ExportData | void | string dataFormat | Exports 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. |
GetConnectionDetails | object | string connectionId | Returns 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. |
GetConnections | IEnumerable<object> | N/A | Retrieves 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 "DataSource" property as Task<IEnumerable<object>>. |
GetIsExpandedAsync() | Task<bool> | 'N/A' | Gets the "IsExpanded" property as Task<bool>. |
GetItemPath | string | object item | Returns 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. |
GetResource | object | object itemId | Returns 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. |
GetResource | object | string itemId | Returns 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. |
GetResource | object | int itemId | Returns 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. |
GetResourceIndex | int | object resource | Returns 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. |
GetResourceTasks | IEnumerable<object> | object resource | Returns 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. |
GetResourceTasks | IEnumerable<object> | string resource | Returns 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. |
GetResources | IEnumerable<object> | N/A | Returns 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. |
GetSelectedIds | IEnumerable<object> | N/A | Returns 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. |
GetSelectedResources | IEnumerable<object> | N/A | Returns 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. |
GetSelectedTasks | IEnumerable<object> | N/A | Returns 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. |
GetState | IEnumerable<object> | N/A | Provides 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. |
GetTask | object | object itemId | Returns 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. |
GetTask | object | string itemId | Returns 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. |
GetTask | object | int itemId | Returns 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. |
GetTaskConnections | object | object taskId | Returns 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. |
GetTaskConnections | object | string taskId | Returns 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. |
GetTaskConnections | object | int taskId | Returns 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. |
GetTaskIndex | int | object task | Returns 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. |
GetTaskProject | object | object task | Returns 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. |
GetTasks | IEnumerable<object> | N/A | Returns 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 "Value" property as Task<string>. |
GetWorkingHours | IEnumerable<object> | N/A | Returns 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). |
HideTooltip | IEnumerable<object> | N/A | Conceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user. |
InsertResource | void | object resourceId, object resourceObject | Adds 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. |
InsertResource | void | object resourceId | Adds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion. |
InsertTask | object | object taskObject, object project, int index | Inserts 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. |
InsertTask | object | object taskObject | Inserts 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. |
IsWorkingDay | void | DateTime date | Determines 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. |
LoadState | void | IEnumerable<object> state | Enhancement:<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. |
LoadState | void | N/A | Enhancement: 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. |
OpenWindow | void | object taskId | Opens 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'). |
OpenWindow | void | string taskId | Opens 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'). |
OpenWindow | void | int taskId | Opens 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'). |
void | N/A | Configures 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. | |
Refresh | void | 'N/A' | Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements. |
Refresh | void | bool fullRefresh | Refreshes 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. |
Refresh | void | N/A | Refreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation. |
RemoveAllConnections | void | N/A | Removes 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. |
RemoveConnection | object | object startTaskIndex, int taskEndIndex, int connectionType | Removes 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. |
RemoveConnection | object | object startTaskIndex | Removes 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. |
RemoveConnection | object | int startTaskIndex, int taskEndIndex, int connectionType | Removes 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. |
RemoveConnection | object | int startTaskIndex | Removes 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. |
RemoveConnection | object | string startTaskIndex, int taskEndIndex, int connectionType | Removes 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. |
RemoveConnection | object | string startTaskIndex | Removes 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. |
RemoveResource | void | object resourceId | Deletes 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. |
RemoveResource | void | string resourceId | Deletes 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. |
RemoveResource | void | int resourceId | Deletes 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. |
RemoveTask | void | object taskId | Removes 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. |
RemoveTask | void | string taskId | Removes 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. |
RemoveTask | void | int taskId | Removes 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. |
RemoveTaskConnection | void | object taskStart, object taskEnd | Deletes 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. |
RemoveTaskConnection | void | object taskStart | Deletes 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. |
RemoveTaskConnection | void | int taskStart, int taskEnd | Deletes 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. |
RemoveTaskConnection | void | int taskStart | Deletes 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. |
RemoveTaskConnection | void | string taskStart, string taskEnd | Deletes 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. |
RemoveTaskConnection | void | string taskStart | Deletes 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. |
Render | void | 'N/A' | Re-renders the Blazor Component. This method will make a full re-render. |
SaveState | void | IEnumerable<object> state | Stores 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. |
SaveState | void | N/A | Stores 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. |
ScrollToDate | void | DateTime date | Scrolls 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. |
SelectResource | void | object id | Enables 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. |
SelectResource | void | string id | Enables 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. |
SelectResource | void | int id | Enables 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. |
SelectTask | void | object id | Enables 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. |
SelectTask | void | string id | Enables 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. |
SelectTask | void | int id | Enables 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. |
SetLocale | void | string locale, object messages | Sets the locale of a component.Args: string locale - The locale abbreviation. For example: 'de'.,object messages - Object containing the locale messages. |
SetLocale | void | string locale | Sets the locale of a component. |
SetWorkTime | void | IEnumerable<object> settings | Enables 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. |
SetWorkTime | void | string settings | Enables 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. |
ShowTooltip | void | object target, string content | Displays 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. |
ShowTooltip | void | object target | Displays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element. |
Sort | void | object columns | Automatically 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> |
StateHasChanged | void | 'N/A' | Refreshes the state and Re-renders the Blazor Component, if necessary. |
UnselectResource | void | object id | Enables 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. |
UnselectResource | void | string id | Enables 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. |
UnselectResource | void | int id | Enables 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. |
UnselectTask | void | object id | Enables 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. |
UnselectTask | void | string id | Enables 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. |
UnselectTask | void | int id | Enables 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. |
UnsetWorkTime | void | IEnumerable<object> settings | Removes 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. |
UnsetWorkTime | void | string settings | Removes 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. |
UpdateResource | void | object resourceId, object taskObject | Updates 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. |
UpdateTask | void | object taskId, object taskObject | Updates 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
Name | Type | Description | Event Detail |
---|---|---|---|
OnBeginUpdate | EventCallback<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 |
BeginUpdated | event GanttChartBeginUpdatedEventHandler | 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. | GanttChartBeginUpdatedEventArgs |
OnEndUpdate | EventCallback<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 |
EndUpdated | event GanttChartEndUpdatedEventHandler | 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. | GanttChartEndUpdatedEventArgs |
OnConnectionStart | EventCallback<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. |
ConnectionStarted | event GanttChartConnectionStartedEventHandler | 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. | GanttChartConnectionStartedEventArgs |
OnConnectionEnd | EventCallback<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> |
ConnectionEnded | event GanttChartConnectionEndedEventHandler | 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. | GanttChartConnectionEndedEventArgs |
OnChange | EventCallback<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. |
Changed | event GanttChartChangedEventHandler | 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. | GanttChartChangedEventArgs |
OnColumnResize | EventCallback<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. |
ColumnResized | event GanttChartColumnResizedEventHandler | 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. | GanttChartColumnResizedEventArgs |
OnClosing | EventCallback<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> |
Closing | event GanttChartClosingEventHandler | 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. | GanttChartClosingEventArgs |
OnClose | EventCallback<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> |
Closed | event GanttChartClosedEventHandler | 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. | GanttChartClosedEventArgs |
OnCollapse | EventCallback<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. |
Collapsed | event GanttChartCollapsedEventHandler | 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. | GanttChartCollapsedEventArgs |
OnDragStart | EventCallback<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. |
DragStarted | event GanttChartDragStartedEventHandler | 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. | GanttChartDragStartedEventArgs |
OnDragEnd | EventCallback<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. |
DragEnded | event GanttChartDragEndedEventHandler | 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. | GanttChartDragEndedEventArgs |
OnExpand | EventCallback<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. |
Expanded | event GanttChartExpandedEventHandler | 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. | GanttChartExpandedEventArgs |
OnFilter | EventCallback<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. |
Filtered | event GanttChartFilteredEventHandler | 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. | GanttChartFilteredEventArgs |
OnItemClick | EventCallback<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. |
ItemClicked | event GanttChartItemClickedEventHandler | 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. | GanttChartItemClickedEventArgs |
OnItemDoubleClick | EventCallback<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. |
ItemDoubleClicked | event GanttChartItemDoubleClickedEventHandler | 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. | GanttChartItemDoubleClickedEventArgs |
OnItemInsert | EventCallback<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. |
ItemInserted | event GanttChartItemInsertedEventHandler | 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. | GanttChartItemInsertedEventArgs |
OnItemRemove | EventCallback<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. |
ItemRemoved | event GanttChartItemRemovedEventHandler | 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. | GanttChartItemRemovedEventArgs |
OnItemUpdate | EventCallback<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. |
ItemUpdated | event GanttChartItemUpdatedEventHandler | 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. | GanttChartItemUpdatedEventArgs |
OnOpening | EventCallback<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> |
Opening | event GanttChartOpeningEventHandler | 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. | GanttChartOpeningEventArgs |
OnOpen | EventCallback<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> |
Opened | event GanttChartOpenedEventHandler | 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. | GanttChartOpenedEventArgs |
OnProgressChangeStart | EventCallback<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. |
ProgressChangeStarted | event GanttChartProgressChangeStartedEventHandler | 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. | GanttChartProgressChangeStartedEventArgs |
OnProgressChangeEnd | EventCallback<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. |
ProgressChangeEnded | event GanttChartProgressChangeEndedEventHandler | 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). | GanttChartProgressChangeEndedEventArgs |
OnResizeStart | EventCallback<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. |
ResizeStarted | event GanttChartResizeStartedEventHandler | 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. | GanttChartResizeStartedEventArgs |
OnResizeEnd | EventCallback<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. |
ResizeEnded | event GanttChartResizeEndedEventHandler | 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. | GanttChartResizeEndedEventArgs |
OnSort | EventCallback<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. |
Sorted | event GanttChartSortedEventHandler | 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. | GanttChartSortedEventArgs |
OnScrollBottomReached | EventCallback<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 |
ScrollBottomReached | event GanttChartScrollBottomReachedEventHandler | 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. | GanttChartScrollBottomReachedEventArgs |
OnScrollTopReached | EventCallback<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 |
ScrollTopReached | event GanttChartScrollTopReachedEventHandler | 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. | GanttChartScrollTopReachedEventArgs |
OnScrollLeftReached | EventCallback<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 |
ScrollLeftReached | event GanttChartScrollLeftReachedEventHandler | 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. | GanttChartScrollLeftReachedEventArgs |
OnScrollRightReached | EventCallback<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 |
ScrollRightReached | event GanttChartScrollRightReachedEventHandler | 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. | 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
Name | Type | Default | Description |
---|---|---|---|
ExportFiltered | bool | false | Specifies 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. |
FileName | string | "jqxGanttChart" | Specifies the name of the file that will be generated and saved when the export operation is completed. |
ItemType | GanttChartDataExportItemType | GanttChartDataExportItemType.Task | Specifies 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
Name | Type | Default | Description |
---|---|---|---|
Label | string | "" | Determines the marker label. |
Date | object | null | Determines the date for the marker. The date can include time as well. |
ClassName | string | "" | Allows to add a custom class name to the marker. |
GanttChartResourceColumn Properties
Name | Type | Default | Description |
---|---|---|---|
Label | string | "" | Column's label. |
Value | string | "" | Column's value. The value shold reference an actual resoruce attribute. |
Min | object | 0 | Column's min size. |
Size | object | 0 | Column's size. |
GanttChartTask Properties
Name | Type | Default | Description |
---|---|---|---|
Connections | IEnumerable<object> | null | Tasks connection. |
Class | string | "" | Project, Task or Milestone CSS class. |
DateStart | object | "" | Project, Task or Milestone start date. |
DateEnd | object | "" | Project, Task or Milestone end date. |
Deadline | object | "" | Determines the deadline for the Project, Task or Milestone. |
DisableResources | bool | false | Project, Task or Milestone with disabled resources. |
DisableDrag | bool | false | Project, Task or Milestone dragging is disabled. |
DisableResize | bool | false | Project, Task or Milestone resizing is disabled. |
DragProject | bool | true | Project, Task or Milestone drag enabled in the view. |
Duration | object | 0 | The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property. |
IsExpanded | bool | false | Project, Task or Milestone expanded state in the view. |
Hidden | object | false | Task visibility. |
Id | string | "" | Project, Task or Milestone id. |
Indicators | IEnumerable<IGanttChartTaskIndicator> | null | Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row. |
Label | string | "" | Project, Task or Milestone label. |
OnRender | object | null | Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement.
|
MaxDateStart | object | "" | Project, Task or Milestone max start date. |
MinDateStart | object | "" | Project, Task or Milestone min start date. |
MaxDateEnd | object | "" | Project, Task or Milestone max end date. |
MinDateEnd | object | "" | Project, Task or Milestone min end date. |
MinDuration | object | 0 | The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property. |
MaxDuration | object | 0 | The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property. |
Overdue | bool | false | Determines 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. |
Planned | GanttChartTaskPlanned | null | Determines the planned dateStart/dateEnd for as the baseline for the task. |
Progress | int | 0 | Project, Task or Milestone progress. |
Resources | IEnumerable<object> | new List<object>() | Project, Task or Milestone resources. |
Segments | IEnumerable<IGanttChartTaskSegment> | null | Determines 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. |
Synchronized | bool | false | Project, Task or Milestone synchronized in the view. |
Tasks | IEnumerable<object> | new List<object>() | Project's tasks. Only projects can have tasks. |
Type | GanttChartTaskType | GanttChartTaskType.Task | Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task' |
Value | object | "" | Project, Task or Milestone value. |
GanttChartTaskIndicator Properties
Name | Type | Default | Description |
---|---|---|---|
Label | string | "" | Indicator label. |
Date | object | "" | Indicator date(can include time). |
ClassName | string | "" | A custom class name that can be applied to the indicator's element in order to apply some styling via CSS. |
Icon | string | "" | Represents the code for an icon that will be displayed infront of the indicator label inside the timeline. |
Tooltip | string | "" | Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered. |
GanttChartTaskPlanned Properties
Name | Type | Default | Description |
---|---|---|---|
DateStart | object | "" | Determines the planned dateStart of the task. |
DateEnd | object | "" | Determines the planned dateEnd of the task. |
Duration | object | 0 | Determines the planned duration of the task. |
GanttChartTaskSegment Properties
Name | Type | Default | Description |
---|---|---|---|
Label | string | "" | Segment label. |
DateStart | object | "" | Segment start date. |
DateEnd | object | "" | Segment end date. |
DisableDrag | bool | false | Determines whether segment dragging is disabled. |
DisableResize | bool | false | Determines whether segment resizing is disabled. |
Duration | object | 0 | The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property. |
GanttChartTaskColumn Properties
Name | Type | Default | Description |
---|---|---|---|
DisableEdit | bool | false | Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled. |
DateFormat | object | null | Applies 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. |
NumberFormat | object | null | Applies 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 |
Label | string | "" | Column's label. |
Value | string | "" | Column's value. |
Size | object | 0 | Column's size. |
MinWidth | object | 0 | Column's min width. |
CustomEditor | object | null | A 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:
|
GetCustomEditorValue | object | null | A 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. |
SetCustomEditorValue | object | null | A 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 -
|
GanttChartTooltip Properties
Name | Type | Default | Description |
---|---|---|---|
Arrow | bool | false | Specifies 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. |
Delay | int | 50 | Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus). |
Enabled | bool | false | Determines 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. |
Offset | int[] | null | Specifies 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. |