ejGantt

21 Sep 201824 minutes to read

The Essential JavaScript Gantt control is designed to visualize and edit the project schedule, and track the project progress.

Example

HTML

<ej-gantt id="gantt" [dataSource]="projectData">

</ej-gantt>

TS

export class AppComponent {
    
    public  projectData;

        constructor()
        {
          this.projectData = taskCollection; 
        }
}

Requires

• module:jQuery
• module:jquery.globalize.js
• module:jquery.easing.1.3.js
• module:jsrender.js
• module:ej.web.all.js

Members

addDialogFields array

Specifies the fields to be included in the add dialog in Gantt

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [addDialogFields]= "addDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public addDialogFields: any;
    constructor() {
        this.addDialogFields =   [{ field: "taskId", editType: "stringedit" }]
    }
}

addDialogFields.field string

Specifies mapping name to include required fields in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [addDialogFields]= "addDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public addDialogFields: any;
    constructor() {
        this.addDialogFields =  [{ field: "taskId" }]
    }
}

addDialogFields.editType string

Specifies editType of fields to be included in the add dialog in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [addDialogFields]= "addDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public addDialogFields: any;
    constructor() {
        this.addDialogFields = [{ editType: "stringedit" }]
    }
}

addDialogFields.displayInGeneralTab boolean

Specifies the custom column field was displayed in General tab of add dialog or not.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [addDialogFields]= "addDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public addDialogFields: any;
    constructor() {
        this.addDialogFields =  [{ field:"customColumn", displayInGeneralTab: true }]
    }
}

allowColumnResize boolean

Enables or disables the ability to resize column.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [allowColumnResize]= "true">
</ej-gantt>

allowDragAndDrop boolean

Enables or disables the ability to drag and drop the row interactively to reorder the rows

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [allowDragAndDrop]= "true">
</ej-gantt>

allowGanttChartEditing boolean

Enables or Disables Gantt chart editing in Gantt

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [allowGanttChartEditing]= "true">
</ej-gantt>

allowKeyboardNavigation boolean

Enables or Disables Keyboard navigation in Gantt

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [allowKeyboardNavigation]= "true">
</ej-gantt>

allowMultiSorting boolean

Specifies enabling or disabling multiple sorting for Gantt columns

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [allowMultiSorting]= "true">
</ej-gantt>

allowMultipleExporting boolean

Enables or disables the option for multiple exporting

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [allowMultipleExporting]= "true">
</ej-gantt>

allowSelection boolean

Enables or disables the interactive selection of a row.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [allowSelection]= "true">
</ej-gantt>

allowSorting boolean

Enables or disables sorting. When enabled, we can sort the column by clicking on the column.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [allowSorting]= "true">
</ej-gantt>

allowUnscheduledTask boolean

Enables or disables the rendering of unscheduled tasks.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [allowUnscheduledTask]= "true">
</ej-gantt>

baselineColor string

Specifies the baseline background color in Gantt

Default Value

• “#fba41c”

Example

HTML

<ej-gantt id="GanttControl"
    [baselineColor]= "blue">
</ej-gantt>

baselineEndDateMapping string

Specifies the mapping property path for baseline end date in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    baselineEndDateMapping= "BaselineEndDate">
</ej-gantt>

baselineStartDateMapping string

Specifies the mapping property path for baseline start date of a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    baselineStartDateMapping= "BaselineStartDate">
</ej-gantt>

cellTooltipTemplate string

Specifies the template for cell tooltip

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    cellTooltipTemplate= "CellTooltipTemplate">
</ej-gantt>

childMapping string

Specifies the mapping property path for sub tasks in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    childMapping= "Children">
</ej-gantt>

columnDialogFields array

To Specify the column fields to be displayed in the dialog while inserting a column using column menu.

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [columnDialogFields]= "columnDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public columnDialogFields: any;
    constructor() {
        this.columnDialogFields = ["field", "headerText", "editType", "width", "visible", "allowSorting", "textAlign", "headerTextAlign"]
    }
}

connectorLineBackground string

Specifies the background of connector lines in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
     connectorLineBackground="#F2F2F2">
</ej-gantt>

connectorlineWidth number

Specifies the width of the connector lines in Gantt

Default Value

• 1

Example

HTML

<ej-gantt id="GanttControl"
     [connectorlineWidth]= 1 >
</ej-gantt>

cssClass string

Specify the CSS class for Gantt to achieve custom theme.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
     cssClass= "gradient-lime">
</ej-gantt>

dataSource array

Collection of data or hierarchical data to represent in Gantt

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    [dataSource]= "projectData">
</ej-gantt>

TS

export class AppComponent {
    public projectData: any;
    constructor() {
        this.projectData = [{Id:2,TaskName:"Testing",startDate:"12/1/2000",Duration:5 }] 
    }
}

dateFormat string

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

Default Value

• “MM/dd/yyyy”

Example

HTML

<ej-gantt id="GanttControl"
     dateFormat= "dd/MM/yyyy">
</ej-gantt>

dayWorkingTime array

Specifies the customized working time for tasks in Gantt

Default Value

• [{ “from”: “08:00 AM”, “to”: “12:00 PM” }, { “from”: “01:00 PM”, “to”: “05:00 PM” }]

Example

HTML

<ej-gantt id="GanttControl"
    [dayWorkingTime]= "dayWorkingTime">
</ej-gantt>

TS

export class AppComponent {
    public dayWorkingTime: any;
    constructor() {
        this.dayWorkingTime = [{ "from": "08:00 AM", "to": "12:00 PM" , background: "#FF0000"}, { "from": "01:00 PM", "to": "05:00 PM" , background: "#0000FF" }]
    }
}

dragTooltip object

Option for customizing the drag tooltip while reordering the rows.

dragTooltip.showTooltip boolean

Specifies option to enable/disable tooltip while drag and drop a row.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [dragTooltip]= "dragTooltip">
</ej-gantt>

TS

export class AppComponent {
    public dragTooltip: any;
    constructor() {
        this.dragTooltip = { showTooltip:  true }
    }
}

dragTooltip.tooltipItems array

Specifies the data source fields to be displayed in the drag tooltip.

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [dragTooltip]= "dragTooltip">
</ej-gantt>

TS

export class AppComponent {
    public dragTooltip: any;
    constructor() {
        this.dragTooltip = { tooltipItems: ["TaskName","TaskID","StartDate"] }
    }
}

dragTooltip.tooltipTemplate string

Specifies the custom template for drag tooltip.

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    [dragTooltip]= "dragTooltip">
</ej-gantt>

TS

export class AppComponent {
    public dragTooltip: any;
    constructor() {
        this.dragTooltip = { tooltipTemplate: "" }
    }
}

durationMapping string

Specifies the mapping property path for duration of a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
     durationMapping= "Duration">
</ej-gantt>

durationUnit enum

Specifies the duration unit for each tasks whether days or hours or minutes

Name	Description
Day	Sets the Duration Unit as day.
Hour	Sets the Duration Unit as hour.
Minute	Sets the Duration Unit as minute.

Default Value

• ej.Gantt.DurationUnit.Day

Example

HTML

<ej-gantt id="GanttControl"
    [durationUnit]= "durationUnit">
</ej-gantt>

TS

export class AppComponent {
    public durationUnit: any;
    constructor() {
        this.durationUnit = ej.Gantt.DurationUnit.Hour
    }
}

durationUnitMapping string

Specifies the mapping property path for task duration unit in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
     durationUnitMapping= "durationUnit">
</ej-gantt>

editDialogFields array

Specifies the fields to be included in the edit dialog in Gantt

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [editDialogFields]= "editDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public editDialogFields: any;
    constructor() {
        this.editDialogFields = [{ field: "taskId", editType: "stringedit" }]
    }
}

editDialogFields.field string

Specifies mapping name to include required fields in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [editDialogFields]= "editDialogFields">
</ej-gantt>

TS

import {Component} from '@angular/core';

export class AppComponent {
    public editDialogFields: any;
    constructor() {
        this.editDialogFields = [{ field: "taskId" }]
    }
}

editDialogFields.editType string

Specifies editType of fields to be included in the edit dialog in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [editDialogFields]= "editDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public editDialogFields: any;
    constructor() {
        this.editDialogFields = [{ editType: "stringedit" }]
    }
}

editDialogFields.displayInGeneralTab boolean

Specifies the custom column field was displayed in General tab of edit dialog or not.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [editDialogFields]= "editDialogFields">
</ej-gantt>

