Search results

GanttModel API in JavaScript (ES5) Gantt API control

Interface for a class Gantt

Properties

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<FailureEventArgs>

Triggers when actions are failed.

beforeExcelExport

EmitType<Object>

Triggers before Gantt data is exported to Excel file.

beforePdfExport

EmitType<Object>

Triggers before Gantt data is exported to PDF document.

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.

created

EmitType<Object>

Triggers when the component is created.

dataBound

EmitType<Object>

Triggers when data source is populated in the Grid.

destroyed

EmitType<Object>

Triggers when the component is destroyed.

endEdit

EmitType<ITaskbarEditedEventArgs>

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

excelExportComplete

EmitType<ExcelExportCompleteArgs>

Triggers after Gantt data is exported to Excel file.

excelHeaderQueryCellInfo

EmitType<ExcelHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to Excel file. You can also customize the Excel cells.

excelQueryCellInfo

EmitType<ExcelQueryCellInfoEventArgs>

Triggers before exporting each cell to Excel file. You can also customize the Excel cells.

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.

onMouseMove

EmitType<IMouseMoveEventArgs>

This event will be triggered when mouse move on Gantt.

onTaskbarClick

EmitType<ITaskbarClickEventArgs>

This event will be triggered when click on taskbar element.

pdfColumnHeaderQueryCellInfo

EmitType<PdfColumnHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to PDF document. You can also customize the PDF cells.

pdfExportComplete

EmitType<Object>

Triggers after TreeGrid data is exported to PDF document.

pdfQueryCellInfo

EmitType<PdfQueryCellInfoEventArgs>

Triggers before exporting each cell to PDF document. You can also customize the PDF cells.

pdfQueryTaskbarInfo

EmitType<Object>

Triggers before exporting each taskbar to PDF document. You can also customize the taskbar.

pdfQueryTimelineCellInfo

EmitType<PdfQueryTimelineCellInfoEventArgs>

Triggers before exporting each cell to PDF document. You can also customize the PDF cells.

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.

recordDoubleClick

EmitType<RecordDoubleClickEventArgs>

This event will be triggered when double click on record.

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.

rowDrag

EmitType<RowDragEventArgs>

Triggers when row elements are dragged (moved) continuously.

rowDragStart

EmitType<RowDragEventArgs>

Triggers when row element’s drag(move) starts.

rowDragStartHelper

EmitType<RowDragEventArgs>

Triggers when row element’s before drag(move).

rowDrop

EmitType<RowDragEventArgs>

Triggers when row elements are dropped on the target 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.

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.

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        addDialogFields: [
            { type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
            { type: 'Resources' },
            { type: 'Dependency' },
            { type: 'Notes'}
        ],
    });
    gantt.appendTo('#Gantt');

allowExcelExport

boolean

If allowExcelExport set to true, then it will allow the user to export Gantt to Excel and CSV file.

allowFiltering

boolean

Enables or disables filtering support in Gantt.

allowKeyboard

boolean

Enables or disables the key board interaction of Gantt.

allowPdfExport

boolean

If allowPdfExport set to true, then it will allow the user to export Gantt to PDF file.

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.

allowResizing

boolean

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

allowRowDragAndDrop

boolean

If allowRowDragAndDrop set to true, then it will allow the user to perform drag and drop action in Gantt.

allowSelection

boolean

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

allowSorting

boolean

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

allowUnscheduledTasks

boolean

Enables or disables rendering of unscheduled tasks in Gantt.

autoFocusTasks

boolean

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

baselineColor

string

Defines the baseline bar color.

collapseAllParentTasks

boolean

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

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.

columns

Column[] | string[] | ColumnModel[]

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

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        columns: [
            { field: 'TaskID', width: '150', headerText: 'Task ID', headerTextAlign: 'Left' allowFiltering: false },
            { field: 'TaskName', clipMode: 'EllipsisWithTooltip' allowEditing: true, hideAtMedia: '(min-width: 700px)' },
            { field: 'Duration', edittype: 'stringedit', allowReordering: true, maxWidth: '400' },
            { field: 'Progress', textAlign: 'Right', allowResizing: false , visible: true, format: 'C' },
            { field: 'StartDate', width: '250', allowSorting: false, minWidth: '200' }
        ]
    });
    gantt.appendTo('#Gantt');

connectorLineBackground

string

Defines background color of dependency lines.

connectorLineWidth

number

Defines width of dependency lines.

contextMenuItems

ContextMenuItem[] | ContextMenuItemModel[]

