Search results

Gantt

Represents the Gantt chart component.

<div id='gantt'></div>
<script>
 var ganttObject = new Gantt({
     taskFields: { id: 'taskId', name: 'taskName', startDate: 'startDate', duration: 'duration' }
 });
 ganttObject.appendTo('#gantt');
</script>

Properties

addDialogFields

AddDialogFieldSettingsModel[]

Defines the tabs and fields to be included in the add dialog. If the value was empty, then it will be calculated from taskSettings and columns value.

Defaults to []

allowFiltering

boolean

Enables or disables filtering support in Gantt.

Defaults to false

allowReordering

boolean

If allowReordering is set to true, Gantt columns can be reordered. Reordering can be done by drag and drop of a particular column from one index to another index.

Defaults to false

allowResizing

boolean

If allowResizing is set to true, Gantt columns can be resized.

Defaults to false

allowSelection

boolean

If allowSelection is set to true, it allows selection of (highlight row) Gantt chart rows by clicking it.

Defaults to true

allowSorting

boolean

If allowSorting is set to true, it allows sorting of gantt chart tasks when column header is clicked.

Defaults to false

allowUnscheduledTasks

boolean

Enables or disables rendering of unscheduled tasks in Gantt.

Defaults to false

autoFocusTasks

boolean

Enables or disables the focusing the task bar on click action.

Defaults to true

baselineColor

string

Defines the baseline bar color.

collapseAllParentTasks

boolean

If collapseAllParentTasks set to true, then root tasks are rendered with collapsed state.

Defaults to false

columnMenuItems

string[] | ColumnMenuItemModel[]

columnMenuItems defines both built-in and custom column menu items.

The available built-in items are,

  • ColumnChooser - To show/hide the TreeGrid columns.
  • SortAscending - Sort the current column in ascending order.
  • SortDescending - Sort the current column in descending order.
  • Filter - Filter options will show based on filterSettings property.

Defaults to null

columns

Column[] | string[] | ColumnModel[]

Defines column collection displayed in grid If the columns declaration was empty then columns are automatically populated from taskSettings value.

Defaults to []

connectorLineBackground

string

Defines background color of dependency lines.

Defaults to null

connectorLineWidth

number

Defines width of dependency lines.

Defaults to 1

contextMenuItems

ContextMenuItem[] | ContextMenuItemModel[]

If contextMenuItems are array collection of menu items in Context Menu.

Defaults to null

contextMenuModule

ContextMenu

The contextMenuModule is used to invoke context menu in Gantt.

currentZoomingLevel

ZoomTimelineSettings

Configures current zooming level of Gantt.

dataSource

Object[] | DataManager

It is used to render Gantt chart rows and tasks. dataSource value was defined as array of JavaScript objects or instances of DataManager.

Defaults to []

dateFormat

string

Specifies the dateFormat for Gantt, given format is displayed in tooltip and Grid cells.

dayMarkersModule

DayMarkers

The dayMarkersModule is used to manipulate event markers operation in Gantt.

dayWorkingTime

DayWorkingTimeModel[]

Defines customized working time of project.

durationUnit

string

durationUnit Specifies the duration unit for each tasks whether day or hour or minute.

  • day: Sets the duration unit as day.
  • hour: Sets the duration unit as hour.
  • minute: Sets the duration unit as minute.

Defaults to day

editDialogFields

EditDialogFieldSettingsModel[]

Defines the tabs and fields to be included in the edit dialog. If the value was empty, then it will be calculated from taskSettings and columns value.

Defaults to []

editModule

Edit

The editModule is used to handle Gantt record manipulation.

editSettings

EditSettingsModel

Configures edit settings of Gantt.

Defaults to { allowAdding: false, allowEditing: false, allowDeleting: false, mode:‘Auto’,showDeleteConfirmDialog: false }

enableContextMenu

boolean

If enableContextMenu is set to true, Enable context menu in Gantt.

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enablePredecessorValidation

boolean