TS

export class AppComponent {
    public editDialogFields: any;
    constructor() {
        this.editDialogFields = [{ field:"customColumn", displayInGeneralTab: true }]
    }
}

editSettings object

Specifies the editSettings options in Gantt.

editSettings.allowAdding boolean

Enables or disables add record icon in Gantt toolbar

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {allowAdding : true}
    }
}

editSettings.allowDeleting boolean

Enables or disables delete icon in Gantt toolbar

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {allowDeleting : true}
    }
}

editSettings.allowEditing boolean

Specifies the option for enabling or disabling editing in Gantt grid part

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {allowEditing : true}
    }
}

editSettings.allowIndent boolean

Specifies the option for enabling or disabling indent action in Gantt.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {allowIndent : true}
    }
}

editSettings.allowOutdent boolean

Specifies the option for enabling or disabling outdent action in Gantt

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {allowOutdent : true}
    }
}

editSettings.beginEditAction enum

Specifies the mouse action whether single click or double click to begin the editing

Name	Description
DblClick	you can begin the editing at double click
Click	you can begin the editing at single click

Default Value

• ej.Gantt.BeginEditAction.DblClick

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {beginEditAction : "click"}
    }
}

editSettings.editMode string

Specifies the edit mode in Gantt, “normal” is for dialog editing ,”cellEditing” is for cell type editing

Default Value

• normal

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {editMode : "normal"}
    }
}

editSettings.rowPosition enum

Specifies the position where the new row has to be added.

Name	Description
Top	you can add a new row at top.
Bottom	you can add a new row at bottom.
AboveSelectedRow	you can add a new row to above selected row.
BelowSelectedRow	you can add a new row to below selected row.
Child	you can add a new row as a child for selected row.

Default Value

• ej.Gantt.RowPosition.BelowSelectedRow

Example

HTML

<ej-gantt id="GanttControl"
    [editSettings]= "editSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.editSettings = {rowPosition : ej.Gantt.RowPosition.AboveSelectedRow}
    }
}

enableAltRow boolean

Enables or Disables enableAltRow row effect in Gantt

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [enableAltRow]= "true">
</ej-gantt>

enableCollapseAll boolean

Enables or disables the collapse all records when loading the Gantt.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [enableCollapseAll]= "true">
</ej-gantt>

enableContextMenu boolean

Enables or disables the contextmenu for Gantt , when enabled contextmenu appears on right clicking Gantt

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [enableContextMenu]= "true">
</ej-gantt>

enablePredecessorValidation boolean

Enable or disable predecessor validation. When it is true, all the task’s start and end dates are aligned based on its predecessors start and end dates.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [enablePredecessorValidation]= "true">
</ej-gantt>

enableProgressBarResizing boolean

Indicates whether we can edit the progress of a task interactively in Gantt.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [enableProgressBarResizing]= "true">
</ej-gantt>

enableResize boolean

Enables or disables the option for dynamically updating the Gantt size on window resizing

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [enableResize]= "true">
</ej-gantt>

enableSerialNumber boolean

Enables or disables serial number column for Gantt. When enabled, the records will be number sequenced.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [enableSerialNumber]= "true">
</ej-gantt>

enableTaskbarDragTooltip boolean

Enables or disables tooltip while editing (dragging/resizing) the taskbar.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [enableTaskbarDragTooltip]= "true">
</ej-gantt>

enableTaskbarTooltip boolean

Enables or disables tooltip for taskbar.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [enableTaskbarTooltip]= "true">
</ej-gantt>

enableVirtualization boolean

Enables/Disables virtualization for rendering Gantt items.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [enableVirtualization]= "true">
</ej-gantt>

enableWBS boolean

Enables/disables work breakdown structure column.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [enableWBS]= "true">
</ej-gantt>

enableWBSPredecessor boolean

Enables/disables WBS predecessor column.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [enableWBSPredecessor]= "true">
</ej-gantt>

endDateMapping string

Specifies the mapping property path for end Date of a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    endDateMapping= "EndDate">
</ej-gantt>

expandStateMapping string

Specifies the mapping property path for the expand status of a record in data source.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    expandStateMapping= "isExpanded">
</ej-gantt>

filterSettings object

Options for filtering and customizing filter actions.

filterSettings.filteredColumns array

Specifies the column collection for filtering the Gantt content on initial load

Default Value

• []

filterSettings.filteredColumns.value string

Specifies the value to be filtered in Gantt.

Default Value

• -

filterSettings.filteredColumns.field string

Specifies the field where filtering has to be performed.

Default Value

• -

filterSettings.filteredColumns.predicate string

Specifies the predicate(and/or) value to perform filtering.

Default Value

• -

filterSettings.filteredColumns.operator string

Specifies the filter condition to filtered column. See operator

Default Value

• -

Example

HTML

<ej-gantt id="GanttControl"
    [filterSettings]= "filterSettings">
</ej-gantt>

TS

export class AppComponent {
    public editSettings: any;
    constructor() {
        this.filterSettings = {
            filteredColumns: [{
                value: "plan",
                field: "taskName",
                predicate: "and",
                operator: "startswith"
            }]
        }
    }
}

groupCollection array

Specifies the data collection for grouping the resources in resource allocation view in Gantt.

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [groupCollection]= "groups">
</ej-gantt>

TS

export class AppComponent {
    public resources: any;
    constructor() {
        this.groups =[{groupId:1; groupName:"Team A" }] ;
    }
}

groupIdMapping string

Specifies the mapping property path for group ID in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    groupIdMapping= "groupId">
</ej-gantt>

groupNameMapping string

Specifies the mapping property path for group name in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    groupNameMapping= "groupName">
</ej-gantt>

highlightNonWorkingTime boolean

Specifies whether to highlight the non working time in Gantt.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [highlightNonWorkingTime]= "true">
</ej-gantt>

highlightWeekends boolean

Specifies whether to highlight the weekends in Gantt .

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [highlightWeekends]= "true">
</ej-gantt>

holidays array

Collection of holidays with date, background and label information to be displayed in Gantt.

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [holidays]= "holidays">
</ej-gantt>

TS

export class AppComponent {
    public holidays: any;
    constructor() {
        this.holidays =[{day:"12/2/2000",background:"cyan",label:"local holiday" }]
    }
}

holidays.day string

Specifies holiday date to be displayed in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [holidays]= "holidays">
</ej-gantt>

TS

export class AppComponent {
    public holidays: any;
    constructor() {
        this.holidays =[{day:"12/2/2000" }]
    }
}

holidays.background string

Specifies the background color for holiday date in Gantt Schedule

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [holidays]= "holidays">
</ej-gantt>

TS

export class AppComponent {
    public holidays: any;
    constructor() {
        this.holidays =[{background:"cyan" }]   
    }
}

holidays.label string

Specifies the label to be displayed for rendered holiday in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [holidays]= "holidays">
</ej-gantt>

TS

export class AppComponent {
    public holidays: any;
    constructor() {
        this.holidays =[{label:"local holiday" }]
    }
}

includeWeekend boolean

Specifies whether to include weekends while calculating the duration of a task.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [includeWeekend]= "true">
</ej-gantt>

isResponsive boolean

Enables or disables the responsiveness of Gantt

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [isResponsive]= "true">
</ej-gantt>

leftTaskLabelMapping string

Specifies the data source field name to be displayed as left task label

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    leftTaskLabelMapping= "taskId">
</ej-gantt>

leftTaskLabelTemplate string

Specifies the template for left task label

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    leftTaskLabelTemplate= "#customTaskLeftLabel">
</ej-gantt>

locale string

Specify the locale for Gantt

Default Value

• “en-US”

Example

HTML

<ej-gantt id="GanttControl"
    locale= "fr-FR">
</ej-gantt>

milestoneMapping string

Specifies the mapping property path for milestone in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    milestoneMapping= "milestone">
</ej-gantt>

milestoneTemplate string

To Specify the JsRender script Id to customize the mile stone with our preference

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    milestoneTemplate= "MilestoneTemplate">
</ej-gantt>

nonWorkingBackground string

Specifies the background color for non working time in Gantt.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    nonWorkingBackground = "#0000FF">
</ej-gantt>

notesMapping string

Specifies the mapping property path for the task description in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    notesMapping= "notes">
</ej-gantt>

parentProgressbarBackground string

Specifies the background of parent progressbar in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    parentProgressbarBackground= "#F2F2F2">
</ej-gantt>