contextMenuItems defines both built-in and custom context menu items.

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    import { ContextMenuItemModel } from '@syncfusion/ej2-grids';
    Gantt.Inject(ContextMenu);
    let contextMenuItems: (string | ContextMenuItemModel)[] = ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
        { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' } as ContextMenuItemModel,
        { text: 'Expand the Row', target: '.e-content', id: 'expandrow' } as ContextMenuItemModel,
    ];
    let gantt: Gantt = new Gantt({
        contextMenuItems: contextMenuItems as ContextMenuItem[],
    });
    gantt.appendTo('#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.

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        // Hierarchical data binding.
        dataSource: [{
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
            ]
        },]
        // Self-referential data binding (Flat data).
        dataSource:  [
            { TaskID: 1,TaskName: 'Project Initiation',StartDate: new Date('04/02/2019'),EndDate: new Date('04/21/2019')},
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50,ParentId:1 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentId:1   },
        ];
        // Remote Data    
        dataSource: dataSource,
    });
    // Remote Data
    let dataSource: DataManager = new DataManager({
        url: 'https://ej2services.syncfusion.com/production/web-services/api/GanttData',
        adaptor: new WebApiAdaptor,
        crossDomain: true
    });
    gantt.appendTo('#Gantt');

dateFormat

string

Specifies the dateFormat for Gantt, given format is displayed in tooltip and Grid cells. By default, the format is based on the culture.

dayWorkingTime

DayWorkingTimeModel[]

Defines customized working time of project.

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        dayWorkingTime: [from: 9 to: 18]
    });
    
    gantt.appendTo('#Gantt');

disableHtmlEncode

boolean

If disableHtmlEncode is set to true, it encodes the HTML of the header and content cells.

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.

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.

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        editDialogFields: [
            { type: 'General', headerText: 'General', fields: ['TaskID', 'TaskName'] },
            { type: 'Resources' },
            { type: 'Dependency' },
            { type: 'Notes'}
        ],
    });
    gantt.appendTo('#Gantt');

editSettings

EditSettingsModel

Configures edit settings of Gantt.

    <div id="Gantt"></div>
    import { Gantt, Edit  } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Edit);
    let gantt: Gantt = new Gantt({
        editSettings: {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            mode:'Auto',
            newRowPosition: 'Top',
            showDeleteConfirmDialog: true
        }
    });
    gantt.appendTo('#Gantt');

enableContextMenu

boolean

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

enableMultiTaskbar

boolean

It enables to render the child taskbar on parent row for resource view Gantt.

enablePersistence

boolean

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

enablePredecessorValidation

boolean

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

enableRtl

boolean

Enable or disable rendering component in right to left direction.

eventMarkers

EventMarkerModel[]

Defines events and status of project throughout the timeline.

    <div id="Gantt"></div>
    import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
    Gantt.Inject(DayMarkers);
    let gantt: Gantt = new Gantt({
        eventMarkers: [
        {
            day: '04/10/2019',
            cssClass: 'e-custom-event-marker',
            label: 'Project approval and kick-off'
        }
    ]
    });
    gantt.appendTo('#Gantt');

filterSettings

FilterSettingsModel

Configures the filter settings for Gantt.

    <div id="Gantt"></div>
    import { Gantt, Filter } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Filter);
    let gantt: Gantt = new Gantt({
        filterSettings: {
            columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' },{ field: 'TaskID', matchCase: false, operator: 'equal', predicate: 'and', value: 2 }],
            ignoreAccent: true
        },
    ]
    });
    gantt.appendTo('#Gantt');

gridLines

string

Configures the grid lines in tree grid and gantt chart.

height

number | string

Defines the height of the Gantt component container.

highlightWeekends

boolean

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

holidays

HolidayModel[]

Defines holidays presented in project timeline.

    <div id="Gantt"></div>
    import { Gantt, DayMarkers } from '@syncfusion/ej2-gantt';
    Gantt.Inject(DayMarkers);
    let gantt: Gantt = new Gantt({
        holidays: [{
            from: "04/04/2019",
            to: "04/05/2019",
            label: "Public holidays",
            cssClass: "e-custom-holiday"
        }]
    });
    gantt.appendTo('#Gantt');

includeWeekend

boolean

Defines weekend days are considered as working day or not.

labelSettings

LabelSettingsModel

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

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        labelSettings: {
            leftLabel: 'TaskID',
            rightLabel: 'Task Name: ${taskData.TaskName}',
            taskLabel: '${Progress}%'
        }
    });
    gantt.appendTo('#Gantt');

locale

string

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

milestoneTemplate

string

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

parentTaskbarTemplate

string

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

projectEndDate

Date | string

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

projectStartDate

Date | string

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

query

Query

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

readOnly

boolean

If readOnly is set to true, Gantt cannot be edited.

renderBaseline

boolean

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

resourceFields