If enablePredecessorValidation is set to true, it allows to validate the predecessor link.

Defaults to true

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

eventMarkers

EventMarkerModel[]

Defines events and status of project throughout the timeline.

Defaults to []

filterModule

Filter

The filterModule is used to manipulate filtering operation in Gantt.

filterSettings

FilterSettingsModel

Configures the filter settings for Gantt.

Defaults to {columns: [], type: ‘Menu’ }

gridLines

string

Configures the grid lines in tree grid and gantt chart.

height

number | string

Defines the height of the Gantt component container.

Defaults to ‘auto’

highlightWeekends

boolean

If highlightWeekends set to true, then all weekend days are highlighted in week - day timeline mode.

Defaults to false

holidays

HolidayModel[]

Defines holidays presented in project timeline.

Defaults to []

includeWeekend

boolean

Defines weekend days are considered as working day or not.

Defaults to false

keyboardModule

KeyboardEvents

The keyboardModule is used to manipulate keyboard interactions in Gantt.

labelSettings

LabelSettingsModel

Defines the right, left and inner task labels in task bar.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

milestoneTemplate

string

The milestone template that renders customized milestone task from the given template.

Defaults to null

parentTaskbarTemplate

string

The parent task bar template that renders customized parent task bars from the given template.

Defaults to null

projectEndDate

Date | string

Defines end date of the project, if projectEndDate value not set then it will be calculated from data source.

Defaults to null

projectStartDate

Date | string

Defines start date of the project, if projectStartDate value not set then it will be calculated from data source.

Defaults to null

query

Query

Defines the external Query that will be executed along with data processing.

Defaults to null

renderBaseline

boolean

If renderBaseline is set to true, then baselines are rendered for tasks.

Defaults to false

resourceIDMapping

string

Defines mapping property to get resource id value from resource collection.

Defaults to null

resourceNameMapping

string

Defines mapping property to get resource name value from resource collection.

Defaults to null

resources

Object[]

Defines resource collection assigned for projects.

Defaults to []

rowHeight

number

Defines height value for grid rows and chart rows in Gantt.

Defaults to 36

searchSettings

SearchSettingsModel

Configures the search settings for Gantt.

selectedRowIndex

number

The selectedRowIndex allows you to select a row at initial rendering. You can also get the currently selected row index.

Defaults to -1

selectionModule

Selection

The selectionModule is used to manipulate selection operation in Gantt.

selectionSettings

SelectionSettingsModel

Configures the selection settings.

Defaults to {mode: ‘Row’, type: ‘Single’}

showColumnMenu

boolean

If showColumnMenu set to true, then it will enable the column menu options in each columns.

Defaults to false

showInlineNotes

boolean

To show notes column cell values inside the cell or in tooltip.

Defaults to false

sortModule

Sort

The sortModule is used to manipulate sorting operation in Gantt.

sortSettings

SortSettingsModel

Configures the sort settings of the Gantt.

Defaults to {columns:[]}

splitterSettings

SplitterSettingsModel

Configures the splitter settings for Gantt.

taskFields

TaskFieldsModel

Defines mapping properties to find task values such as id, start date, end date, duration and progress values from data source.

taskbarHeight

number

Defines height of taskbar element in Gantt.

taskbarTemplate

string

The task bar template that renders customized child task bars from the given template.

Defaults to null

timelineSettings

TimelineSettingsModel

Configures timeline settings of Gantt. Defines default timeline modes or customized top tier mode and bottom tier mode or single tier only.

toolbar

[]

toolbar defines the toolbar items of the Gantt. It contains built-in and custom toolbar items. If an array value is assigned, it is considered as the list of built-in and custom toolbar items in the Gantt’s toolbar.