parentTaskIdMapping string

Specifies the mapping property path for parent task Id in self reference datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    parentTaskIdMapping= "parentID">
</ej-gantt>

parentTaskbarBackground string

Specifies the background of parent taskbar in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    parentTaskbarBackground= "#F2F2F2">
</ej-gantt>

parentTaskbarTemplate string

Specifies the template for parent taskbar

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    parentTaskbarTemplate= "parentTaskbarTemplate">
</ej-gantt>

predecessorMapping string

Specifies the mapping property path for predecessors of a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    predecessorMapping= "predecessor">
</ej-gantt>

predecessorTooltipTemplate string

Specifies the JsRender template id or template script for predecessor tooltip on mouse action.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    predecessorTooltipTemplate= "predecessorTooltipTemplate">
</ej-gantt>

progressMapping string

Specifies the mapping property path for progress percentage of a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    progressMapping = "Progress">
</ej-gantt>

progressbarBackground string

Specifies the background of progressbar in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    progressbarBackground= "#F2F2F2">
</ej-gantt>

progressbarHeight number

Specified the height of the progressbar in taskbar

Default Value

• 100

Example

HTML

<ej-gantt id="GanttControl"
    progressbarHeight= "100">
</ej-gantt>

progressbarTooltipTemplate string

Specifies the template for tooltip on resizing progressbar

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    progressbarTooltipTemplate= "progressbarTooltipTemplate">
</ej-gantt>

progressbarTooltipTemplateId string

Specifies the template ID for customized tooltip for progressbar editing in Gantt

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    progressbarTooltipTemplateId= "tooltipTemplateID">
</ej-gantt>

query object

It receives query to retrieve data from the table (query is same as SQL).

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    [query]= "query">
</ej-gantt>

TS

export class AppComponent {
    public query: any;
    constructor() {
        this.query = ej.Query().from("Categories").select("CategoryID,CategoryName").take(3);
    }
}

readOnly boolean

Enables or disables Gantt to read-only mode

Default Value

• “false”

Example

HTML

<ej-gantt id="GanttControl"
    [readOnly] = "true">
</ej-gantt>

renderBaseline boolean

Enables or Disables rendering baselines in Gantt , when enabled baseline is rendered in Gantt

Default Value

• “false”

Example

HTML

<ej-gantt id="GanttControl"
    [renderBaseline] = "true">
</ej-gantt>

resourceCollectionMapping string

Specifies the mapping property path for resource collection in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    resourceCollectionMapping= "resources">
</ej-gantt>

resourceIdMapping string

Specifies the mapping property name for resource ID in resource Collection in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    resourceIdMapping = "id">
</ej-gantt>

resourceInfoMapping string

Specifies the mapping property path for resources of a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    resourceInfoMapping = "resourceId">
</ej-gantt>

resourceNameMapping string

Specifies the mapping property path for resource name of a task in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    resourceNameMapping = "name">
</ej-gantt>

resourceUnitMapping string

Specifies the mapping property path for resource’s percent effort involved in a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    resourceUnitMapping = "Unit">
</ej-gantt>

resources array

Collection of data regarding resources involved in entire project

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [resources]= "resources">
</ej-gantt>

TS

export class AppComponent {
    public resources: any;
    constructor() {
        this.resources =[{id:1; name:"jack" }] ;
    }
}

rightTaskLabelMapping string

Specifies the data source field name to be displayed as right task label

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    rightTaskLabelMapping = "taskName">
</ej-gantt>

rightTaskLabelTemplate string

Specifies the template for right task label

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    rightTaskLabelTemplate = "#customTaskRightLabel">
</ej-gantt>

roundOffDayworkingTime boolean

Specifies whether rounding off the day working time edits

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [roundOffDayWorkingTime] = "true">
</ej-gantt>

rowHeight number

Specifies the height of a single row in Gantt. Also, we need to set same height in the CSS style with class name e-rowcell.

Default Value

• 30

Example

HTML

<ej-gantt id="GanttControl"
    [rowHeight] = "50">
</ej-gantt>

scheduleEndDate string

Specifies end date of the Gantt schedule. By default, end date will be rounded to its next Saturday.

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    scheduleEndDate = "12/2/2000">
</ej-gantt>

scheduleHeaderSettings object

Specifies the options for customizing schedule header.

scheduleHeaderSettings.dayHeaderFormat string

Specified the format for day view in schedule header

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={dayHeaderFormat : "ddd" };
    }
}

scheduleHeaderSettings.hourHeaderFormat string

Specified the format for Hour view in schedule header

Default Value

• “HH”

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={hourHeaderFormat : 'HH'};
    }
}

scheduleHeaderSettings.minutesPerInterval enum

Specifies the number of minutes per interval

Name	Description
Auto	Sets the interval automatically according with schedule start and end date.
OneMinute	Sets one minute intervals per hour.
FiveMinutes	Sets Five minute intervals per hour.
FifteenMinutes	Sets fifteen minute intervals per hour.
ThirtyMinutes	Sets thirty minute intervals per hour.

Default Value

• ej.Gantt.minutesPerInterval.Auto

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={minutesPerInterval : ej.Gantt.minutesPerInterval.OneMinute};
    }
}

scheduleHeaderSettings.monthHeaderFormat string

Specified the format for month view in schedule header

Default Value

• “MMM”

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={monthHeaderFormat : "MMM"};
    }
}

scheduleHeaderSettings.scheduleHeaderType enum

Specifies the schedule mode

Name	Description
Year	Sets year Schedule Mode.
Month	Sets month Schedule Mode.
Week	Sets week Schedule Mode.
Day	Sets day Schedule Mode.
Hour	Sets hour Schedule Mode.

Default Value

• ej.Gantt.ScheduleHeaderType.Week

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={scheduleHeaderType : ej.Gantt.ScheduleHeaderType.Month};
    }
}

scheduleHeaderSettings.timescaleStartDateMode enum

Specifies the round-off mode for the start date in schedule header.

Name	Description
Auto	The round-off value will be automatically calculated based on the data source values.
Week	Schedule header start date will round-off to the immediate week.
Month	Schedule headers start date will round off to the immediate month
Year	Schedule headers start date will round off to the immediate year

Default Value

• ej.Gantt.TimescaleRoundMode.Auto

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={timescaleStartDateMode : ej.Gantt.TimescaleRoundMode.Week};
    }
}

scheduleHeaderSettings.weekendBackground string

Specified the background for weekends in Gantt

Default Value

• “#F2F2F2”

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={weekendBackground : "#F2F2F2"};
    }
}

scheduleHeaderSettings.weekHeaderFormat string

Specified the format for week view in schedule header

Default Value

• “MMM dd , yyyy”

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={weekHeaderFormat : "MMM dd , yyyy"};
    }
}

scheduleHeaderSettings.yearHeaderFormat string

Specified the format for year view in schedule header

Default Value

• “yyyy”

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={yearHeaderFormat : "yyyy" };
    }
}

scheduleHeaderSettings.timescaleUnitSize string

Specifies the size of the lowest time unit along the timescale, with minimum value as “50%” and maximum value as “500%”. It is also possible to set the value in pixels.

Default Value

• “100%”

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={timescaleUnitSize : "250%"};
    }
}

scheduleHeaderSettings.weekStartDay number

Specifies the start day of the week in week timescale mode

Default Value

• 0

Example

HTML

<ej-gantt id="GanttControl"
    [scheduleHeaderSettings]= "scheduleHeaderSettings">
</ej-gantt>

TS

export class AppComponent {
    public scheduleHeaderSettings: any;
    constructor() {
        this.scheduleHeaderSettings ={weekStartDay : 3 };
    }
}

scheduleHeaderSettings.updateTimescaleView boolean

Enable or disable the automatic timescale update on cell editing, dialog editing and taskbar editing.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
		[scheduleHeaderSettings]= "scheduleHeaderSettings">
	</ej-gantt>

TS

export class AppComponent {
		public scheduleHeaderSettings: any;
		constructor() {
			this.scheduleHeaderSettings ={updateTimescaleView : false };
    }
}

scheduleStartDate string

Specifies start date of the Gantt schedule. By default, start date will be rounded to its previous Sunday.

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    scheduleStartDate = "12/2/2000">
</ej-gantt>

selectedCellIndexes array

Specifies the selected cell information on rendering Gantt.

selectedCellIndexes.rowIndex number

Specifies the row index of the cell to be selected Gantt control

Default Value

• -1