ResourceFieldsModel

Defines mapping properties to find resource values such as id, name, unit and group from resource collection.

resourceIDMapping

string

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

resourceNameMapping

string

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

resources

Object[]

Defines resource collection assigned for projects.

rowHeight

number

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

searchSettings

SearchSettingsModel

Configures the search settings for Gantt.

    <div id="Gantt"></div>
    import { Gantt, Filter } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Filter);
    let gantt: Gantt = new Gantt({
        searchSettings: { fields: ['TaskName'], operator: 'contains', key: 'List', ignoreCase: true, hierarchyMode: 'Parent' }
    });
    gantt.appendTo('#Gantt');

selectedRowIndex

number

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

selectionSettings

SelectionSettingsModel

Configures the selection settings.

    <div id="Gantt"></div>
    import { Gantt, Selection  } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Selection);
    let gantt: Gantt = new Gantt({
        selectionSettings: {
            mode: 'Row',
            type: 'Multiple'
        }
    });
    gantt.appendTo('#Gantt');

showColumnMenu

boolean

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

showInlineNotes

boolean

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

showOverAllocation

boolean

It enables to render the overallocation container for resource view Gantt.

sortSettings

SortSettingsModel

Configures the sort settings of the Gantt.

    <div id="Gantt"></div>
    import { Gantt, Sort } from '@syncfusion/ej2-gantt';
    Gantt.Inject(Sort);
    let gantt: Gantt = new Gantt({
        sortSettings: { columns: [{ field: 'TaskID', direction: 'Ascending' }], allowUnsort: true },
    });
    gantt.appendTo('#Gantt');

splitterSettings

SplitterSettingsModel

Configures the splitter settings for Gantt.

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        splitterSettings: {
            position: "50%",
            minimum: "200",
            separatorSize: 5,
            view: 'Default'
        }
    });
    gantt.appendTo('#Gantt');

taskFields

TaskFieldsModel

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

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
         taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            dependency: 'Predecessor',
            progress: 'Progress',
            baselineStartDate: 'BaselineStartDate',
            baselineEndDate: 'BaselineEndDate',
            durationUnit: 'DurationUnit',
            expandState: 'isExpand',
            indicators: 'Indicators',
            milestone: 'Milestone',
            notes: 'info',
            resourceInfo: 'resourceInfo',
            child: 'subtasks',
        },
    });
    gantt.appendTo('#Gantt');

taskMode

string

Specifies task schedule mode for a project.

taskType

string

taskType Specifies the task type for task whether fixedUnit or fixedWork or fixedDuration.

  • fixedUnit: Sets the task type as fixedUnit.
  • fixedWork: Sets the task type as fixedWork.
  • fixedDuration: Sets the task type as fixedDuration.

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.

timelineSettings

TimelineSettingsModel

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

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        timelineSettings: {
            showTooltip: true,
            timelineUnitSize: 80,
            timelineViewMode: 'Week',
            updateTimescaleView: true,
            weekStartDay: 0,
            weekendBackground: 'red',
            topTier: {
                format: 'MMM dd, yyyy',
                unit: 'Week',
            },
            bottomTier: {
                unit: 'Day',
                format: 'EEE, dd',
                count: 1,
            }
        }
    });
    gantt.appendTo('#Gantt');

timezone

string

By default, task schedule dates are calculated with system time zone.If Gantt chart assigned with specific time zone, then schedule dates are calculated as given time zone date value.

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.
  • ExcelExport: To export in Excel format.
  • CsvExport : To export in CSV format.
  • Indent: To indent a task to one level.
  • Outdent: To outdent a task from one level.

tooltipSettings

TooltipSettingsModel

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

    <div id="Gantt"></div>
    import { Gantt } from '@syncfusion/ej2-gantt';
    let gantt: Gantt = new Gantt({
        tooltipSettings: {
            showTooltip: true,
            taskbar: '<div>TaskID: ${TaskID}</div>',
            connectorLine: '<div>Offset : ${offsetString}</div>',
            editing: '<div>Duration : ${duration}</div>',
            baseline: '<div>Baseline StartDate : ${this.getFormatedDate(BaselineStartDate)}</div>'
        }
    });
    gantt.appendTo('#Gantt');

treeColumnIndex

number

To define expander column index in Grid.

validateManualTasksOnLinking

boolean

If validateManualTasksOnLinking is set to true, it enables date validation while connecting manually scheduled tasks with predecessor

viewType

string

Defines the view type of the Gantt.

width

number | string

Defines the width of the Gantt component container.

workUnit

string

workUnit Specifies the work unit for each tasks whether day or hour or minute.

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

workWeek

string[]

Defines workweek of project.

Contents
Contents