The available built-in toolbar items are:

  • Add: Adds a new record.
  • Edit: Edits the selected task.
  • Update: Updates the edited task.
  • Delete: Deletes the selected task.
  • Cancel: Cancels the edit state.
  • Search: Searches tasks by the given key.
  • ExpandAll: Expands all the task of Gantt.
  • CollapseAll: Collapses all the task of Gantt.
  • PrevTimeSpan: Extends timeline with one unit before the timeline start date.
  • NextTimeSpan: Extends timeline with one unit after the timeline finish date.
  • ZoomIn: ZoomIn the Gantt control.
  • ZoomOut: ZoomOut the Gantt control.
  • ZoomToFit: Display the all tasks within the viewable Gantt chart.

Defaults to null

tooltipSettings

TooltipSettingsModel

Enables or disables default tooltip of Gantt element and defines customized tooltip for Gantt elements.

Defaults to { showTooltip: true }

treeColumnIndex

number

To define expander column index in Grid.

Defaults to 0

width

number | string

Defines the width of the Gantt component container.

Defaults to ‘auto’

workWeek

string[]

Defines workweek of project.

Defaults to [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]

zoomingLevels

ZoomTimelineSettings[]

Configure zooming levels of Gantt Timeline

Methods

ShowColumn

Shows a column by its column name.

Parameter Type Description
keys string | string[] Defines a single or collection of column names.
showBy (optional) string Defines the column key either as field name or header text.

Returns void

addEventListener

Adds the handler to the given event listener.

Returns void

addPredecessor

To add dependency for Task.

Parameter Type Description
id String | number Defines the ID of data to modify.
predecessorString string Defines the predecessor string to add.

Returns void

addRecord

Method to add record.

Parameter Type Description
data (optional) Object | IGanttData Defines record to add.
rowPosition (optional) string Defines the position of row.
rowIndex (optional) number Defines the row index.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

cancelEdit

Cancels edited state.

Returns void

clearFiltering

Clears all the filtered columns in Gantt.

Returns void

clearSorting

Clears all the sorted columns of the Gantt.

Returns void

collapseAll

Method to collapse all the rows of Gantt.

Returns void

collapseByID

Collapse the record by id value.

Parameter Type Description
id string | number Defines the id of task.

Returns void

collapseByIndex

Collapse the record by index value.

Parameter Type Description
index number Defines the index of row.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

expandAll

Method to expand all the rows of Gantt.

Returns void

expandByID

Expand the record by task id.

Parameter Type Description
id string | number Defines the id of task.

Returns void

expandByIndex

Expand the record by index value.

Parameter Type Description
index number Defines the index of row.

Returns void

filterByColumn

Filters TreeGrid row by column name with the given options.

Parameter Type Description
fieldName string Defines the field name of the column.
filterOperator string Defines the operator to filter records.
filterValue string | number | Date | boolean Defines the value used to filter records.
predicate (optional) string Defines the relationship between one filter query and another by using AND or OR predicate.
matchCase (optional) boolean If match case is set to true, TreeGrid filters the records with exact match.if false, it filters case
insensitive records (uppercase and lowercase letters treated the same).
ignoreAccent (optional) boolean If ignoreAccent set to true,
then filter ignores the diacritic characters or accents while filtering.

Returns void

fitToProject

To show all project task in available chart width

Returns void

getDurationString

Get duration value as string combined with duration and unit values.

Parameter Type Description
duration number Defines the duration.
durationUnit string Defines the duration unit.

Returns string

getExpandedRecords

Get expanded records from given record collection.

Parameter Type Description
records IGanttData[] Defines record collection.

Returns IGanttData[]

getGanttColumns

Gets the Gantt columns.

Returns ColumnModel[]

getGridColumns

Gets the columns from the TreeGrid.

Returns Column[]

getParentTask

Get parent task by clone parent item.

Parameter Type Description
cloneParent IParent Defines the clone parent item.

Returns IGanttData

getRecordByID

Method to get record by id value.

Parameter Type Description
id string Defines the id of record.

Returns IGanttData

getRowByID

Method to get the row element by task id.

Parameter Type Description
id string | number Defines the id of task.

Returns HTMLElement

getRowByIndex

Method to get chart row value by index.

Parameter Type Description
index number Defines the index of row.