selectedCellIndexes.cellIndex number

Specifies the cell index to be selected in the row.

Default Value

• -1

Example

HTML

<ej-gantt id="GanttControl"
    [selectedCellIndexes]= "selectedCellIndexes">
</ej-gantt>

TS

export class AppComponent {
    public selectedCellIndexes: any;
    constructor() {
        this.selectedCellIndexes =[{rowIndex: 2, cellIndex: 3}];
    }
}

selectedRowIndex number

Specifies the selected row Index in Gantt , the row with given index will highlighted

Default Value

• -1

Example

HTML

<ej-gantt id="GanttControl"
    [selectedRowIndex] = "3">
</ej-gantt>

selectionType enum

Specifies the row selection type.

Name	Description
Single	you can select a single row.
Multiple	you can select a multiple row.

Default Value

• ej.Gantt.SelectionType.Single

Example

HTML

<ej-gantt id="GanttControl"
    [selectionType]= "selectionType">
</ej-gantt>

TS

export class AppComponent {
    public selectionType: any;
    constructor() {
        this.selectionType = ej.Gantt.SelectionType.Multiple;
    }
}

selectionMode enum

Specifies the type of selection whether to select row or cell.

Name	Description
Row	you can select a row.
Cell	you can select a cell.

Default Value

• ej.Gantt.SelectionMode.Row

Example

HTML

<ej-gantt id="GanttControl"
    [selectionMode]= "selectionMode">
</ej-gantt>

TS

export class AppComponent {
    public selectionMode: any;
    constructor() {
        this.selectionMode = ej.Gantt.SelectionMode.Row;
    }
}

showColumnChooser boolean

Enables or disables the column chooser.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [showColumnChooser] = "true">
</ej-gantt>

showColumnOptions boolean

Enables/disables the options for inserting , deleting and renaming columns.

Default Value

• false

Example

HTML

<ej-gantt id="GanttControl"
    [showColumnOptions] = "true">
</ej-gantt>

showGridCellTooltip boolean

Specifies the template for cell tooltip

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [showGridCellTooltip] = "true">
</ej-gantt>

showGridExpandCellTooltip boolean

Specifies whether to show grid cell tooltip over expander cell alone.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [showGridExpandCellTooltip] = "true">
</ej-gantt>

showProgressStatus boolean

Specifies whether display task progress inside taskbar.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [showProgressStatus] = "true">
</ej-gantt>

showResourceNames boolean

Specifies whether to display resource names for a task beside taskbar.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [showResourceNames] = "true">
</ej-gantt>

showTaskNames boolean

Specifies whether to display task name beside task bar.

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [showTaskNames] = "true">
</ej-gantt>

sizeSettings object

Specifies the size option of Gantt control.

sizeSettings.height string

Specifies the height of Gantt control

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [sizeSettings]= "sizeSettings">
</ej-gantt>

TS

export class AppComponent {
    public sizeSettings: any;
    constructor() {
        this.sizeSettings = {height: "700px"};
    }
}

sizeSettings.width string

Specifies the width of Gantt control

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [sizeSettings]= "sizeSettings">
</ej-gantt>

TS

export class AppComponent {
    public sizeSettings: any;
    constructor() {
        this.sizeSettings = {width: "700px"};
    }
}

sortSettings object

Specifies the sorting options for Gantt.

sortSettings.sortedColumns array

Specifies the sorted columns for Gantt

Default Value

• []

Example

HTML

<ej-gantt id="GanttControl"
    [sortSettings]= "sortSettings">
</ej-gantt>

TS

export class AppComponent {
    public sortSettings: any;
    constructor() {
        this.sortSettings = {sortedColumns : [{ field:"startDate",direction:"ascending" }]};
    }
}

sortSettings.sortedColumns.field string

Specifies the field to be sorted in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [sortSettings]= "sortSettings">
</ej-gantt>

TS

export class AppComponent {
    public sortSettings: any;
    constructor() {
        this.sortSettings = {sortedColumns : [{ field:"startDate" }]};
    }
}

sortSettings.sortedColumns.direction string

Specifies the sort direction in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [sortSettings]= "sortSettings">
</ej-gantt>

TS

export class AppComponent {
    public sortSettings: any;
    constructor() {
        this.sortSettings = {sortedColumns : [{ direction:"ascending" }]};
    }
}

splitterPosition string

Specifies splitter position in Gantt.

Default Value

• null

Example

HTML

<ej-gantt id="GanttControl"
    [splitterPosition] = "50%">
</ej-gantt>

splitterSettings object

Option to configure the splitter position.

splitterSettings.position string

Specifies position of the splitter in Gantt , splitter can be placed either based on percentage values or pixel values.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [splitterSettings]= "splitterSettings">
</ej-gantt>

TS

export class AppComponent {
    public splitterSettings: any;
    constructor() {
        this.splitterSettings = {position : "300px"};
    }
}

splitterSettings.index string

Specifies the position of splitter in Gantt, based on column index in Gantt.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [splitterSettings]= "splitterSettings">
</ej-gantt>

TS

export class AppComponent {
    public splitterSettings: any;
    constructor() {
        this.splitterSettings = {index : "3"};
    }
}

startDateMapping string

Specifies the mapping property path for start date of a task in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    startDateMapping = "startDate">
</ej-gantt>

stripLines array

Specifies the options for striplines

Default Value

• []

Example

stripLines.day string

Specifies date to render striplines in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [stripLines]= "stripLines">
</ej-gantt>

TS

export class AppComponent {
    public stripLines: any;
    constructor() {
        this.stripLines = [{ day: "12/2/2000"}];
    }
}

stripLines.label string

Specifies label to be displayed for striplines in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [stripLines]= "stripLines">
</ej-gantt>

TS

export class AppComponent {
    public stripLines: any;
    constructor() {
        this.stripLines = [{ label: "Project Release" }];
    }
}

stripLines.lineStyle string

Specifies line style for rendered striplines in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [stripLines]= "stripLines">
</ej-gantt>

TS

export class AppComponent {
    public stripLines: any;
    constructor() {
        this.stripLines =[{ lineStyle: "dotted"}];
    }
}

stripLines.lineColor string

Specifies the line color for rendered striplines in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [stripLines]= "stripLines">
</ej-gantt>

TS

export class AppComponent {
    public stripLines: any;
    constructor() {
        this.stripLines =[{ lineColor: "Darkblue"}];
    }
}

stripLines.lineWidth string

Specifies the width of the stripline in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [stripLines]= "stripLines">
</ej-gantt>

TS

export class AppComponent {
    public stripLines: any;
    constructor() {
        this.stripLines =[{ lineWidth : 2}];
    }
}

taskCollectionMapping string

Specifies the mapping property path for assigned task collection for resources in datasource in resource allocation view type.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskCollectionMapping= "tasks">
</ej-gantt>

taskIdMapping string

Specifies the mapping property path for task Id in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarIdMapping= "taskId">
</ej-gantt>

taskNameMapping string

Specifies the mapping property path for task name in datasource

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarNameMapping= "taskName">
</ej-gantt>

taskSchedulingMode enum

Specifies the task scheduling mode for a project and this will be set to all the tasks available in the project

Name	Description
Auto	All the tasks in the project will be displayed in auto scheduled mode, where the tasks are scheduled automatically over non-working days and holidays.
Manual	All the tasks in the project will be displayed in manually scheduled mode.
Custom	Project consists of tasks with both auto and manually scheduled modes, based on the datasource values

Default Value

• ej.Gantt.TaskSchedulingMode.Auto

Example

HTML

<ej-gantt id="GanttControl"
    [taskSchedulingMode]= "taskSchedulingMode">
</ej-gantt>

TS

export class AppComponent {
    public taskSchedulingMode: any;
    constructor() {
        this.taskSchedulingMode =ej.Gantt.TaskSchedulingMode.Auto ;
    }
}

taskSchedulingModeMapping string

Specifies the mapping property path for the task scheduling mode for a task in datasource

Default Value

• “auto”

Example

HTML

<ej-gantt id="GanttControl"
    taskSchedulingModeMapping= "taskMode">
</ej-gantt>

taskType enum

Specifies the nature of a task for calculating the work, and it can fixed duration, fixed work and fixed resource unit

Name	Description
FixedUnit	Resource unit remains constant while editing the work and duration values.
FixedWork	Work value of a task remains constant while editing duration and resource unit values.
FixedDuration	Duration value remains constant while editing work and resource unit values.

Default Value

