ejGantt

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

    <ej-gantt id="GanttControl"
        [addDialogFields]= "addDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [addDialogFields]= "addDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [addDialogFields]= "addDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [addDialogFields]= "addDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [columnDialogFields]= "columnDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [dataSource]= "projectData">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [dayWorkingTime]= "dayWorkingTime">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [dragTooltip]= "dragTooltip">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [dragTooltip]= "dragTooltip">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [dragTooltip]= "dragTooltip">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [durationUnit]= "durationUnit">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editDialogFields]= "editDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editDialogFields]= "editDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editDialogFields]= "editDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editDialogFields]= "editDialogFields">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [editSettings]= "editSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [filterSettings]= "filterSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [groupCollection]= "groups">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [holidays]= "holidays">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [holidays]= "holidays">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [holidays]= "holidays">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [holidays]= "holidays">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [query]= "query">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [resources]= "resources">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [scheduleHeaderSettings]= "scheduleHeaderSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
    		[scheduleHeaderSettings]= "scheduleHeaderSettings">
    	</ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [selectedCellIndexes]= "selectedCellIndexes">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [selectionType]= "selectionType">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [selectionMode]= "selectionMode">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [sizeSettings]= "sizeSettings">
    </ej-gantt>
    export class AppComponent {
        public sizeSettings: any;
        constructor() {
            this.sizeSettings = {height: "700px"};
        }
    }

    sizeSettings.width string

    Specifies the width of Gantt control

    Default Value

    • ””

    Example

    <ej-gantt id="GanttControl"
        [sizeSettings]= "sizeSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [sortSettings]= "sortSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [sortSettings]= "sortSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [sortSettings]= "sortSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [splitterSettings]= "splitterSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [splitterSettings]= "splitterSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [stripLines]= "stripLines">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [stripLines]= "stripLines">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [stripLines]= "stripLines">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [stripLines]= "stripLines">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [stripLines]= "stripLines">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [taskSchedulingMode]= "taskSchedulingMode">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [taskType]= "taskType">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [toolbarSettings]= "toolbarSettings">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [viewType]= "viewType">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [workUnit]= "workUnit">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [workweek]= "workweek">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl"
        [workingTimeScale]= "workingTimeScale">
    </ej-gantt>
    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

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

    <button id="canceledit" (click)="cancelEdit($event)">Cancel Edit</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    export class AppComponent {
        constructor() {
            //...
        }
        public cancelEdit(event) {
            var ganttObj = $("#GanttControl").ejGantt("instance");
            ganttObj.cancelEdit(); 
        }
    }

    clearFilter()

    To clear all the filtered columns in Gantt.

    Example

    <button id="clearfilter" (click)="clearFilter($event)">clearFilter</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    export class AppComponent {
        constructor() {
            //...
        }
        public clearFilter(event) {
            var ganttObj = $("#GanttControl").ejGantt("instance");
            ganttObj.clearFilter(); 
        }
    }

    clearSorting()

    To clear the sorted columns in Gantt.

    Example

    <button id="clearSorting" (click)="clearSorting($event)">clearSorting</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    export class AppComponent {
        constructor() {
            //...
        }
        public clearSorting(event) {
            var ganttObj = $("#GanttControl").ejGantt("instance");
            ganttObj.clearSorting(); 
        }
    }

    collapseAllItems()

    To collapse all the parent items in Gantt

    Example

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

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

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

    <button id="destroy" (click)="destroy($event)">Destroy</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    export class AppComponent {
        constructor() {
            //...
        }
        public destroy(event) {
            var ganttObj = $("#GanttControl").ejGantt("instance");
            ganttObj.destroy(); 
        }
    }

    expandAllItems()

    To Expand all the parent items in Gantt

    Example

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

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

    <button id="export" (click)="export($event)">export</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="filterColumn" (click)="filterColumn($event)">filterColumn</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="filterContent" (click)="filterContent($event)">filterContent</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="getColumns" (click)="getColumns($event)">getColumns</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="getResourceViewEditColumns" (click)="getResourceViewEditColumns($event)">getResourceViewEditColumns</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="hideColumn" (click)="hideColumn($event)">hideColumn</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="indentItem" (click)="indentItem($event)">indentItem</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="openAddDialog" (click)="openAddDialog($event)">openAddDialog</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="openEditDialog" (click)="openEditDialog($event)">openEditDialog</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    export class AppComponent {
        constructor() {
            //...
        }
        public openEditDialog(event) {
            var ganttObj = $("#GanttControl").ejGantt("instance");
            ganttObj.openEditDialog();
        }
    }

    outdentItem()

    To outdent a selected item in Gantt

    Example

    <button id="outdentItem" (click)="outdentItem($event)">outdentItem</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="saveEdit" (click)="saveEdit($event)">saveEdit</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="searchItem" (click)="searchItem($event)">searchItem</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="selectCells" (click)="selectCells($event)">selectCells</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="selectMultipleRows" (click)="selectMultipleRows($event)">selectMultipleRows</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="setScrollTop" (click)="setScrollTop($event)">setScrollTop</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="setSplitterIndex" (click)="setSplitterIndex($event)">setSplitterIndex</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="setSplitterPosition" (click)="setSplitterPosition($event)">setSplitterPosition</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="showColumn" (click)="showColumn($event)">showColumn</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="showCriticalPath" (click)="showCriticalPath($event)">showCriticalPath</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="sortColumn" (click)="sortColumn($event)">sortColumn</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="updateDependency" (click)="updateDependency($event)">updateDependency</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="updateRecordByTaskId" (click)="updateRecordByTaskId($event)">updateRecordByTaskId</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="updateRecordByIndex" (click)="updateRecordByIndex($event)">updateRecordByIndex</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="updateScheduleDates" (click)="updateScheduleDates($event)">updateScheduleDates</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <button id="updateTaskId" (click)="updateTaskId($event)">updateTaskId</button>
    <ej-gantt id="GanttControl">
    //...
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (actionBegin)="actionBegin($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (actionComplete)="actionComplete($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (beginEdit)="beginEdit($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (cellSelected)="cellSelected($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (cellSelecting)="cellSelecting($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (collapsed)="collapsed($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (collapsing)="collapsing($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (contextMenuOpen)="contextMenuOpen($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (create)="create($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (endEdit)="endEdit($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (expanded)="expanded($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (expanding)="expanding($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (load)="load($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (queryCellInfo)="queryCellInfo($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (queryTaskbarInfo)="queryTaskbarInfo($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (rowDataBound)="rowDataBound($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (rowDrag)="rowDrag($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (rowDragStart)="rowDragStart($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (rowDragStop)="rowDragStop($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (rowSelected)="rowSelected($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (rowSelecting)="rowSelecting($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (splitterResized)="splitterResized($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (taskbarClick)="taskbarClick($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (taskbarEdited)="taskbarEdited($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (taskbarEditing)="taskbarEditing($event)">
    </ej-gantt>
    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

    <ej-gantt id="GanttControl" (toolbarClick)="toolbarClick($event)">
    </ej-gantt>
    export class AppComponent {
        constructor() {
    
        }
        toolbarClick(sender) {
            //...
        }
    }