Returns HTMLElement

getTaskByUniqueID

Method to get task by uniqueId value.

Parameter Type Description
id string Defines the task id.

Returns IGanttData

getTaskbarHeight

Method to get taskbarHeight.

Returns number

hideColumn

Hides a column by column name.

Parameter Type Description
keys string | string[] Defines a single or collection of column names.
hideBy (optional) string Defines the column key either as field name or header text.

Returns void

hideSpinner

Method used to hide spinner.

Returns void

nextTimeSpan

To update timeline at end point with one unit.

Returns void

openAddDialog

Method to open Add dialog.

Returns void

openEditDialog

Method to open Edit dialog.

Parameter Type Description
taskId number | string | Object Defines the id of task.

Returns void

previousTimeSpan

To update timeline at start point with one unit.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

removePredecessor

To remove dependency from task.

Parameter Type Description
id String | number Defines the ID of task to modify.

Returns void

removeSortColumn

To remove sorted records of particular column.

Parameter Type Description
columnName string Defines the sorted column name.

Returns void

reorderColumns

Changes the TreeGrid column positions by field names.

Parameter Type Description
fromFName string Defines origin field name.
toFName string Defines destination field name.

Returns void

scrollToDate

To move horizontal scroll bar of Gantt to specific date.

Parameter Type Description
date string Defines the task date of data.

Returns void

scrollToTask

To move horizontal scroll bar of Gantt to specific task id.

Parameter Type Description
taskId string Defines the task id of data.

Returns void

Method to perform search action in Gantt.

Parameter Type Description
keyVal string Defines key value to search.

Returns void

selectCells

Selects a cell by the given index.

Parameter Type Description
cellIndex IIndex Defines the row and column indexes.
isToggle (optional) boolean If set to true, then it toggles the selection.

Returns void

setScrollTop

To set scroll top for chart scroll container.

Parameter Type Description
scrollTop number Defines scroll top value for scroll container.

Returns void

setSplitterPosition

Method to set splitter position.

Parameter Type Description
value string | number Define value to splitter settings property.
type string Defines name of internal splitter settings property.

Returns void

showSpinner

Method used to show spinner.

Returns void

sortColumn

Sorts a column with the given options.

Parameter Type Description
columnName string Defines the column name to be sorted.
direction string Defines the direction of sorting field.
isMultiSort (optional) boolean Specifies whether the previous sorted columns are to be maintained.

Returns void

updateChartScrollOffset

To set scroll left and top in chart side.

Parameter Type Description
left number Defines the scroll left value of chart side.
top number Defines the scroll top value of chart side.

Returns void

updateDataSource

Method to update data source.

Returns void

updatePredecessor

To modify current dependency values of Task by task id.

Parameter Type Description
id String | number Defines the ID of data to modify.
predecessorString string Defines the predecessor string to update.

Returns void

updateProjectDates

To validate project start date and end date.

Parameter Type Description
startDate Date Defines start date of project.
endDate Date Defines end date of project.
isTimelineRoundOff boolean Defines project start date and end date need to be round off or not.

Returns void

updateRecordByID

Method to update record by ID.

Parameter Type Description
data Object Defines the data to modify.

Returns void

updateRecordByIndex

Method to update record by Index.

Parameter Type Description
index number Defines the index of data to modify.
data Object Defines the data to modify.

Returns void

zoomIn

To perform Zoom in action on Gantt timeline.

Returns void

zoomOut

To perform zoom out action on Gantt timeline.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

actionBegin

EmitType<``any|PageEventArgs|FilterEventArgs|SortEventArgs|ITimeSpanEventArgs|IDependencyEventArgs|ITaskAddedEventArgs|ZoomEventArgs>

Triggers when Gantt actions such as sorting, filtering, searching etc., starts.

actionComplete

EmitType<``FilterEventArgs|SortEventArgs|ITaskAddedEventArgs|IKeyPressedEventArgs|ZoomEventArgs>

Triggers when Gantt actions such as sorting, filtering, searching etc. are completed.