• ej.Gantt.TaskType.FixedUnit

Example

HTML

<ej-gantt id="GanttControl"
    [taskType]= "taskType">
</ej-gantt>

TS

export class AppComponent {
    public taskType: any;
    constructor() {
        this.taskType = ej.Gantt.TaskType.FixedWork ;
    }
}

taskbarBackground string

Specifies the background of the taskbar in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarBackground = "#F2F2F2">
</ej-gantt>

taskbarEditingTooltipTemplate string

Specifies the template script for customized tooltip for taskbar editing in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarEditingTooltipTemplate = "tooltipTemplate">
</ej-gantt>

taskbarEditingTooltipTemplateId string

Specifies the template Id for customized tooltip for taskbar editing in Gantt

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarEditingTooltipTemplateId= "TooltipTemplateId">
</ej-gantt>

taskbarHeight number

Specifies the height of taskBar in Gantt.

Default Value

• 20

Example

HTML

<ej-gantt id="GanttControl"
    [taskbarHeight]= "25">
</ej-gantt>

taskbarTemplate string

To Specify the JsRender script Id to customize the task bar with our preference

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarTemplate= "TaskbarTemplate">
</ej-gantt>

taskbarTooltipTemplate string

Specifies the template for tooltip on mouse action on taskbars

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarTooltipTemplate= "TaskbarTooltipTemplate">
</ej-gantt>

taskbarTooltipTemplateId string

Specifies the template id for tooltip on mouse action on taskbars

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    taskbarTooltipTemplateId= "TaskbarTooltipTemplateId">
</ej-gantt>

toolbarSettings object

Specifies the toolbarSettings options.

toolbarSettings.showToolbar boolean

Specifies the state of enabling or disabling toolbar

Default Value

• true

Example

HTML

<ej-gantt id="GanttControl"
    [toolbarSettings]= "toolbarSettings">
</ej-gantt>

TS

export class AppComponent {
    public toolbarSettings: any;
    constructor() {
        this.toolbarSettings =  { showToolbar:  true} ;
    }
}

toolbarSettings.toolbarItems array

Specifies the list of toolbar items to be rendered in Gantt toolbar

Name	Description
Add	Enables the add icon in toolbar
Edit	Enables the edit icon in toolbar
Delete	Enables the edit icon in toolbar
Update	Enables the update icon in toolbar
Cancel	Enables the cancel icon in toolbar
Search	Enables the search icon in toolbar
Indent	Enables the indent icon in toolbar
Outdent	Enables the outdent icon in toolbar
ExpandAll	Enables the expand all icon in toolbar
Collapse All	Enables the collapse all icon in toolbar
PrevTimeSpan	Enables the previous time span icon in toolbar
NextTimeSpan	Enables the next time span icon in toolbar
ExcelExport	Enables the excel export toolbar icon

Default Value

• []

Example

JAVASCRIPT

<ej-gantt id="GanttControl"
    [toolbarSettings]= "toolbarSettings">
</ej-gantt>

TS

export class AppComponent {
    public toolbarSettings: any;
    constructor() {
        this.toolbarSettings =  {  toolbarItems: [ej.Gantt.ToolbarItems.Add,ej.Gantt.ToolbarItems.Edit]} ;
    }
}

toolbarSettings.customToolbarItems array

Allows the user to insert custom toolbar items.

toolbarSettings.customToolbarItems.text string

Allows the user to insert the custom icons in toolbar using CSS class name selector.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [toolbarSettings]= "toolbarSettings">
</ej-gantt>

TS

export class AppComponent {
    public toolbarSettings: any;
    constructor() {
        this.toolbarSettings = {customToolbarItems: [{ text: "Reset",tooltipText:"Reset" }]} ;
    }
}

toolbarSettings.customToolbarItems.templateID string

Allows the user to insert the custom icons in toolbar using script templates. Using this property we can bind HTML elements and other EJ controls to Gantt toolbar.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [toolbarSettings]= "toolbarSettings">
</ej-gantt>

TS

export class AppComponent {
    public toolbarSettings: any;
    constructor() {
        this.toolbarSettings =  {customToolbarItems: [{ templateID: "#ColumnVisibility",tooltipText:"Column Visibility" }]}]} ;
    }
}

toolbarSettings.customToolbarItems.tooltipText string

Allows the user to display custom tooltip text for Gantt custom toolbar items.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    [toolbarSettings]= "toolbarSettings">
</ej-gantt>

TS

export class AppComponent {
    public toolbarSettings: any;
    constructor() {
        this.toolbarSettings =  {customToolbarItems: [{ templateID: "#ColumnVisibility",tooltipText:"Column Visibility" },{ text: "Reset",tooltipText:"Column Visibility" }]} ;
    }
}

treeColumnIndex number

Specifies the tree expander column in Gantt

Default Value

• 0

Example

HTML

<ej-gantt id="GanttControl"
    [treeColumnIndex] = "1">
</ej-gantt>

validateManualTasksOnLinking boolean

Enables or disables the schedule date validation while connecting a manually scheduled task with predecessor

Default Value

• “false”

Example

HTML

<ej-gantt id="GanttControl"
    [validateManualTaskOnLinking] = "true">
</ej-gantt>

viewType enum

Specifies the view type for a project in the Gantt.

Name	Description
ProjectView	Displays the project in task view in Gantt.
ResourceView	Displays the project in resource allocation view in Gantt.
HistogramView	Displays the project in histogram view in Gantt

Default Value

• ej.Gantt.ViewType.ProjectView

Example

HTML

<ej-gantt id="GanttControl"
    [viewType]= "viewType">
</ej-gantt>

TS

export class AppComponent {
    public viewType: any;
    constructor() {
        this.viewType = ej.Gantt.ViewType.ResourceView;
    }
}

weekendBackground string

Specifies the weekendBackground color in Gantt

Default Value

• “#F2F2F2”

Example

HTML

<ej-gantt id="GanttControl"
    weekendBackground = "blue">
</ej-gantt>

workMapping string

Specifies the mapping property path for the work field of a task in the data source. When it is mapped the end date and duration for a task will be calculated automatically.

Default Value

• ””

Example

HTML

<ej-gantt id="GanttControl"
    workMapping = "estimatedHours">
</ej-gantt>

workUnit enum

Specifies the unit for the work involved in a task and it can be day, hour or minute

Name	Description
Day	Displays the work involved in a task in days.
Hour	Displays the work involved in a task in hours.
Minute	Displays the work involved in a task in minutes

Default Value

• ej.Gantt.WorkUnit.Hour

Example

HTML

<ej-gantt id="GanttControl"
    [workUnit]= "workUnit">
</ej-gantt>

TS

export class AppComponent {
    public workUnit: any;
    constructor() {
        this.workUnit =  ej.Gantt.WorkUnit.Day;
    }
}

workWeek array

Gets or sets the working days of a week in a project.

Default Value

• [“Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”]

Example

HTML

<ej-gantt id="GanttControl"
    [workweek]= "workweek">
</ej-gantt>

TS

export class AppComponent {
    public workweek: any;
    constructor() {
        this.workweek =  ["Sunday","Monday","Tuesday","Wednesday","Thursday"];
    }
}

workingTimeScale enum

Specifies the working time schedule of day

Name	Description
TimeScale8Hours	Sets eight hour timescale.
TimeScale24Hours	Sets twenty four hour timescale.

Default Value

• ej.Gantt.workingTimeScale.TimeScale8Hours

Example

HTML

<ej-gantt id="GanttControl"
    [workingTimeScale]= "workingTimeScale">
</ej-gantt>

TS

export class AppComponent {
    public workingTimeScale: any;
    constructor() {
        this.workingTimeScale = ej.Gantt.workingTimeScale.TimeScale24Hours;
    }
}

Methods

addRecord(data, rowPosition)

To add a new item in Gantt

Name	Type	Description
data	object	Item to add in Gantt row.
rowPosition	string	Defines in which position the row wants to add

Example

HTML

<button id="addrow" (click)="addRow($event)">Add Row</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public addRow(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        var data = {taskId:"40",taskName:"New Task 40",startDate:"2/20/2014",startDate:"2/25/2014"};
        ganttObj.addRecord(data, ej.Gantt.AddRowPosition.Child); // To add a task
    }
}

cancelEdit()

To cancel the edited state of an item in Gantt

Example

HTML

<button id="canceledit" (click)="cancelEdit($event)">Cancel Edit</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public cancelEdit(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.cancelEdit(); 
    }
}

clearFilter()

To clear all the filtered columns in Gantt.

Example

HTML

<button id="clearfilter" (click)="clearFilter($event)">clearFilter</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public clearFilter(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.clearFilter(); 
    }
}

clearSorting()

To clear the sorted columns in Gantt.

Example

HTML

<button id="clearSorting" (click)="clearSorting($event)">clearSorting</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public clearSorting(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.clearSorting(); 
    }
}

collapseAllItems()

To collapse all the parent items in Gantt

Example

HTML

<button id="collapseAll" (click)="collapseAll($event)">Collapse All</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public collapseAll(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.collapseAllItems(); 
    }
}

deleteDependency(fromTaskId,toTaskId)

To delete the dependency between the two tasks.

Name	Type	Description
fromTaskId	number	taskID of predecessor task
toTaskId	number	taskID of successor task

Example

HTML

<button id="deletedependency" (click)="deleteDependency($event)">Delete Dependency</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public deleteDependency(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.deleteDependency(3,6); 
    }
}

deleteItem()

To delete a selected item in Gantt

Example

HTML

<button id="deleteItem" (click)="deleteItem($event)">Delete Item</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public deleteItem(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.deleteItem(); 
    }
}

destroy()

destroy the Gantt widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

Example

HTML

<button id="destroy" (click)="destroy($event)">Destroy</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public destroy(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.destroy(); 
    }
}

expandAllItems()

To Expand all the parent items in Gantt

Example

HTML

<button id="expandAll" (click)="expandAll($event)">Expand All</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public destroy(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.expandAllItems(); 
    }
}

expandCollapseRecord(taskId)

To expand and collapse an item in Gantt using item’s ID

Name	Type	Description
taskId	Number	Expand or Collapse a record based on task id.

Example

HTML

<button id="expandCollapse" (click)="expandCollapse($event)">Expand Collapse</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public expandCollapse(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.expandCollapseRecord(23); 
    }
}

export(action, [serverEvent], [multipleExport])

Export the Gantt content to excel or PDF document.

Name	Type	Description
action	string	Pass the controller action name corresponding to exporting
serverEvent	string	optionalASP server event name corresponding to exporting
multipleExport	boolean	optionalPass the multiple exporting value as true/false

Returns:

Void

Example

HTML

<button id="export" (click)="export($event)">export</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public export(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.export("/api/GanttExport/ExcelExport"); 
    }
}

filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase])

Sends filtering request to filter a column in Gantt dynamically.

Name	Type	Description
fieldName	string	Pass the field name of the column.
filterOperator	string	string/integer/date operator.
filterValue	string	Pass the value to be filtered in a column.
predicate	string	Optional - Pass the predicate as and/or.
matchCase	boolean	Optional - pass the match case value as true/false.

Example

HTML

<button id="filterColumn" (click)="filterColumn($event)">filterColumn</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public selectCells(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.filterColumn("taskName", "startswith", "plan");
    }
}

filterContent(ejPredicate)

To filter multiple columns with multiple conditions dynamically in Gantt.

Name	Type	Description
ejPredicate	object	Pass the filtering column details and conditions as ejPredicate instance. The ejPredicate object is defined as fieldName,filterOperator, filterValue and ignoreCase properties. Name Type Description fieldName string Pass the field name of the column. filterOperator string string/integer/date operator. filterValue string Pass the value to be filtered in a column. ignoreCase boolean Optional - pass the ignore case value as true/false.

Example

HTML

<button id="filterContent" (click)="filterContent($event)">filterContent</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public filterContent(event) {
        var obj = $("#gantt").ejGantt("instance");
        var predicate = ej.Predicate("taskName", ej.FilterOperators.equal, "planning", false)
                          .or("taskName", ej.FilterOperators.equal, "plan budget", false)
                          .and("progress", ej.FilterOperators.equal, 100, true);
        obj.filterContent(predicate);
    }
}

getColumns()

To get available column collection in Gantt.

Example

HTML

<button id="getColumns" (click)="getColumns($event)">getColumns</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public getColumns(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        var columns = ganttObj.getColumns();
    }
}

getResourceViewEditColumns()

To get the column collection which are used to edit the task by using task add/edit dialog in resource view.

Example

HTML

<button id="getResourceViewEditColumns" (click)="getResourceViewEditColumns($event)">getResourceViewEditColumns</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public getResourceViewEditColumns(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        var columns = ganttObj.getResourceViewEditColumns();
    }
}

hideColumn(headerText)

To hide the column by using header text

Name	Type	Description
headerText	string	you can pass a header text of a column to hide

Example

HTML

<button id="hideColumn" (click)="hideColumn($event)">hideColumn</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public hideColumn(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.hideColumn("Task Name");
    }
}

indentItem()

To indent a selected item in Gantt

Example

HTML

<button id="indentItem" (click)="indentItem($event)">indentItem</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public indentItem(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.indentItem();
    }
}

openAddDialog()

To Open the dialog to add new task to the Gantt

Example

HTML

<button id="openAddDialog" (click)="openAddDialog($event)">openAddDialog</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public openAddDialog(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.openAddDialog();
    }
}

openEditDialog()

To Open the dialog to edit existing task to the Gantt

Example

HTML

<button id="openEditDialog" (click)="openEditDialog($event)">openEditDialog</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public openEditDialog(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.openEditDialog();
    }
}

outdentItem()

To outdent a selected item in Gantt

Example

HTML

<button id="outdentItem" (click)="outdentItem($event)">outdentItem</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public outdentItem(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.outdentItem();
    }
}

saveEdit()

To save the edited state of an item in Gantt

Example

HTML

<button id="saveEdit" (click)="saveEdit($event)">saveEdit</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public saveEdit(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.saveEdit();
    }
}

searchItem(searchString)

To search an item with search string provided at the run time

Name	Type	Description
searchString	string	you can pass a text to search in Gantt Control.

Example

HTML

<button id="searchItem" (click)="searchItem($event)">searchItem</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public searchItem(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.searchItem($("#text").val());
    }
}

selectCells(Indexes,preservePreviousSelectedCell)

To select cell based on the cell and row index dynamically.

Name	Type	Description
Indexes	array	array of cell indexes to be select
preservePreviousSelectedCell	boolean	Defines that we need to preserve the previously selected cells of not

Example

HTML

<button id="selectCells" (click)="selectCells($event)">selectCells</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public selectCells(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
        ganttObj.selectCells(indexes,true);
    }
}

selectMultipleRows(rowIndexes)

To select multiple rows dynamically.

Name	Type	Description
rowIndexes	array	array of row indexes to select

Example

HTML

<button id="selectMultipleRows" (click)="selectMultipleRows($event)">selectMultipleRows</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public selectMultipleRows(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance"),
        rowIndexes = [0,4,7];
        ganttObj.selectMultipleRows(rowIndexes);
    }
}

setScrollTop(top)

Method to set scroll top value for Gantt control.

Name	Type	Description
Top	number	Pass a value to set top position of vertical scroll bar.

Usage: we can able to change the top position of vertical scroll bar dynamically.

Example

HTML

<button id="setScrollTop" (click)="setScrollTop($event)">setScrollTop</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public setScrollTop(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.setScrollTop(100);
    }
}

setSplitterIndex(index)

Positions the splitter by the specified column index.

Name	Type	Description
index	Number	Set the splitter position based on column index.

Example

HTML

<button id="setSplitterIndex" (click)="setSplitterIndex($event)">setSplitterIndex</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public setSplitterIndex(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.setSplitterIndex(3);
    }
}

setSplitterPosition(width)

To set the grid width in Gantt

Name	Type	Description
width	string	you can give either percentage or pixels value

Example

HTML

<button id="setSplitterPosition" (click)="setSplitterPosition($event)">setSplitterPosition</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public setSplitterPosition(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.setSplitterPosition("40%");
    }
}

showColumn(headerText)

To show the column by using header text

Name	Type	Description
headerText	string	you can pass a header text of a column to show

Example

HTML

<button id="showColumn" (click)="showColumn($event)">showColumn</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public showColumn(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.showColumn("Task Name");
    }
}

showCriticalPath(isShown)

To show/hide the critical tasks in current project.

Name	Type	Description
isShown	boolean	To show/hide the critical tasks

Example

HTML

<button id="showCriticalPath" (click)="showCriticalPath($event)">showCriticalPath</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public showCriticalPath(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.showCriticalPath(true);
    }
}