actionFailure

EmitType<FilterEventArgs|SortEventArgs>

Triggers when actions are failed.

beforeTooltipRender

EmitType<BeforeTooltipRenderEventArgs>

Triggers before tooltip get rendered.

cellDeselected

EmitType<CellDeselectEventArgs>

Triggers when a particular selected cell is deselected.

cellDeselecting

EmitType<CellDeselectEventArgs>

Triggers before the selected cell is deselecting.

cellEdit

EmitType<CellEditArgs>

This will be triggered a cell get begins to edit.

cellSelected

EmitType<CellSelectEventArgs>

Triggers after a cell is selected.

cellSelecting

EmitType<CellSelectingEventArgs>

Triggers before any cell selection occurs.

collapsed

EmitType<ICollapsingEventArgs>

This will be triggered after the row getting collapsed.

collapsing

EmitType<ICollapsingEventArgs>

This will be triggered before the row getting collapsed.

columnDrag

EmitType<ColumnDragEventArgs>

Triggers when column header element is dragged (moved) continuously.

columnDragStart

EmitType<ColumnDragEventArgs>

Triggers when column header element drag (move) starts.

columnDrop

EmitType<ColumnDragEventArgs>

Triggers when a column header element is dropped on the target column.

columnMenuClick

EmitType<ColumnMenuClickEventArgs>

Triggers when click on column menu.

columnMenuOpen

EmitType<ColumnMenuOpenEventArgs>

Triggers before column menu opens.

contextMenuClick

EmitType<CMenuClickEventArgs>

Triggers when click on context menu.

contextMenuOpen

EmitType<CMenuOpenEventArgs>

Triggers before context menu opens.

dataBound

EmitType<Object>

Triggers when data source is populated in the Grid.

endEdit

EmitType<ITaskbarEditedEventArgs>

This will be triggered when a task get saved by cell edit.

expanded

EmitType<ICollapsingEventArgs>

This will be triggered after the row getting expanded.

expanding

EmitType<ICollapsingEventArgs>

This will be triggered before the row getting expanded.

headerCellInfo

EmitType<HeaderCellInfoEventArgs>

This will be triggered before the header cell element is appended to the Grid element.

load

EmitType<Object>

Triggered before the Gantt control gets rendered.

queryCellInfo

EmitType<QueryCellInfoEventArgs>

This will be triggered before the header cell element is appended to the Grid element.

queryTaskbarInfo

EmitType<IQueryTaskbarInfoEventArgs>

This will be triggered after the taskbar element is appended to the Gantt element.

resizeStart

EmitType<ResizeArgs>

Triggers when column resize starts.

resizeStop

EmitType<ResizeArgs>

Triggers when column resize ends.

resizing

EmitType<ResizeArgs>

Triggers on column resizing.

rowDataBound

EmitType<RowDataBoundEventArgs>

This will be triggered before the row element is appended to the Grid element.

rowDeselected

EmitType<RowDeselectEventArgs>

Triggers when a selected row is deselected.

rowDeselecting

EmitType<RowDeselectEventArgs>

Triggers before deselecting the selected row.

rowSelected

EmitType<RowSelectEventArgs>

Triggers after a row is selected.

rowSelecting

EmitType<RowSelectingEventArgs>

Triggers before row selection occurs.

splitterResizeStart

EmitType<ResizeEventArgs>

Triggers when splitter resizing starts.

splitterResized

EmitType<ISplitterResizedEventArgs>

Triggers when splitter resizing action completed.

splitterResizing

EmitType<ResizingEventArgs>

Triggers when splitter bar was dragging.

taskbarEdited

EmitType<ITaskbarEditedEventArgs>

This will be triggered taskbar was dragged and dropped on new position.

taskbarEditing

EmitType<ITaskbarEditedEventArgs>

This event will be triggered when taskbar was in dragging state.

toolbarClick

EmitType<ClickEventArgs>

Triggers when toolbar item was clicked.

Contents
Contents