sortColumn(mappingName, columnSortDirection)

To sort the column in required direction

Name	Type	Description
mappingName	string	Defines the column's mapping name in which sorting have to be performed
columnSortDirection	string	Defines the sort direction whether the column has to sorted in ascending/descending order. By default it is sorting in an ascending order

Example

HTML

<button id="sortColumn" (click)="sortColumn($event)">sortColumn</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public sortColumn(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.sortColumn("startDate","ascending");
    }
}

updateDependency(fromTaskId,toTaskId, predecessorType, offset)

To update the predecessor type and offset value for existing task dependency.

Name	Type	Description
fromTaskId	number	taskID of predecessor task
toTaskId	number	taskID of successor task
predecessorType	string	Type of dependency task.
offset	number	Offset value of dependency task.

Example

HTML

<button id="updateDependency" (click)="updateDependency($event)">updateDependency</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public updateDependency(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.updateDependency(3, 6, "SS", 3);
    }
}

updateRecordByTaskId(data)

To update the value of Gantt record by using it’s task id value.

Name	Type	Description
data	object	object with modified field values and current task id value

Example

HTML

<button id="updateRecordByTaskId" (click)="updateRecordByTaskId($event)">updateRecordByTaskId</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public updateRecordByTaskId(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        var data = { taskID: 4, taskName: "updated value"};
        ganttObj.updateRecordByTaskId(data);
    }
}

updateRecordByIndex(index, data)

To update the value of Gantt record by using row index.

Name	Type	Description
index	number	index of Gantt record to be updated
data	object	object with modified field value

Example

HTML

<button id="updateRecordByIndex" (click)="updateRecordByIndex($event)">updateRecordByIndex</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public updateRecordByIndex(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        var data = { taskName: "updated value"};
        ganttObj.updateRecordByIndex(data);
    }
}

updateScheduleDates(startDate, endDate)

To update the schedule start date and schedule end date of project.

Name	Type	Description
startDate	string	New schedule start date of project
endDate	string	New schedule end date of project

Example

HTML

<button id="updateScheduleDates" (click)="updateScheduleDates($event)">updateScheduleDates</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public updateScheduleDates(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.updateScheduleDates("5/25/2017", "9/27/2017")
    }
}

updateTaskId(currentId, newId)

To change an existing Gantt ID by new ID value dynamically

Name	Type	Description
currentId	number	you can pass an existing ID value to be change
newId	number	you can pass a new ID value to be change

Example

HTML

<button id="updateTaskId" (click)="updateTaskId($event)">updateTaskId</button>
<ej-gantt id="GanttControl">
//...
</ej-gantt>

TS

export class AppComponent {
    constructor() {
        //...
    }
    public updateTaskId(event) {
        var ganttObj = $("#GanttControl").ejGantt("instance");
        ganttObj.updateTaskId(5, 15);
    }
}

Events

actionBegin

Triggered for every Gantt action before its starts.

Name	Type	Description
argument	Object	Event parameters when Gantt is initialized: Name Type Description cancel boolean Returns the cancel option value. model object Returns the grid model. type string Returns the name of the event.
argument	Object	Event parameters while perform sorting in grid tree action starts: Name Type Description cancel boolean Returns the cancel option value. columnName string Returns the current grouped column field name. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event. columnSortDirection string Returns the direction of sorting ascending or descending
argument	Object	Event parameters while searching action starts: Name Type Description cancel boolean Returns the cancel option value. keyValue string Returns the value of searching element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters while performing the delete operation starts: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data of deleting element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters while performing the add operation starts: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data adding element. recordIndex number Returns selected record index requestType string Returns request type.
argument	Object	Event parameters while performing the edit operation starts: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data editing element recordIndex number Returns selected record index requestType string Returns request type.

Example

HTML

<ej-gantt id="GanttControl" (actionBegin)="actionBegin($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    actionBegin(sender) {
        //...
    }
}

actionComplete

Triggered for every Gantt action success event.

Name	Type	Description
argument	Object	Event parameters when Gantt is initialized: Name Type Description cancel boolean Returns the cancel option value. model object Returns the grid model. type string Returns the name of the event.
argument	Object	Event parameters after perform the sorting in TreeGrid part is completed: Name Type Description cancel boolean Returns the cancel option value. columnName string Returns the current grouped column field name. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event. columnSortDirection string Returns the direction of sorting ascending or descending
argument	Object	Event parameters after searching completed: Name Type Description cancel boolean Returns the cancel option value. keyValue string Returns the value of searched element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters while performing after completing the delete operation is completed: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data of deleted element. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.
argument	Object	Event parameters after the add operation completed: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data added element. recordIndex number Returns selected record index requestType string Returns request type.
argument	Object	Event parameters after the edit operation completed: Name Type Description cancel boolean Returns the cancel option value. data string Returns the data added element. recordIndex number Returns selected record index requestType string Returns request type.

Example

HTML

<ej-gantt id="GanttControl" (actionComplete)="actionComplete($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    actionComplete(sender) {
        //...
    }
}

beginEdit

Triggered while enter the edit mode in the TreeGrid cell

Name	Type	Description
argument	Object	Arguments when beginEdit event is triggered. Name Type Description cancel boolean Returns the cancel option value. rowElement object Returns the row element of editing cell. cellElement object Returns the Element of editing cell. data object Returns the data of current cell record. columnIndex number Returns the column Index of cell belongs.

Example

HTML

<ej-gantt id="GanttControl" (beginEdit)="beginEdit($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    beginEdit(sender) {
        //...
    }
}

cellSelected

Triggered after selected a cell

Name	Type	Description
argument	Object	Arguments when cellSelected event is triggered. Name Type Description cancel boolean Returns the cancel option value. cellIndex number Returns the cell index on the selection. rowIndex number Returns the row index on the selection targetCell object Returns the selecting cell element targetRow object Returns the selecting row element data object Returns the selecting record object model object Returns the Gantt object Model previousData object Returns the previously selected row data previousCellIndex object Returns the previously selected cell index previousRowIndex object Returns the previously selected row index previousTargetCell object Returns the previously selected cell element previousTargetRow object Returns the previously selected row element

Example

HTML

<ej-gantt id="GanttControl" (cellSelected)="cellSelected($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    cellSelected(sender) {
        //...
    }
}

cellSelecting

Triggered before selecting a cell

Name	Type	Description
argument	Object	Arguments when cellSelecting event is triggered. Name Type Description cancel boolean Returns the cancel option value. cellIndex number Returns the cell index on the selection. rowIndex number Returns the row index on the selection targetCell object Returns the selecting cell element targetRow object Returns the selecting row element data object Returns the selecting record object model object Returns the Gantt object Model

Example

HTML

<ej-gantt id="GanttControl" (cellSelecting)="cellSelecting($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    cellSelecting(sender) {
        //...
    }
}

collapsed

Triggered after collapsed the Gantt record

Name	Type	Description
argument	Object	Arguments when collapsed event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex Number Returns the row index of collapsed record. data object Returns the data of collapsed record. requestType string Returns Request Type. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<ej-gantt id="GanttControl" (collapsed)="collapsed($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    collapsed(sender) {
        //...
    }
}

collapsing

Triggered while collapsing the Gantt record

Name	Type	Description
argument	Object	Arguments when collapsing event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex Number Returns the row index of collapsing record. data object Returns the data of edited cell record.. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<ej-gantt id="GanttControl" (collapsing)="collapsing($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    collapsing(sender) {
        //...
    }
}

contextMenuOpen

Triggered while Context Menu is rendered in Gantt control

Name	Type	Description
argument	Object	Arguments when context menu is rendered. Name Type Description cancel boolean Returns the cancel option value. contextMenuItems array Returns the default context menu items to which we add custom items. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (contextMenuOpen)="contextMenuOpen($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    contextMenuOpen(sender) {
        //...
    }
}

create

Triggered when Gantt is rendered completely.

Name	Type	Description
argument	Object	Arguments when create event is triggered. Name Type Description cancel boolean Returns the cancel option value. model object Returns the Gantt model type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (create)="create($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    create(sender) {
        //...
    }
}

endEdit

Triggered after save the modified cellValue in Gantt.

Name	Type	Description
argument	Object	Arguments when endEdit event is triggered. Name Type Description cancel boolean Returns the cancel option value. rowElement object Returns the row element of editing cell. cellElement object Returns the Element of editing cell. data object Returns the data of edited cell record. columnName string Returns the column name of edited cell belongs. columnObject object Returns the column object of edited cell belongs.

Example

HTML

<ej-gantt id="GanttControl" (endEdit)="endEdit($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    endEdit(sender) {
        //...
    }
}

expanded

Triggered after expand the record

Name	Type	Description
argument	Object	Arguments when expanded event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex number Returns the row index of record. data object Returns the data of expanded record. requestType string Returns Request Type. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<ej-gantt id="GanttControl" (expanded)="expanded($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    expanded(sender) {
        //...
    }
}

expanding

Triggered while expanding the Gantt record

Name	Type	Description
argument	Object	Arguments when expanding event is triggered. Name Type Description cancel boolean Returns the cancel option value. recordIndex object Returns the row index of record. data object Returns the data of edited cell record.. expanded boolean Returns state of a record whether it is in expanded or collapsed state.

Example

HTML

<ej-gantt id="GanttControl" (expanding)="expanding($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    expanding(sender) {
        //...
    }
}

load

Triggered while Gantt is loaded

Name	Type	Description
argument	Object	Arguments when load event is triggered. Name Type Description cancel boolean Returns the cancel option value. model object Returns the Gantt model type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (load)="load($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    load(sender) {
        //...
    }
}

queryCellInfo

Triggered while rendering each cell in the TreeGrid

Name	Type	Description
argument	Object	Arguments when queryCellInfo event is triggered. Name Type Description cancel boolean Returns the cancel option value. cellElement object Returns the selecting cell element. cellValue string Returns the value of cell. data object Returns the data of current cell record. column object Returns the column of cell belongs.

Example

HTML

<ej-gantt id="GanttControl" (queryCellInfo)="queryCellInfo($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    queryCellInfo(sender) {
        //...
    }
}

queryTaskbarInfo

Triggered while rendering each taskbar in the Gantt

Name	Type	Description
argument	Object	Arguments when queryTaskbarInfo event is triggered. Name Type Description cancel boolean Returns the cancel option value. TaskbarBackground string Returns the taskbar background of current item. ProgressbarBackground string Returns the progressbar background of current item. parentTaskbarBackground string Returns the parent taskbar background of current item. parentProgressbarBackground string Returns the parent progressbar background of current item. data object Returns the data of the record.

Example

HTML

<ej-gantt id="GanttControl" (queryTaskbarInfo)="queryTaskbarInfo($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    queryTaskbarInfo(sender) {
        //...
    }
}

rowDataBound

Triggered while rendering each row

Name	Type	Description
argument	Object	Arguments when rowDataBound event is triggered. Name Type Description cancel boolean Returns the cancel option value. rowElement object Returns the row element of rendering row. data object Returns the data of rendering row record..

Example

HTML

<ej-gantt id="GanttControl" (rowDataBound)="rowDataBound($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    rowDataBound(sender) {
        //...
    }
}

rowDrag

Triggered while dragging a row in Gantt control

Name	Type	Description
argument	Object	Arguments when dragging a row. Name Type Description cancel boolean Returns the cancel option value. draggedRow object Returns the row which we start to drag. draggedRowIndex number Returns the row index which we start to drag. targetRow object Returns the row on which we are dragging. targetRowIndex number Returns the row index on which we are dragging. canDrop boolean Returns that we can drop over that record or not. dropPosition string Returns the drop position value on current target row. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (rowDrag)="rowDrag($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    rowDrag(sender) {
        //...
    }
}

rowDragStart

Triggered while start to drag row in Gantt control

Name	Type	Description
argument	Object	Arguments when drag starts. Name Type Description cancel boolean Returns the cancel option value. draggedRow object Returns the row which we start to drag. draggedRowIndex boolean Returns the row index which we start to drag. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (rowDragStart)="rowDragStart($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    rowDragStart(sender) {
        //...
    }
}

rowDragStop

Triggered while drop a row in Gantt control

Name	Type	Description
argument	Object	Arguments when dragging a row. Name Type Description cancel boolean Returns the cancel option value. draggedRow object Returns the row which we start to drag. draggedRowIndex number Returns the row index which we start to drag. targetRow object Returns the row which we are dropped to row. targetRowIndex number Returns the row index which we are dropped to row. model object Returns the Gantt model. requestType string Returns request type. type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (rowDragStop)="rowDragStop($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    rowDragStop(sender) {
        //...
    }
}

rowSelected

Triggered after the row is selected.

Name	Type	Description
argument	Object	Arguments when rowSelected event is triggered. Name Type Description cancel boolean Returns the cancel option value. targetRow object Returns the selecting row element. recordIndex number Returns the index of selecting row record. data object Returns the data of selected record.

Example

HTML

<ej-gantt id="GanttControl" (rowSelected)="rowSelected($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    rowSelected(sender) {
        //...
    }
}

rowSelecting

Triggered before the row is going to be selected.

Name	Type	Description
argument	Object	Arguments when rowSelecting event is triggered. Name Type Description cancel boolean Returns the cancel option value. data object Returns the data selecting record. recordIndex string Returns the index of selecting row record. targetChartRow object Returns the selecting row chart element. targetGridRow object Returns the selecting row grid element. previousData object Returns the previous selected data. previousIndex string Returns the previous selected row index. previousChartRow object Returns the previous selected row chart element. previousGridRow object Returns the previous selected row grid element.

Example

HTML

<ej-gantt id="GanttControl" (rowSelecting)="rowSelecting($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    rowSelecting(sender) {
        //...
    }
}

splitterResized

Triggered after splitter resizing action in Gantt.

Name	Type	Description
argument	Object	Arguments when splitterResized event is triggered. Name Type Description cancel boolean Returns the cancel option value. currentSplitterPosition string Returns the value based on current splitter position. customSplitterPosition string To set custom position for splitter after resize action. isOnResize boolean Returns the value to differentiate whether splitter resizing is performed either by manual resizing or by method isSplitterIndex boolean To differentiate `customSplitterPosition` value was index or position. prevSplitterPosition string Returns the previous splitter position.

Example

HTML

<ej-gantt id="GanttControl" (splitterResized)="splitterResized($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    splitterResized(sender) {
        //...
    }
}

taskbarClick

Triggered when taskbar item is clicked in Gantt.

Name	Type	Description
argument	Object	Arguments when taskbarClick event is triggered. Name Type Description data object Returns currently clicked row data index number Returns the current item index. model object Returns the Gantt model. taskbarElement object Returns the clicked row element target object Returns the target element. type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (taskbarClick)="taskbarClick($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    taskbarClick(sender) {
        //...
    }
}

taskbarEdited

Triggered after completing the editing operation in taskbar

Name	Type	Description
argument	Object	Arguments when taskbarEdited event is triggered. Name Type Description cancel boolean Returns the cancel option value. data object Returns the data of edited record. previousData object Returns the previous data value of edited record. dragging boolean Returns 'true' if taskbar is dragged. leftResizing boolean Returns 'true' if taskbar is left resized. rightResizing boolean Returns 'true' if taskbar is right resized. progressResizing boolean Returns 'true' if taskbar is progress resized. editingFields object Returns the field values of record being edited. model object Returns the Gantt model.

Example

HTML

<ej-gantt id="GanttControl" (taskbarEdited)="taskbarEdited($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    taskbarEdited(sender) {
        //...
    }
}

taskbarEditing

Triggered while editing the Gantt chart (dragging, resizing the taskbar )

Name	Type	Description
argument	Object	Arguments when taskbarEditing event is triggered. Name Type Description cancel boolean Returns the cancel option value. model object Returns the Gantt model. rowData object Returns the row object being edited. editingFields object Returns the field values of record being edited. type string Returns the name of the event. roundOffDuration boolean Returns duration value will be round-off or not.

Example

HTML

<ej-gantt id="GanttControl" (taskbarEditing)="taskbarEditing($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    taskbarEditing(sender) {
        //...
    }
}

toolbarClick

Triggered when toolbar item is clicked in Gantt.

Name	Type	Description
argument	Object	Arguments when toolbarClick event is triggered. Name Type Description cancel boolean Returns the cancel option value. currentTarget object Returns the current item. model object Returns the Gantt model. itemName string Returns the name of the toolbar item on which mouse click has been performed type string Returns the name of the event.

Example

HTML

<ej-gantt id="GanttControl" (toolbarClick)="toolbarClick($event)">
</ej-gantt>

TS

export class AppComponent {
    constructor() {

    }
    toolbarClick(sender) {
        //...
    }
}