JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in JavaScript (ES5) Gantt control

08 May 2023 / 40 minutes to read

This topic shows the API equivalent of JS2 Gantt component to be used, while migrating your project that uses JS1 Gantt.

Behavior API in Essential JS 1 API in Essential JS 2
Data Binding Property: dataSource

$("#gantt").ejGantt({
  dataSource: taskDetails,
});		 Property: dataSource

var ganttObj = new ej.gantt.Gantt({
  dataSource: GanttData,
});
ganttObj.appendTo('#gantt');
To map id of task from data source Property: taskIdMapping

$("#gantt").ejGantt({
taskIdMapping: 'taskId'
});		 Property: taskFields.id

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  id: 'taskId'
}
});
ganttObj.appendTo('#gantt');
To map name of task from data source Property: taskNameMapping

$("#gantt").ejGantt({
taskNameMapping: 'taskName'
});		 Property: taskFields.name

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  name: 'taskName'
}
});
ganttObj.appendTo('#gantt');
To map start date from data source Property: startDateMapping

$("#gantt").ejGantt({
startDateMapping: 'startDate'
});		 Property: taskFields.startDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  startDate: 'startDate'
}
});
ganttObj.appendTo('#gantt');
To map end date from data source Property: endDateMapping

$("#gantt").ejGantt({
endDateMapping: 'endDate'
});		 Property: taskFields.endDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  endDate: 'endDate'
}
});
ganttObj.appendTo('#gantt');
To map duration from data source Property: durationMapping

$("#gantt").ejGantt({
durationMapping : 'duration'
});		 Property: taskFields.duration

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  duration: 'duration'
}
});
ganttObj.appendTo('#gantt');
To map duration unit from data source Property: durationUnitMapping

$("#gantt").ejGantt({
durationUnitMapping : 'durationUnit'
});		 Property: taskFields.durationUnit

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  durationUnit: 'durationUnit'
}
});
ganttObj.appendTo('#gantt');
To map predecessors from data source Property: predecessorMapping

$("#gantt").ejGantt({
predecessorMapping: 'predecessor'
});		 Property: taskFields.dependency

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  dependency: 'predecessor'
}
});
ganttObj.appendTo('#gantt');
To map progress from data source Property: progressMapping

$("#gantt").ejGantt({
progressMapping: 'progress'
});		 Property: taskFields.progress

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  progress: 'progress'
}
});
ganttObj.appendTo('#gantt');
To map child task from data source Property: childMapping

$("#gantt").ejGantt({
childMapping : 'subTasks'
});		 Property: taskFields.child

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  child: 'subTasks'
}
});
ganttObj.appendTo('#gantt');
To map baseline start date from data source Property: baselineStartDateMapping

$("#gantt").ejGantt({
baselineStartDateMapping: 'baselineStartDate'
});		 Property: taskFields.baselineStartDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  baselineStartDate: 'baselineStartDate'
}
});
ganttObj.appendTo('#gantt');
To map baseline end date from data source Property: baselineEndDateMapping

$("#gantt").ejGantt({
baselineEndDateMapping: 'baselineEndDate'
});		 Property: taskFields.baselineEndDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
baselineEndDate: 'baselineEndDate'
}
});
ganttObj.appendTo('#gantt');
To map milestone mapping from data source Property: milestoneMapping

$("#gantt").ejGantt({
milestoneMapping: 'isMilestone'
});		 Property: taskFields.milestone

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  milestone: 'isMilestone'
}
});
ganttObj.appendTo('#gantt');
To map notes from data source Property: notesMapping

$("#gantt").ejGantt({
notesMapping: 'notes'
});		 Property: taskFields.notes

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  notes: 'notes'
}
});
ganttObj.appendTo('#gantt');
To map parent task id from data source Property: parentTaskIdMapping

$("#gantt").ejGantt({
parentTaskIdMapping: 'parentId'
});		 Property: taskFields.parentID

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  parentID: 'parentId'
}
});
ganttObj.appendTo('#gantt');
To map assigned resources from data source Property: resourceInfoMapping

$("#gantt").ejGantt({
resourceInfoMapping: 'assignedResource'
});		 Property: taskFields.resourceInfo

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  resourceInfo: 'assignedResource'
}
});
ganttObj.appendTo('#gantt');
To map expand state from data source Property: expandStateMapping

$("#gantt").ejGantt({
expandStateMapping: 'isExpanded'
});		 Property: taskFields.expandState

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  expandState: 'isExpanded'
}
});
ganttObj.appendTo('#gantt');

Members

Behavior API in Essential JS 1 API in Essential JS 2
To define fields in add dialog Property: addDialogFields

$("#gantt").ejGantt(
{
addDialogFields: [{ field: 'taskName', editType: 'stringedit' }]
});		 Property: addDialogFields

var ganttObj = new ej.gantt.Gantt({
addDialogFields: [{ type: 'General', fields: ['taskName'] }]
});
ganttObj.appendTo('#gantt');
To enable/disable column resize Property: allowColumnResize

$("#gantt").ejGantt(
{
allowColumnResize: true
});		 Property: allowResizing

var ganttObj = new ej.gantt.Gantt({
allowResizing: true
});
ganttObj.appendTo('#gantt');
To enable/disable row drag and drop Property: allowDragAndDrop

$("#gantt").ejGantt(
{
allowDragAndDrop: true
});		 Property: allowRowDragAndDrop

var ganttObj = new ej.gantt.Gantt({
allowRowDragAndDrop: true
}
});
ganttObj.appendTo('#gantt');});
To enable/disable taskbar editing Property: allowGanttChartEditing

$("#gantt").ejGantt(
{
allowGanttChartEditing: true
});		 Property: editSettings.allowTaskbarEditing
var ganttObj = new ej.gantt.Gantt({
editSettings: {
allowTaskbarEditing: true
}
});
ganttObj.appendTo('#gantt');
To enable/disable key navigation Property: allowKeyboardNavigation

$("#gantt").ejGantt(
{
allowKeyboardNavigation: true
});		 Property: allowKeyboard

var ganttObj = new ej.gantt.Gantt({
allowKeyboard: true
});
ganttObj.appendTo('#gantt');
To enable/disable multiple sorting option Property: allowMultiSorting

$("#gantt").ejGantt(
{
allowMultiSorting: true
});		 Property: allowSorting

var ganttObj = new ej.gantt.Gantt({
allowSorting: true
});
ganttObj.appendTo('#gantt');
To enable/disable multiple exporting option Property: allowMultipleExporting

$("#gantt").ejGantt(
{
allowMultipleExporting: true
});		 Not applicable
To map baseline end date from data source Property: baselineEndDateMapping

$("#gantt").ejGantt(
{
baselineEndDateMapping: 'baselineEndDate'
});		 Property: taskFields.baselineEndDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
baselineEndDate: 'baselineEndDate'
}
});
ganttObj.appendTo('#gantt');
To map baseline start date from data source Property: baselineStartDateMapping

$("#gantt").ejGantt(
{
baselineStartDateMapping: 'baselineStartDate'
});		 Property: taskFields.baselineStartDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
baselineStartDate: 'baselineStartDate'
}
});
ganttObj.appendTo('#gantt');
To define tooltip for all cells Property: cellTooltipTemplate

$("#gantt").ejGantt(
{
cellTooltipTemplate: '#templateId'
});		 Not applicable
To map child task from data source Property: childMapping

$("#gantt").ejGantt(
{
childMapping : 'subTasks'
});		 Property: taskFields.child

var ganttObj = new ej.gantt.Gantt({
taskFields: {
child: 'subTasks'
}
});
ganttObj.appendTo('#gantt');
To define columns fields in column insert dialog Property: columnDialogFields

$("#gantt").ejGantt(
{
columnDialogFields: ['field', 'headerText']
});		 Not applicable
To define working time range of day Property: dayWorkingTime

$("#gantt").ejGantt(
{
dayWorkingTime: [{from:'09:00 AM', to: '06:00 PM' }]
});		 Property: dayWorkingTime

var ganttObj = new ej.gantt.Gantt({
dayWorkingTime: [from: 9, to: 18]
});
ganttObj.appendTo('#gantt');
To define tooltip template for row drag action Property: dragTooltip

$("#gantt").ejGantt(
{
dragTooltip: { showTooltip: true }
});		 Not applicable
To map duration from data source Property: durationMapping

$("#gantt").ejGantt(
{
durationMapping : 'duration'
});		 Property: taskFields.duration

var ganttObj = new ej.gantt.Gantt({
taskFields: {
duration: 'duration'
}
});
ganttObj.appendTo('#gantt');
To map duration unit from data source Property: durationUnitMapping

$("#gantt").ejGantt(
{
durationUnitMapping : 'durationUnit'
});		 Property: taskFields.durationUnit

var ganttObj = new ej.gantt.Gantt({
taskFields: {
durationUnit: 'durationUnit'
}
});
ganttObj.appendTo('#gantt');
To define fields in edit dialog Property: editDialogFields

$("#gantt").ejGantt(
{
editDialogFields: [{ field: 'taskName', editType: 'stringedit' }]
});		 Property: editDialogFields

var ganttObj = new ej.gantt.Gantt({
editDialogFields: [{ type: 'General', fields: ['TaskName'] }]
});
ganttObj.appendTo('#gantt');
To define click or double click action to begin edit action Property: editSettings.allowIndent

$("#gantt").ejGantt(
{
editSettings: { allowIndent: true
}
});		 Not applicable
To enable indent/ outdent option Property: editSettings.beginEditAction

$("#gantt").ejGantt(
{
editSettings: { beginEditAction: ej.Gantt.BeginEditAction.Click
}
});		 Not applicable
To define edit mode in Gantt Property: editSettings.editMode

$("#gantt").ejGantt(
{
editSettings: { editMode: normal
}
});		 Property: editSettings.mode

var ganttObj = new ej.gantt.Gantt({
editSettings: { mode: 'Normal' }
});
ganttObj.appendTo('#gantt');
To define new row position in Gantt Property: editSettings.rowPosition

$("#gantt").ejGantt(
{
editSettings: { rowPosition: ej.Gantt.RowPosition.AboveSelectedRow
}
});		 Property: editSettings.newRowPosition

var ganttObj = new ej.gantt.Gantt({
editSettings: { newRowPosition: 'Below' }
});
ganttObj.appendTo('#gantt');
To render parent in collapsed state Property: enableCollapseAll

$("#gantt").ejGantt(
{
enableCollapseAll: true
});		 Property: collapseAllParentTasks

var ganttObj = new ej.gantt.Gantt({
collapseAllParentTasks: true
});
ganttObj.appendTo('#gantt');
To enable context menu in Gantt Property: enableContextMenu

$("#gantt").ejGantt(
{
enableContextMenu: true
});		 Not applicable
To enable progressbar resizing Property: enableProgressBarResizing

$("#gantt").ejGantt(
{
enableProgressBarResizing: true
});		 Property: editSettings.allowTaskbarEditing

var ganttObj = new ej.gantt.Gantt({
editSettings: { allowTaskbarEditing: true }
});
ganttObj.appendTo('#gantt');
To enable serial number support Property: enableSerialNumber

$("#gantt").ejGantt(
{
enableSerialNumber: true
});		 Not applicable
To enable taskbar editing tooltip Property: enableTaskbarDragTooltip

$("#gantt").ejGantt(
{
enableTaskbarDragTooltip: true
});		 Not Applicable
To enable taskbar tooltip Property: enableTaskbarTooltip

$("#gantt").ejGantt(
{
enableTaskbarTooltip: true
});		 Property: tooltipSettings.showTooltip

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { showTooltip: true }
});
ganttObj.appendTo('#gantt');
To enable virtual rendering in Gantt Property: enableVirtualization

$("#gantt").ejGantt(
{
enableVirtualization : true
});		 Not Applicable
To enable work break down structure in Gantt Property: enableWBS

$("#gantt").ejGantt(
{
enableWBS : true
});		 Not Applicable
To enable work break down structure predecessor in Gantt Property: enableWBSPredecessor

$("#gantt").ejGantt(
{
enableWBSPredecessor : true
});		 Not Applicable
To map end date from data source Property: endDateMapping

$("#gantt").ejGantt(
{
endDateMapping: 'endDate'
});		 Property: taskFields.endDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
endDate: 'endDate'
}
});
ganttObj.appendTo('#gantt');
To map expand state from data source Property: expandStateMapping

$("#gantt").ejGantt(
{
expandStateMapping: 'isExpanded'
});		 Property: taskFields.expandState

var ganttObj = new ej.gantt.Gantt({
taskFields: {
expandState: 'isExpanded'
}
});
ganttObj.appendTo('#gantt');
To define group collection for resource view Gantt Property: groupCollection

$("#gantt").ejGantt(
{
groupCollection : []
});		 Not Applicable
To map group id for resource view Gantt Property: groupIdMapping

$("#gantt").ejGantt(
{
groupIdMapping : 'groupId'
});		 Not Applicable
To map group name for resource view Gantt Property: groupNameMapping

$("#gantt").ejGantt(
{
groupNameMapping : 'groupName'
});		 Not Applicable
To highlight non working time range in Gantt Property: highlightNonWorkingTime

$("#gantt").ejGantt(
{
highlightNonWorkingTime : true
});		 Not Applicable
To define days in holiday collection Property: holidays.day

$("#gantt").ejGantt(
{
holidays: [ {day: '3/20/2018'}]
});		 Property: holidays.from

var ganttObj = new ej.gantt.Gantt({
holidays: [{from: '3/20/2018'}]
});
ganttObj.appendTo('#gantt');
To define left task label Property: leftTaskLabelMapping

$("#gantt").ejGantt(
{
leftTaskLabelMapping: 'endDate'
});		 Property: labelSettings.leftLabel

var ganttObj = new ej.gantt.Gantt({
labelSettings: {
leftLabel: 'endDate'
}
});
ganttObj.appendTo('#gantt');
To define left task label Property: leftTaskLabelTemplate

$("#gantt").ejGantt(
{
leftTaskLabelMapping: '#leftLabel'
});		 Property: labelSettings.leftLabel

var ganttObj = new ej.gantt.Gantt({
labelSettings: {
leftLabel: '#leftLabel'
}
});
ganttObj.appendTo('#gantt');
To map milestone mapping from data source Property: milestoneMapping

$("#gantt").ejGantt(
{
milestoneMapping: 'isMilestone'
});		 Property: taskFields.milestone

var ganttObj = new ej.gantt.Gantt({
taskFields: {
milestone: 'isMilestone'
}
});
ganttObj.appendTo('#gantt');
To define non-working background color Property: nonWorkingBackground

$("#gantt").ejGantt(
{
nonWorkingBackground : '#0000FF'
});		 Not Applicable
To map notes from data source Property: notesMapping

$("#gantt").ejGantt(
{
notesMapping: 'notes'
});		 Property: taskFields.notes

var ganttObj = new ej.gantt.Gantt({
taskFields: {
notes: 'notes'
}
});
ganttObj.appendTo('#gantt');
To define background color for parent progress bar Property: parentProgressbarBackground

$("#gantt").ejGantt(
{
parentProgressbarBackground: '#565673'
});		 Not applicable
To map parent task id from data source Property: parentTaskIdMapping

$("#gantt").ejGantt(
{
parentTaskIdMapping: 'parentId'
});		 Property: taskFields.parentID

var ganttObj = new ej.gantt.Gantt({
taskFields: {
parentID: 'parentId'
}
});
ganttObj.appendTo('#gantt');
To define background color for parent taskbar Property: parentTaskbarBackground

$("#gantt").ejGantt(
{
parentTaskbarBackground: '#565673'
});		 Not applicable
To map predecessors from data source Property: predecessorMapping

$("#gantt").ejGantt(
{
predecessorMapping: 'predecessor'
});		 Property: taskFields.dependency

var ganttObj = new ej.gantt.Gantt({
taskFields: {
dependency: 'predecessor'
}
});
ganttObj.appendTo('#gantt');
To define tooltip template for connector line Property: predecessorTooltipTemplate

$("#gantt").ejGantt(
{
predecessorTooltipTemplate: '#predecessorTooltip'
});		 Property: tooltipSettings.connectorLine

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { connectorLine: '#predecessorTooltip' }
});
ganttObj.appendTo('#gantt');
To map progress from data source Property: progressMapping

$("#gantt").ejGantt(
{
progressMapping: 'progress'
});		 Property: taskFields.progress

var ganttObj = new ej.gantt.Gantt({
taskFields: {
progress: 'progress'
}
});
ganttObj.appendTo('#gantt');
To define background color for progress bar Property: progressbarBackground

$("#gantt").ejGantt(
{
progressbarBackground : '#0000FF'
});		 Not Applicable
To define height for progress bar Property: progressbarHeight

$("#gantt").ejGantt(
{
progressbarHeight : 80
});		 Not Applicable
To define template for progress resize tooltip Property: progressbarTooltipTemplate

$("#gantt").ejGantt(
{
progressbarTooltipTemplate: ''
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { editing: '' }
});
ganttObj.appendTo('#gantt');
To define template id for progress resize tooltip Property: progressbarTooltipTemplateId

$("#gantt").ejGantt(
{
progressbarTooltipTemplateId: '#progressResize'
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { editing: '#progressResize' }
});
ganttObj.appendTo('#gantt');
To make Gantt as read only Property: readOnly

$("#gantt").ejGantt(
{
readOnly: true
});		 Not Applicable
To define mapping property for resource collection in resource view Gantt Property: resourceCollectionMapping

$("#gantt").ejGantt(
{
resourceCollectionMapping: 'resources'
});		 Not Applicable
To map resource id field from resource collection Property: resourceIdMapping

$("#gantt").ejGantt(
{
resourceIdMapping: 'resourceId'
});		 Property: resourceFields.id

var ganttObj = new ej.gantt.Gantt({
resourceFields: {
  id: 'ResourceID'
}
});
ganttObj.appendTo('#gantt');
To map assigned resources from data source Property: resourceInfoMapping

$("#gantt").ejGantt(
{
resourceInfoMapping: 'assignedResource'
});		 Property: taskFields.resourceInfo

var ganttObj = new ej.gantt.Gantt({
taskFields: {
resourceInfo: 'assignedResource'
}
});
ganttObj.appendTo('#gantt');
To map resource unit field from assigned resource collection Property: resourceUnitMapping

$("#gantt").ejGantt(
{
resourceUnitMapping: 'resourceUnit'
});		 Property: resourceFields.unit

var ganttObj = new ej.gantt.Gantt({
resourceFields: {
  unit: 'Unit'
}
});
ganttObj.appendTo('#gantt');
To define right task label Property: rightTaskLabelMapping

$("#gantt").ejGantt(
{
rightTaskLabelMapping: 'endDate'
});		 Property: labelSettings.rightLabel

var ganttObj = new ej.gantt.Gantt({
labelSettings: {
rightLabel: 'endDate'
}
});
ganttObj.appendTo('#gantt');
To enable rounding off date value in taskbar editing Property: roundOffDayworkingTime

$("#gantt").ejGantt(
{
roundOffDayworkingTime: true
});		 Not applicable
To define project end date in Gantt Property: scheduleEndDate

$("#gantt").ejGantt(
{
scheduleEndDate: '3/20/2018'
});		 Property: projectEndDate

var ganttObj = new ej.gantt.Gantt({
projectEndDate: '3/20/2018'
});
ganttObj.appendTo('#gantt');
To configure timeline settings in Gantt Property: scheduleHeaderSettings

$("#gantt").ejGantt(
{
scheduleHeaderSettings:
{
weekHeaderFormat: 'MMM dd , yyyy',
dayHeaderFormat: "",
yearHeaderFormat: 'yyyy',
monthHeaderFormat: 'MMM',
hourHeaderFormat: 'HH',
scheduleHeaderType: 'week',
minutesPerInterval: 'auto',
weekendBackground: '',
timescaleStartDateMode: 'auto',
timescaleUnitSize:'100%',
weekStartDay: 0,
updateTimescaleView: true
}
});		 Property: timelineSettings

var ganttObj = new ej.gantt.Gantt({
timelineSettings: {
timelineViewMode: 'Week',
timelineUnitSize: 33,
weekStartDay: 0,
weekendBackground:'',
showTooltip: true,
updateTimescaleView: true,
topTier: {
unit: 'Week',
format: 'MMM dd, y',
count: 1,
formatter: null
},
bottomTier: {
unit: 'Day',
format: 'dd',
count: 1,
formatter: null
}
}
});
ganttObj.appendTo('#gantt');
To define project start date in Gantt Property: scheduleStartDate

$("#gantt").ejGantt(
{
scheduleStartDate: '3/20/2018'
});		 Property: projectStartDate

var ganttObj = new ej.gantt.Gantt({
projectStartDate: '3/20/2018'
});
ganttObj.appendTo('#gantt');
To define selected cell index in Gantt Property: selectedCellIndexes

$("#gantt").ejGantt(
{
selectedCellIndexes: []
});		 Not applicable
To define selection type in Gantt Property: selectionType

$("#gantt").ejGantt(
{
selectionType: ej.Gantt.SelectionType.Single
});		 Property: selectionSettings.type

var ganttObj = new ej.gantt.Gantt({
selectionSettings: { type: 'Single'}
});
ganttObj.appendTo('#gantt');
To define selection mode in Gantt Property: selectionMode

$("#gantt").ejGantt(
{
selectionMode: ej.Gantt.SelectionMode.Row
});		 Property: selectionSettings.mode

var ganttObj = new ej.gantt.Gantt({
selectionSettings: { mode: 'Row'}
});
ganttObj.appendTo('#gantt');
To enable/disable column chooser Property: showColumnChooser

$("#gantt").ejGantt(
{
showColumnChooser: true
});		 Property: showColumnMenu

var ganttObj = new ej.gantt.Gantt({
showColumnMenu: true
});
ganttObj.appendTo('#gantt');
To enable/disable column add, remove option in column menu Property: showColumnOptions

$("#gantt").ejGantt(
{
showColumnOptions: true
});		 Not applicable
To enable/disable tooltip for grid cells Property: showGridCellTooltip

$("#gantt").ejGantt(
{
showGridCellTooltip: true
});		 Not applicable
To render progress status taskbar Property: showProgressStatus

$("#gantt").ejGantt(
{
showProgressStatus: true
});		 Property: labelSettings.taskLabel

var ganttObj = new ej.gantt.Gantt({
labelSettings: {
taskLabel: '${progress}%'
}
});
ganttObj.appendTo('#gantt');
To render resource names right to taskbar Property: showResourceNames

$("#gantt").ejGantt(
{
showResourceNames: true
});		 Property: labelSettings.rightLabel

var ganttObj = new ej.gantt.Gantt({
labelSettings: {
rightLabel: 'resourceInfo'
}
});
ganttObj.appendTo('#gantt');
To render task name left to taskbar Property: showTaskNames

$("#gantt").ejGantt(
{
showTaskNames: true
});		 Property: labelSettings.leftLabel

var ganttObj = new ej.gantt.Gantt({
labelSettings: {
leftLabel: 'taskName'
}
});
ganttObj.appendTo('#gantt');
To define height for Gantt Property: sizeSettings.height

$("#gantt").ejGantt(
{
sizeSettings: {height: '450px'}
});		 Property: height

var ganttObj = new ej.gantt.Gantt({
height: '450px'
});
ganttObj.appendTo('#gantt');
To define width for Gantt Property: sizeSettings.width

$("#gantt").ejGantt(
{
sizeSettings: {width: '750px'}
});		 Property: width

var ganttObj = new ej.gantt.Gantt({
width: '750px'
});
ganttObj.appendTo('#gantt');
To map start date from data source Property: startDateMapping

$("#gantt").ejGantt(
{
startDateMapping: 'startDate'
});		 Property: taskFields.startDate

var ganttObj = new ej.gantt.Gantt({
taskFields: {
startDate: 'startDate'
}
});
ganttObj.appendTo('#gantt');
To define strip lines in Gantt Property: stripLines

$("#gantt").ejGantt(
{
stripLines: [
{day: "02/06/2017",
label: "Project Start",
lineStyle: "dotted",
lineColor: "Darkblue",
lineWidth: 2 }]

});		 Property: eventMarkers

var ganttObj = new ej.gantt.Gantt({
eventMarkers: [
{day: new Date('04/09/2019'),
label: 'Research phase'
cssClass: 'e-custom-stripline'}
]
});
ganttObj.appendTo('#gantt');
To map task collection from resources for resource view Gantt Property: taskCollectionMapping

$("#gantt").ejGantt(
{
taskCollectionMapping: 'tasks'
});		 Not applicable
To map id of task from data source Property: taskIdMapping

$("#gantt").ejGantt(
{
taskIdMapping: 'taskId'
});		 Property: taskFields.id

var ganttObj = new ej.gantt.Gantt({
taskFields: {
id: 'taskId'
}
});
ganttObj.appendTo('#gantt');
To map name of task from data source Property: taskNameMapping

$("#gantt").ejGantt(
{
taskNameMapping: 'taskName'
});		 Property: taskFields.name

var ganttObj = new ej.gantt.Gantt({
taskFields: {
name: 'taskName'
}
});
ganttObj.appendTo('#gantt');
To define task scheduling mode in Gantt Property: taskSchedulingMode

$("#gantt").ejGantt(
{
taskSchedulingMode: ej.Gantt.TaskSchedulingMode.Auto
});		 Not applicable
To map task scheduling mode from data source Property: taskSchedulingModeMapping

$("#gantt").ejGantt(
{
taskSchedulingModeMapping: 'taskMode'
});		 Not applicable
To define task type in Gantt Property: taskType

$("#gantt").ejGantt(
{
taskType: ej.Gantt.TaskType.FixedUnit
});		 Not applicable
To define taskbar background type in Gantt Property: taskbarBackground

$("#gantt").ejGantt(
{
taskbarBackground: '#FF4453'
});		 Not applicable
To define tooltip template for taskbar edit action Property: taskbarEditingTooltipTemplate

$("#gantt").ejGantt(
{
taskbarEditingTooltipTemplate: ''
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { editing: '' }
});
ganttObj.appendTo('#gantt');
To define tooltip template id for taskbar edit action Property: taskbarEditingTooltipTemplateId

$("#gantt").ejGantt(
{
taskbarEditingTooltipTemplateId: '#templateId'
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { editing: '#templateId' }
});
ganttObj.appendTo('#gantt');
To define taskbar tooltip template string in Gantt Property: taskbarTooltipTemplate

$("#gantt").ejGantt(
{
taskbarTooltipTemplate: ''
});		 Property: tooltipSettings.taskbar

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { taskbar: '' }
});
ganttObj.appendTo('#gantt');
To define taskbar tooltip template id in Gantt Property: taskbarTooltipTemplateId

$("#gantt").ejGantt(
{
taskbarTooltipTemplateId: '#templateId'
});		 Property: tooltipSettings.taskbar

var ganttObj = new ej.gantt.Gantt({
tooltipSettings: { taskbar: '#templateId' }
});
ganttObj.appendTo('#gantt');
To configure toolbar of Gantt Property: toolbarSettings

$("#gantt").ejGantt(
{
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Gantt.ToolbarItems.Add] }
});		 Property: toolbar

var ganttObj = new ej.gantt.Gantt({
toolbar: ['Add']
});
ganttObj.appendTo('#gantt');
To enable predecessor validation task predecessor draw action Property: validateManualTasksOnLinking

$("#gantt").ejGantt(
{
validateManualTasksOnLinking: true
});		 Not applicable
To define view type of Gantt Property: viewType

$("#gantt").ejGantt(
{
viewType: ej.Gantt.ViewType.ProjectView
});		 Property: viewType

var ganttObj = new ej.gantt.Gantt({
  viewType: 'ProjectView'
});
ganttObj.appendTo('#gantt');
To define weekend background in Gantt Property: weekendBackground

$("#gantt").ejGantt(
{
weekendBackground: '#FF5673'
});		 Not applicable
To define view type of Gantt Property: viewType

$("#gantt").ejGantt(
{
viewType: ej.Gantt.ViewType.ProjectView
});		 Property: viewType

var ganttObj = new ej.gantt.Gantt({
  viewType: 'ProjectView'
});
ganttObj.appendTo('#gantt');
To map work value from data source Property: workMapping

$("#gantt").ejGantt(
{
workMapping: 'estimatedHours'
});		 Not applicable
To define work unit for tasks Property: workUnit

$("#gantt").ejGantt(
{
workUnit: ej.Gantt.WorkUnit.Hour
});		 Not applicable

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowSorting

$("#gantt").ejGantt({
allowSorting: true
});		 Property: allowSorting

var ganttObj = new ej.gantt.Gantt({
  allowSorting: true
});
ganttObj.appendTo('#gantt');
To enable/disable multiple sorting option Property: allowMultiSorting

$("#gantt").ejGantt({
allowMultiSorting: true
});		 Property: allowSorting

var ganttObj = new ej.gantt.Gantt({
  allowSorting: true
});
ganttObj.appendTo('#gantt');
Sort column Initially Property: sortSettings.sortedColumns

$("#gantt").ejGantt({
allowSorting: true,
sortedColumns: [
   {field: "taskName", direction: ej.sortOrder.Descending }
]
});		 Property: sortSettings.columns

var ganttObj = new ej.gantt.Gantt({
  allowSorting:true,
  sortSettings: {
  columns: [{ field: 'TaskID', direction: 'Ascending' }]
  }
});
ganttObj.appendTo('#gantt');
Clear the Sorted columns Method: clearSorting()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.clearSorting();
 Method: clearSorting()

var ganttObj = document.getElementById('gantt').ej2_instances[0]
ganttObj.clearSorting();
Sort records in Gantt Method: sortColumn(mappingName, columnSortDirection)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.sortColumn("startDate","ascending");
 Method: sortColumn(columnName, direction,[isMultiSort])

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.sortColumn('startDate','ascending');

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Filter column Initially Property: filterSettings.filteredColumns

$("#gantt").ejGantt({
filteredColumns: [{
   value: "plan",
  field: "taskName",
  predicate: "and",
  operator: "startswith"
}]
});		 Property: filterSettings.columns

var ganttObj = new ej.gantt.Gantt({
  allowFiltering: true,
  filterSettings: {
  columns: [{ field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' }]
  }
});
ganttObj.appendTo('#gantt');
Filter records in Gantt Method: filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase])

var ganttObj = $("#gantt").ejGantt("instance");
ganttObj.filterColumn("taskName", "startswith", "plan");
 Method: filterByColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase],[ignoreAccent])

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.filterByColumn('taskName', 'startswith', 'plan');
Filter multiple columns Method: filterContent(ejPredicate)

var ganttObj = $("#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);
ganttObj.filterContent(ejPredicate);
 Not applicable
Clear filtered columns Method: clearFilter()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.clearFilter();
 Method: clearFiltering()

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.clearFiltering();

Searching

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: toolbarSettings.toolbarItems

$("#gantt").ejGantt({
  toolbarSettings: {
  showToolbar: true,
  toolbarItems : [ej.Gantt.ToolbarItems.Search]
}
});		 Property: toolbar

var ganttObj = new ej.gantt.Gantt({
  toolbar: ['Search']
});
ganttObj.appendTo('#gantt');
Search records in Gantt Method: searchItem(key)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.searchItem("plan");
 Method: search(key)

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.search('plan');

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowSelection

$("#gantt").ejGantt({
  allowSelection: true
});		 Property: allowSelection

var ganttObj = new ej.gantt.Gantt({
  allowSelection: true
});
ganttObj.appendTo('#gantt');
To define selection type in Gantt Property: selectionType

$("#gantt").ejGantt({
selectionType: ej.Gantt.SelectionType.Single
});		 Property: selectionSettings.type

var ganttObj = new ej.gantt.Gantt({
  selectionSettings: { type: 'Single'}
});
ganttObj.appendTo('#gantt');
To define selection mode in Gantt Property: selectionMode

$("#gantt").ejGantt({
selectionMode: ej.Gantt.SelectionMode.Row
});		 Property: selectionSettings.mode

var ganttObj = new ej.gantt.Gantt({
  selectionSettings: { mode: 'Row'}
});
ganttObj.appendTo('#gantt');
Select Row by Index Property: selectedRowIndex

$("#gantt").ejGantt({
  selectedRowIndex : 2
});		 Property: selectedRowIndex

var ganttObj = new ej.gantt.Gantt({
  selectedRowIndex : 2
});
ganttObj.appendTo('#gantt');
To define selected cell index in Gantt Property: selectedCellIndexes

$("#gantt").ejGantt({
selectedCellIndexes: []
});		 Not applicable
Select Multiple Cells Method: selectCells(Indexes,preservePreviousSelectedCell)

var ganttObj = $("#gantt").data("ejGantt");
var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
ganttObj.selectCells(indexes, true);		 Method: selectCells(rowCellIndexes)

var ganttObj = document.getElementById('gantt').ej2_instances[0];
var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
ganttObj.selectionModule.selectCells(indexes);
Select multiple Rows Method: selectMultipleRows(rowIndexes)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.selectMultipleRows([1,2,3]);
 Method: selectRows(key)

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.selectionModule.selectRows([1,2,3]);
Triggers after cell selection action Event: cellSelected

$("#gantt").ejGantt({
cellSelected: function (args) {}
});		 Event: cellSelected

var ganttObj= new ej.gantt.Gantt({
cellSelected: function (args) {}
});
Triggers on cell selection action Event: cellSelecting

$("#gantt").ejGantt({
cellSelecting: function (args) {}
});		 Event: cellSelecting

var ganttObj= new ej.gantt.Gantt({
cellSelecting: function (args) {}
});
Triggers after row selection action Event: rowSelected

$("#gantt").ejGantt({
rowSelected: function (args) {}
});		 Event: rowSelected

var ganttObj= new ej.gantt.Gantt({
rowSelected: function (args) {}
});
Triggers before row selection action Event: rowSelecting

$("#gantt").ejGantt({
rowSelecting: function (args) {}
});		 Event: rowSelecting

var ganttObj= new ej.gantt.Gantt({
rowSelecting: function (args) {}
});

Editing

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: editSettings

$("#gantt").ejGantt({
  editSettings : {
  allowEditing: true,
  allowAdding: true,
  allowDeleting: true,
  showDeleteConfirmDialog: true}
});		 Property: editSettings

var ganttObj = new ej.gantt.Gantt({
  editSettings: {
  allowEditing: true,
  allowAdding: true,
  allowDeleting: true,
  showDeleteConfirmDialog: true}
});
ganttObj.appendTo('#gantt');
Cell Editing Property: editSettings.editMode

$("#gantt").ejGantt({
editSettings: {
editMode: "cellEditing"
}
});		 Property: editSettings.mode

var ganttObj = new ej.gantt.Gantt({
  editSettings: { mode: 'Auto' }
});
ganttObj.appendTo('#gantt');
Dialog Editing Property: editSettings.editMode

$("#gantt").ejGantt({
editSettings: {
editMode: "normal"
}
});		 Property: editSettings.mode

var ganttObj = new ej.gantt.Gantt({
  editSettings: { mode: 'Dialog' }
});
ganttObj.appendTo('#gantt');
To enable/disable taskbar editing Property: allowGanttChartEditing

$("#gantt").ejGantt({
allowGanttChartEditing: true
});		 Property: editSettings.allowTaskbarEditing
var ganttObj = new ej.gantt.Gantt({
editSettings: {
  allowTaskbarEditing: true
}
});
ganttObj.appendTo('#gantt');
To enable progressbar resizing Property: enableProgressBarResizing

$("#gantt").ejGantt({
enableProgressBarResizing: true
});		 Property: editSettings.allowTaskbarEditing

var ganttObj = new ej.gantt.Gantt({
editSettings: {
  allowTaskbarEditing: true
}
});
ganttObj.appendTo('#gantt');
To enable indent/ outdent option Property: editSettings.allowIndent

$("#gantt").ejGantt({
editSettings: {
allowIndent: true
}
});		 Not applicable
To define click or double click action to begin edit action Property: editSettings.beginEditAction

$("#gantt").ejGantt({
editSettings: {
beginEditAction: ej.Gantt.BeginEditAction.Click
}
});		 Not applicable
To define new row position in Gantt Property: editSettings.rowPosition

$("#gantt").ejGantt({
editSettings: {
rowPosition: ej.Gantt.RowPosition.AboveSelectedRow
}
});		 Property: editSettings.newRowPosition

var ganttObj = new ej.gantt.Gantt({
editSettings: {
  newRowPosition: 'Below'
}
});
ganttObj.appendTo('#gantt');
To define fields in edit dialog Property: editDialogFields

$("#gantt").ejGantt({
editDialogFields: [{ field: 'taskName', editType: 'stringedit' }]
});		 Property: editDialogFields

var ganttObj = new ej.gantt.Gantt({
  editDialogFields: [{ type: 'General', fields: ['TaskName'] }]
});
ganttObj.appendTo('#gantt');
To define fields in add dialog Property: addDialogFields

$("#gantt").ejGantt({
addDialogFields: [{ field: 'taskName', editType: 'stringedit' }]
});		 Property: addDialogFields

var ganttObj = new ej.gantt.Gantt({
  addDialogFields: [{ type: 'General', fields: ['taskName'] }]
});
ganttObj.appendTo('#gantt');
To make Gantt as read only Property: readOnly

$("#gantt").ejGantt({
readOnly: true
});		 Not Applicable
To open Edit dialog Method: openEditDialog()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.openEditDialog();
 Method: openEditDialog()

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.openEditDialog();
To open Add dialog Method: openAddDialog()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.openAddDialog();
 Method: openAddDialog()

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.openAddDialog();
Add task in Gantt Method: addRecord(data, rowPosition)

var ganttObj = $("#gantt").data("ejGantt");
var data = {
  taskId:"40",
  taskName:"New Task 40",
  startDate:"2/20/2014",
  endDate:"2/25/2014"
};
ganttObj.addRecord(data, ej.Gantt.AddRowPosition.Child);
 Method: addRecord(data, rowPosition, rowIndex)

var ganttObj = document.getElementById('gantt').ej2_instances[0];
var data = {
  taskId:"40",
  taskName:"New Task 40",
  startDate:"2/20/2014",
  endDate:"2/25/2014"
};
ganttObj.addRecord(data, 'Below', 10);
Delete selected item Method: deleteItem()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.deleteItem();
 Method: deleteRecord()

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.editModule.deleteRecord();
Update task details by id Method: updateRecordByTaskId(data)

var ganttObj = $("#gantt").data("ejGantt");
var data = { taskID: 4, taskName: "updated value"};
ganttObj.updateRecordByTaskId(data);
 Method: updateRecordByID

var ganttObj = document.getElementById('gantt').ej2_instances[0];
var data = { taskID: 4, taskName: "updated value"};
ganttObj.updateRecordByID(data);
Delete dependency Method: deleteDependency(fromTaskId,toTaskId)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.deleteDependency(3, 6);
 Not applicable
Save Edit Method: saveEdit()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.saveEdit();		 Not applicable
Cancel Edit Method: cancelEdit()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.cancelEdit();		 Method: cancelEdit()

var ganttObj = document.getElementById('gantt').ej2_instances[0]
ganttObj.cancelEdit()
Triggers for every Gantt action before it get started Event: actionBegin

$("#gantt").ejGantt({
actionBegin: function (args) {}
});		 Event: actionBegin

var ganttObj= new ej.gantt.Gantt({
actionBegin: function (args) {}
});
Triggers for after every Gantt action completed Event: actionComplete

$("#gantt").ejGantt({
actionComplete: function (args) {}
});		 Event: actionComplete

var ganttObj= new ej.gantt.Gantt({
actionComplete: function (args) {}
});
Triggers while resizing, dragging the taskbar Event: taskbarEditing

$("#gantt").ejGantt({
taskbarEditing: function (args) {}
});		 Event: taskbarEditing

var ganttObj= new ej.gantt.Gantt({
taskbarEditing: function (args) {}
});
Triggers after taskbar resize, drag action Event: taskbarEdited

$("#gantt").ejGantt({
taskbarEdited: function (args) {}
});		 Event: taskbarEdited

var ganttObj= new ej.gantt.Gantt({
taskbarEdited: function (args) {}
});

Columns

Behavior API in Essential JS 1 API in Essential JS 2
To enable/disable column resize Property: allowColumnResize

$("#gantt").ejGantt({
allowColumnResize: true
});		 Property: allowResizing

var ganttObj = new ej.gantt.Gantt({
  allowResizing: true
});
ganttObj.appendTo('#gantt');
To enable/disable column chooser Property: showColumnChooser

$("#gantt").ejGantt({
showColumnChooser: true
});		 Property: showColumnMenu

var ganttObj = new ej.gantt.Gantt({
  showColumnMenu: true
});
ganttObj.appendTo('#gantt');
To enable/disable column add, remove option in column menu Property: showColumnOptions

$("#gantt").ejGantt({
showColumnOptions: true
});		 Not applicable
Tree column index Property: treeColumnIndex

$("#gantt").ejGantt({
treeColumnIndex: 2,
});		 Property: treeColumnIndex

var ganttObj = new ej.gantt.Gantt({
  treeColumnIndex: 2
});
ganttObj.appendTo('#gantt');
To define column fields in column menu Property: columnDialogFields

$("#gantt").ejGantt({
columnDialogFields: ["field", "headerText", "editType", "width", "visible", "allowSorting", "textAlign", "headerTextAlign"]
});		 Not applicable
Show column Method: showColumn(headerText)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.showColumn("Task Name");		 Method: showColumn(keys, showBy)

var ganttObj = document.getElementById('gantt').ej2_instances[0]
ganttObj.showColumn("TaskName");
Hide column Method: hideColumn(headerText)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.hideColumn("Task Name");		 Method: hideColumn(keys, showBy)

var ganttObj = document.getElementById('gantt').ej2_instances[0]
ganttObj.hideColumn("TaskName");

Toolbar

Behavior API in Essential JS 1 API in Essential JS 2
To configure default toolbars of Gantt Property: toolbarSettings.toolbarItems

$("#gantt").ejGantt({
toolbarSettings: {
  showToolbar: true,
  toolbarItems: [
  ej.Gantt.ToolbarItems.Add,
  ej.Gantt.ToolbarItems.Edit,
  ej.Gantt.ToolbarItems.Delete,
  ej.Gantt.ToolbarItems.Update,
  ej.Gantt.ToolbarItems.Cancel,
  ej.Gantt.ToolbarItems.ExpandAll,
  ej.Gantt.ToolbarItems.CollapseAll,
  ej.Gantt.ToolbarItems.Search,
  ej.Gantt.ToolbarItems.PrevTimeSpan,
  ej.Gantt.ToolbarItems.NextTimeSpan
],
}
});		 Property: toolbar

var ganttObj = new ej.gantt.Gantt({
toolbar: ['Add','Edit','Delete','Update','Cancel',
  'ExpandAll','CollapseAll','Search','PrevTimeSpan','NextTimeSpan'],
});
ganttObj.appendTo('#gantt');
Other toolbars Property: toolbarSettings.toolbarItems

$("#gantt").ejGantt({
toolbarSettings: {
  showToolbar: true,
  toolbarItems: [
  ej.Gantt.ToolbarItems.Indent,
  ej.Gantt.ToolbarItems.Outdent,
  ej.Gantt.ToolbarItems.CriticalPath,
  ej.Gantt.ToolbarItems.ExcelExport,
  ej.Gantt.ToolbarItems.PdfExport
],
}
});		 Not applicable
Custom toolbar Property: toolbarSettings.customToolbarItems

$("#gantt").ejGantt({
toolbarSettings: {
  showToolbar: true,
  customToolbarItems: [{ text: "ShowBaseline", tooltipText: "Show Baseline" }, { text: "Reset",tooltipText:"Reset" }]
},
});		 Property: toolbar

var ganttObj = new ej.gantt.Gantt({
  toolbar: [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right'}],
});
ganttObj.appendTo('#gantt');
Triggers when toolbar items clicked Event: toolbarClick

$("#gantt").ejGantt({
toolbarClick: function (args) {}
});		 Event: toolbarClick

let gantt:Gantt= new Gantt({
toolbarClick: function (args) {}
});

ToolTip

Behavior API in Essential JS 1 API in Essential JS 2
To enable taskbar tooltip Property: enableTaskbarTooltip

$("#gantt").ejGantt({
enableTaskbarTooltip: true
});		 Property: tooltipSettings.showTooltip

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { showTooltip: true }
});
ganttObj.appendTo('#gantt');
To define tooltip for all cells Property: cellTooltipTemplate

$("#gantt").ejGantt({
cellTooltipTemplate: '#templateId'
});		 Not applicable
To define tooltip template for row drag action Property: dragTooltip

$("#gantt").ejGantt({
dragTooltip: { showTooltip: true }
});		 Not applicable
To enable taskbar editing tooltip Property: enableTaskbarDragTooltip

$("#gantt").ejGantt({
enableTaskbarDragTooltip: true
});		 Not Applicable
To enable/disable tooltip for grid cells Property: showGridCellTooltip

$("#gantt").ejGantt({
showGridCellTooltip: true
});		 Not applicable
To enable/disable tooltip for grid cells Property: showGridExpandCellTooltip

$("#gantt").ejGantt({
showGridExpandCellTooltip: true
});		 Not applicable
To define taskbar tooltip template in Gantt Property: taskbarTooltipTemplate

$("#gantt").ejGantt({
taskbarTooltipTemplate: 'template tooltip string'
});		 Property: tooltipSettings.taskbar

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { taskbar: 'template tooltip string' }
});
ganttObj.appendTo('#gantt');
To define taskbar tooltip template id in Gantt Property: taskbarTooltipTemplateId

$("#gantt").ejGantt({
taskbarTooltipTemplateId: '#templateId'
});		 Property: tooltipSettings.taskbar

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { taskbar: '#templateId' }
});
ganttObj.appendTo('#gantt');
To define tooltip template for connector line Property: predecessorTooltipTemplate

$("#gantt").ejGantt({
predecessorTooltipTemplate: '#predecessorTooltip'
});		 Property: tooltipSettings.connectorLine

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { connectorLine: '#predecessorTooltip' }
});
ganttObj.appendTo('#gantt');
To define template for progress resize tooltip Property: progressbarTooltipTemplate

$("#gantt").ejGantt({
progressbarTooltipTemplate: 'template tooltip string'
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { editing: 'template tooltip string' }
});
ganttObj.appendTo('#gantt');
To define template id for progress resize tooltip Property: progressbarTooltipTemplateId

$("#gantt").ejGantt({
progressbarTooltipTemplateId: '#progressResize'
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { editing: '#progressResize' }
});
ganttObj.appendTo('#gantt');
To define tooltip template for taskbar edit action Property: taskbarEditingTooltipTemplate

$("#gantt").ejGantt({
taskbarEditingTooltipTemplate: 'template tooltip string'
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { editing: 'template tooltip string' }
});
ganttObj.appendTo('#gantt');
To define tooltip template id for taskbar edit action Property: taskbarEditingTooltipTemplateId

$("#gantt").ejGantt({
taskbarEditingTooltipTemplateId: '#templateId'
});		 Property: tooltipSettings.editing

var ganttObj = new ej.gantt.Gantt({
  tooltipSettings: { editing: '#templateId' }
});
ganttObj.appendTo('#gantt');

Timeline

Behavior API in Essential JS 1 API in Essential JS 2
To configure timeline settings in Gantt Property: scheduleHeaderSettings

$("#gantt").ejGantt({
scheduleHeaderSettings:
{
weekHeaderFormat: 'MMM dd , yyyy',
dayHeaderFormat: "dd,MM,yy",
yearHeaderFormat: 'yyyy',
monthHeaderFormat: 'MMM',
hourHeaderFormat: 'HH',
scheduleHeaderType: 'week',
minutesPerInterval: 'auto',
weekendBackground: '#F2F2F2',
timescaleStartDateMode: 'auto',
timescaleUnitSize:'100%',
weekStartDay: 0,
updateTimescaleView: true
}
});		 Property: timelineSettings

var ganttObj = new ej.gantt.Gantt({
timelineSettings: {
 timelineViewMode: 'Week',
 timelineUnitSize: 33,
 weekStartDay: 0,
 showTooltip: true,
 weekendBackground: ' '
 updateTimescaleView: true,
 topTier: {
   unit: 'Week',
   format: 'MMM dd, y',
   count: 1,
   formatter: null
},
 bottomTier: {
   unit: 'Day',
   format: 'dd',
   count: 1,
   formatter: null
}
}
});
ganttObj.appendTo('#gantt');
To define weekend background in Gantt Property: weekendBackground

$("#gantt").ejGantt({
weekendBackground: '#FF5673'
});		 Not applicable
To Highlight weekends Property: highlightWeekends

$("#gantt").ejGantt({
  highlightWeekends: true
});		 Property: highlightWeekends

var ganttObj = new ej.gantt.Gantt({
  highlightWeekends : true
});
ganttObj.appendTo('#gantt');
To include weekends Property: includeWeekend

$("#gantt").ejGantt({
  includeWeekend : true
});		 Property: includeWeekend

var ganttObj = new ej.gantt.Gantt({
  includeWeekend : true
});
ganttObj.appendTo('#gantt');
To define project start date in Gantt Property: scheduleStartDate

$("#gantt").ejGantt({
scheduleStartDate: '3/20/2018'
});		 Property: projectStartDate

var ganttObj = new ej.gantt.Gantt({
  projectStartDate: '3/20/2018'
});
ganttObj.appendTo('#gantt');
To define project end date in Gantt Property: scheduleEndDate

$("#gantt").ejGantt({
scheduleEndDate: '3/20/2018'
});		 Property: projectEndDate

var ganttObj = new ej.gantt.Gantt({
  projectEndDate: '3/20/2018'
});
ganttObj.appendTo('#gantt');
Update project start date and end date Method: updateScheduleDates(startDate,endDate)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.updateScheduleDates("5/25/2017", "9/27/2017");
 Method: updateProjectDates(startDate, endDate, isTimelineRoundOff)

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.updateProjectDates("5/25/2017", "9/27/2017", true);

Rows

Behavior API in Essential JS 1 API in Essential JS 2
To enable/disable row drag and drop Property: allowDragAndDrop

$("#gantt").ejGantt({
allowDragAndDrop: true
});		 Property: allowRowDragAndDrop

var ganttObj = new ej.gantt.Gantt({
  allowRowDragAndDrop: true
});
ganttObj.appendTo('#gantt');
To enable/disable alternate row background Property: enableAltRow

$("#gantt").ejGantt({
enableAltRow: true
});		 Not applicable
To add Row height Property: rowHeight

$("#gantt").ejGantt({
  rowHeight: 60
});		 Property: rowHeight

var ganttObj = new ej.gantt.Gantt({
  rowHeight : 60
});
ganttObj.appendTo('#gantt');
To render parent in collapsed state Property: enableCollapseAll

$("#gantt").ejGantt({
enableCollapseAll: true
});		 Property: collapseAllParentTasks

var ganttObj = new ej.gantt.Gantt({
  collapseAllParentTasks: true
});
ganttObj.appendTo('#gantt');
Expand/collapse record by id Method: expandCollapseRecord(taskId)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.expandCollapseRecord(1);
 Method: collapseByID() expandByID()

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.expandByID(1);

ganttObj.collapseByID(1);
Expand all rows Method: expandAllItems()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.expandAllItems();
 Method: expandAll()

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.expandAll();
Collapse all rows Method: collapseAllItems()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.collapseAllItems();
 Method: collapseAll()

var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.collapseAll();
Triggers after row collapse action Event: collapsed

$("#gantt").ejGantt({
collapsed: function (args) {}
});		 Event: collapsed

var ganttObj= new ej.gantt.Gantt({
collapsed: function (args) {}
});
Triggers before row collapse action Event: collapsing

$("#gantt").ejGantt({
collapsing: function (args) {}
});		 Event: collapsing

var ganttObj= new ej.gantt.Gantt({
collapsing: function (args) {}
});
Triggers after Gantt row was expanded Event: expanded

$("#gantt").ejGantt({
expanded: function (args) {}
});		 Event: expanded

var ganttObj= new ej.gantt.Gantt({
expanded: function (args) {}
});
Triggers before Gantt row expand action Event: expanding

$("#gantt").ejGantt({
expanding: function (args) {}
});		 Event: expanding

var ganttObj= new ej.gantt.Gantt({
expanding: function (args) {}
});
Triggers before grid rows render action Event: rowDataBound

$("#gantt").ejGantt({
rowDataBound: function (args) {}
});		 Event: rowDataBound

var ganttObj= new ej.gantt.Gantt({
rowDataBound: function (args) {}
});
Triggers while dragging a row Event: rowDrag

$("#gantt").ejGantt({
rowDrag: function (args) {}
});		 Event: rowDrag

var ganttObj= new ej.gantt.Gantt({
rowDrag: function (args) {}
});
Triggers while while start to drag row Event: rowDragStart

$("#gantt").ejGantt({
rowDragStart: function (args) {}
});		 Event: rowDragStart

var ganttObj= new ej.gantt.Gantt({
rowDragStart: function (args) {}
});
Triggers while while drop a row Event: rowDragStop

$("#gantt").ejGantt({
rowDragStop: function (args) {}
});		 Event: rowDrop

var ganttObj= new ej.gantt.Gantt({
rowDrop: function (args) {}
});

Resources

Behavior API in Essential JS 1 API in Essential JS 2
To map resources Property: resources

$("#gantt").ejGantt({
  resources: projectResources,
});		 Property: resources

var ganttObj = new ej.gantt.Gantt({
  resources: projectResources
});
ganttObj.appendTo('#gantt');
To map resource id field from resource collection Property: resourceIdMapping

$("#gantt").ejGantt({
resourceIdMapping: 'resourceId'
});		 Property: resourceFields.id

var ganttObj = new ej.gantt.Gantt({
resourceFields: {
  id: 'ResourceID'
}
});
ganttObj.appendTo('#gantt');
To map resource name field from resource collection Property: resourceNameMapping

$("#gantt").ejGantt({
resourceNameMapping: 'resourceName'
});		 Property: resourceFields.name

var ganttObj = new ej.gantt.Gantt({
resourceFields: {
  name: 'ResourceName'
}
});
ganttObj.appendTo('#gantt');
To map resource unit field from assigned resource collection Property: resourceUnitMapping

$("#gantt").ejGantt({
resourceUnitMapping: 'resourceUnit'
});		 Property: resourceFields.unit

var ganttObj = new ej.gantt.Gantt({
resourceFields: {
  unit: 'ResourceUnit'
}
});
ganttObj.appendTo('#gantt');
To define resource view type of Gantt Property: viewType

$("#gantt").ejGantt({
viewType: ej.Gantt.ViewType.ResourceView
});		 Property: viewType

var ganttObj = new ej.gantt.Gantt({
  viewType: 'ResourceView'
});
ganttObj.appendTo('#gantt');
To define mapping property for resource collection in resource view Gantt Property: resourceCollectionMapping

$("#gantt").ejGantt({
resourceCollectionMapping: 'resources'
});		 Not Applicable
To map task collection from resources for resource view Gantt Property: taskCollectionMapping

$("#gantt").ejGantt({
taskCollectionMapping: 'tasks'
});		 Not applicable
To map group id for resource view Gantt Property: groupIdMapping

$("#gantt").ejGantt({
groupIdMapping : 'groupId'
});		 Not Applicable
To map group name for resource view Gantt Property: groupNameMapping

$("#gantt").ejGantt({
groupNameMapping : 'groupName'
});		 Not Applicable

Baseline

Behavior API in Essential JS 1 API in Essential JS 2
To render baseline Property: renderBaseline

$("#gantt").ejGantt({
  renderBaseline: true
});		 Property: renderBaseline

var ganttObj = new ej.gantt.Gantt({
  renderBaseline: true
});
ganttObj.appendTo('#gantt');
To define baselineColor Property: baselineColor

$("#gantt").ejGantt({
  baselineColor: "#fba41c"
});		 Property: baselineColor

var ganttObj = new ej.gantt.Gantt({
  baselineColor: 'red'
});
ganttObj.appendTo('#gantt');

Context Menu

Behavior API in Essential JS 1 API in Essential JS 2
To enable context menu Property: enableContextMenu

$("#gantt").ejGantt({
  enableContextMenu: true
});		 Property: enableContextMenu

var ganttObj = new ej.gantt.Gantt({
  enableContextMenu: true
});
ganttObj.appendTo('#gantt');
To define custom menu items Event: contextMenuOpen

$("#gantt").ejGantt({
contextMenuOpen: function(args) {
  args.contextMenuItems.push({
   headerText: "Expand/Collapse",
   menuId: "expand",
   iconPath: "url(Expand-02-WF.png)",
   eventHandler: function() {
     //event handler for custom menu items
   }
});
}
});		 Property: contextMenuItems

var ganttObj = new ej.gantt.Gantt({
contextMenuItems: [
 { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },
 { text: 'Expand the Row', target: '.e-content', id: 'expandrow' }
]
});
ganttObj.appendTo('#gantt');
Triggers before context menu opens Event: contextMenuOpen

$("#gantt").ejGantt({
contextMenuOpen: function (args) {}
});		 Event: contextMenuOpen

var ganttObj= new ej.gantt.Gantt({
contextMenuOpen: function (args) {}
});

Scheduling Tasks

Behavior API in Essential JS 1 API in Essential JS 2
To define task scheduling mode in Gantt Property: taskSchedulingMode

$("#gantt").ejGantt({
taskSchedulingMode: ej.Gantt.TaskSchedulingMode.Auto
});		 Property: taskMode

var ganttObj = new ej.gantt.Gantt({
  taskMode: Auto
});
ganttObj.appendTo('#gantt');
To map task scheduling mode from data source Property: taskSchedulingModeMapping

$("#gantt").ejGantt({
taskSchedulingModeMapping: 'taskMode'
});		 Property: taskFields.manual

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  manual: 'isManual'
}
});
ganttObj.appendTo('#gantt');
To enable schedule date validation while task predecessor draw action Property: validateManualTasksOnLinking

$("#gantt").ejGantt({
validateManualTasksOnLinking: true
});		 Property: validateManualTasksOnLinking

var ganttObj = new ej.gantt.Gantt({
  validateManualTasksOnLinking: true
});
ganttObj.appendTo('#gantt');
To define working time range of day Property: dayWorkingTime

$("#gantt").ejGantt({
dayWorkingTime: [{from:'09:00 AM', to: '06:00 PM' }]
});		 Property: dayWorkingTime

var ganttObj = new ej.gantt.Gantt({
  dayWorkingTime: [from: 9, to: 18]
});
ganttObj.appendTo('#gantt');
To enable rounding off date value in taskbar editing Property: roundOffDayworkingTime

$("#gantt").ejGantt({
roundOffDayworkingTime: true
});		 Not applicable
To define non-working background color Property: nonWorkingBackground

$("#gantt").ejGantt({
nonWorkingBackground : '#0000FF'
});		 Not Applicable
To highlight non working time range in Gantt Property: highlightNonWorkingTime

$("#gantt").ejGantt({
highlightNonWorkingTime : true
});		 Not Applicable
To set working days of a week Property: workweek

$("#gantt").ejGantt({
workweek:["Sunday","Monday","Tuesday","Wednesday","Thursday"]
});		 Property: workWeek

var ganttObj = new ej.gantt.Gantt({
  workWeek: ["Sunday","Monday","Tuesday","Wednesday","Thursday"]
});
ganttObj.appendTo('#gantt');
To enable/disable Unscheduled tasks Property: allowUnscheduledTask

$("#gantt").ejGantt({
  allowUnscheduledTask: true
});		 Property: allowUnscheduledTasks

var ganttObj = new ej.gantt.Gantt({
  allowUnscheduledTasks: true
});
ganttObj.appendTo('#gantt');

Appearance and Customizations

Behavior API in Essential JS 1 API in Essential JS 2
To define taskbar background type in Gantt Property: taskbarBackground

$("#gantt").ejGantt({
taskbarBackground: '#FF4453'
});		 Not applicable
To define background color for parent taskbar Property: parentTaskbarBackground

$("#gantt").ejGantt({
parentTaskbarBackground: '#565673'
});		 Not applicable
To add Taskbar height Property: taskbarHeight

$("#gantt").ejGantt({
  taskbarHeight: 30,
  rowHeight: 40
});		 Property: taskbarHeight

var ganttObj = new ej.gantt.Gantt({
  taskbarHeight:50,
  rowHeight : 60
});
ganttObj.appendTo('#gantt');
To define background color for parent progress bar Property: parentProgressbarBackground

$("#gantt").ejGantt({
parentProgressbarBackground: '#565673'
});		 Not applicable
To define background color fro progress bar Property: progressbarBackground

$("#gantt").ejGantt({
progressbarBackground : '#0000FF'
});		 Not Applicable
To define height for progress bar Property: progressbarHeight

$("#gantt").ejGantt({
progressbarHeight : 80
});		 Not Applicable
To render progress status taskbar Property: showProgressStatus

$("#gantt").ejGantt({
showProgressStatus: true
});		 Property: labelSettings.taskLabel

var ganttObj = new ej.gantt.Gantt({
 labelSettings: {
  taskLabel: '${progress}%'
}
});
ganttObj.appendTo('#gantt');
To set connectorline width Property: connectorlineWidth

$("#gantt").ejGantt({
  connectorlineWidth: 2
});		 Property: connectorLineWidth

var ganttObj = new ej.gantt.Gantt({
  connectorLineWidth: 2
});
ganttObj.appendTo('#gantt');
To set connectorline background Property: connectorLineBackground

$("#gantt").ejGantt({
  connectorLineBackground: "#0aecb8"
});		 Property: connectorLineBackground

var ganttObj = new ej.gantt.Gantt({
  connectorLineBackground:"red"
});
ganttObj.appendTo('#gantt');
To define weekend background in Gantt Property: weekendBackground

$("#gantt").ejGantt({
weekendBackground: '#FF5673'
});		 Not applicable
To define taskbar template Property: taskbarTemplate

$("#gantt").ejGantt({
  taskbarTemplate: "#taskbarTemplate",
});		 Property: taskbarTemplate

var ganttObj = new ej.gantt.Gantt({
  taskbarTemplate: '#TaskbarTemplate',
});
ganttObj.appendTo('#gantt');
To define parent taskbar template Property: parentTaskbarTemplate

$("#gantt").ejGantt({
  parentTaskbarTemplate: "#parentTaskbarTemplate",
});		 Property: parentTaskbarTemplate

var ganttObj = new ej.gantt.Gantt({
  parentTaskbarTemplate: '#ParentTaskbarTemplate',
});
ganttObj.appendTo('#gantt');
To define milestone template Property: milestoneTemplate

$("#gantt").ejGantt({
  milestoneTemplate: "#milestoneTemplate",
});		 Property: milestoneTemplate

var ganttObj = new ej.gantt.Gantt({
  milestoneTemplate: '#MilestoneTemplate',
});
ganttObj.appendTo('#gantt');
To define right task label Property: rightTaskLabelMapping

$("#gantt").ejGantt({
rightTaskLabelMapping: 'endDate'
});		 Property: labelSettings.rightLabel

var ganttObj = new ej.gantt.Gantt({
 labelSettings: {
  rightLabel: 'endDate'
}
});
ganttObj.appendTo('#gantt');
To define left task label Property: leftTaskLabelMapping

$("#gantt").ejGantt({
leftTaskLabelMapping: 'endDate'
});		 Property: labelSettings.leftLabel

var ganttObj = new ej.gantt.Gantt({
 labelSettings: {
  leftLabel: 'endDate'
}
});
ganttObj.appendTo('#gantt');
To define right task label template Property: rightTaskLabelTemplate

$("#gantt").ejGantt({
rightTaskLabelTemplate: "#rightLabelTemplate",
});		 Property: labelSettings.rightLabel

var ganttObj = new ej.gantt.Gantt({
 labelSettings: {
  rightLabel: '#rightLabel'
}
});
ganttObj.appendTo('#gantt');
To define left task label template Property: leftTaskLabelTemplate

$("#gantt").ejGantt({
leftTaskLabelTemplate: "#leftLabelTemplate",
});		 Property: labelSettings.leftLabel

var ganttObj = new ej.gantt.Gantt({
 labelSettings: {
  leftLabel: '#leftLabel'
}
});
ganttObj.appendTo('#gantt');
To render resource names right to taskbar Property: showResourceNames

$("#gantt").ejGantt({
showResourceNames: true
});		 Property: labelSettings.rightLabel

var ganttObj = new ej.gantt.Gantt({
 labelSettings: {
  rightLabel: 'resourceInfo'
}
});
ganttObj.appendTo('#gantt');
To render task name left to taskbar Property: showTaskNames

$("#gantt").ejGantt({
showTaskNames: true
});		 Property: labelSettings.leftLabel

var ganttObj = new ej.gantt.Gantt({
 labelSettings: {
  leftLabel: 'taskName'
}
});
ganttObj.appendTo('#gantt');
Triggers on taskbar rendering action Event: queryTaskbarInfo

$("#gantt").ejGantt({
queryTaskbarInfo: function (args) {}
});		 Event: queryTaskbarInfo

var ganttObj= new ej.gantt.Gantt({
queryTaskbarInfo: function (args) {}
});
Triggers on grid cell rendering action Event: queryCellInfo

$("#gantt").ejGantt({
queryCellInfo: function (args) {}
});		 Event: queryCellInfo

var ganttObj= new ej.gantt.Gantt({
queryCellInfo: function (args) {}
});

Stripline

Behavior API in Essential JS 1 API in Essential JS 2
To define striplines Property: stripLines

$("#gantt").ejGantt({
stripLines: [{
  day: "01/02/2014",
  label: "Project Release",
  lineStyle: "dotted",
  lineColor: "blue",
  lineWidth: 2
}]
});		 Property: eventMarkers

var ganttObj = new ej.gantt.Gantt({
eventMarkers:[{
  day: '04/10/2019',
  cssClass: 'e-custom-event-marker',
  label: 'Project approval and kick-off'
}]
});
ganttObj.appendTo('#gantt');

Holidays

Behavior API in Essential JS 1 API in Essential JS 2
To define holidays Property: holidays

$("#gantt").ejGantt({
  holidays: [{
  day: "2/03/2014",
  label: " Public holiday",
  background: "yellow"
}]
});		 Property: holidays

var ganttObj = new ej.gantt.Gantt({
  holidays: [{
  from: "04/04/2019",
  to:"04/05/2019",
  label: " Public holidays",
  cssClass:"e-custom-holiday"
}]
});
ganttObj.appendTo('#gantt');
To define days in holiday collection Property: holidays.day

$("#gantt").ejGantt({
holidays: [ {day: '3/20/2018'}]
});		 Property: holidays.from

var ganttObj = new ej.gantt.Gantt({
  holidays: [{from: '3/20/2018'}]
});
ganttObj.appendTo('#gantt');

Others

Behavior API in Essential JS 1 API in Essential JS 2
To define height for Gantt Property: sizeSettings.height

$("#gantt").ejGantt({
sizeSettings: {height: '450px'}
});		 Property: height

var ganttObj = new ej.gantt.Gantt({
  height: '450px'
});
ganttObj.appendTo('#gantt');
To define width for Gantt Property: sizeSettings.width

$("#gantt").ejGantt({
sizeSettings: {width: '750px'}
});		 Property: width

var ganttObj = new ej.gantt.Gantt({
  width: '750px'
});
ganttObj.appendTo('#gantt');
To change splitter position Property: splitterPosition

$("#gantt").ejGantt({
splitterPosition : "50%"
});		 Not applicable
To change splitter by position Property: splitterSettings.position

$("#gantt").ejGantt({
splitterSettings: {
  position: "50%"
},
});		 Property: splitterSettings.position

var ganttObj = new ej.gantt.Gantt({
  splitterSettings: {
  position: "50%"
}
});
ganttObj.appendTo('#gantt');
To change splitter by index Property: splitterSettings.index

$("#gantt").ejGantt({
splitterSettings: {
  index: 3
},
});		 Property: splitterSettings.columnIndex

var ganttObj = new ej.gantt.Gantt({
  splitterSettings: {
  columnIndex: 3
}
});
ganttObj.appendTo('#gantt');
To define view type of Gantt Property: viewType

$("#gantt").ejGantt({
viewType: ej.Gantt.ViewType.ProjectView
});		 Property: viewType

var ganttObj = new ej.gantt.Gantt({
  viewType: 'ProjectView'
});
ganttObj.appendTo('#gantt');
To enable Localization Property: locale

$("#gantt").ejGantt({
  locale: "fr-FR"
});		 Property: locale

var ganttObj = new ej.gantt.Gantt({
  locale: "fr-FR"
});
ganttObj.appendTo('#gantt');
To specify the date format for Gantt Property: dateFormat

$("#gantt").ejGantt({
  dateFormat: "dd/MM/yyyy"
});		 Property: dateFormat

var ganttObj = new ej.gantt.Gantt({
  dateFormat: 'dd/MM/yyyy'
});
ganttObj.appendTo('#gantt');
To enable/disable key navigation Property: allowKeyboardNavigation

$("#gantt").ejGantt({
allowKeyboardNavigation: true
});		 Property: allowKeyboard

var ganttObj = new ej.gantt.Gantt({
  allowKeyboard: true
});
ganttObj.appendTo('#gantt');
To enable serial number support Property: enableSerialNumber

$("#gantt").ejGantt({
enableSerialNumber: true
});		 Not applicable
To enable/disable predecessor validation Property: enablePredecessorValidation

$("#gantt").ejGantt({
  enablePredecessorValidation: true
});		 Property: enablePredecessorValidation

var ganttObj = new ej.gantt.Gantt({
  enablePredecessorValidation: true
});
ganttObj.appendTo('#gantt');
To set timescale for working hours Property: workingTimeScale

$("#gantt").ejGantt({
  workingTimeScale: ej.Gantt.workingTimeScale.TimeScale24Hours
});		 Property: dayWorkingTime

var ganttObj = new ej.gantt.Gantt({
  dayWorkingTime: [from: 0, to: 24]
});
ganttObj.appendTo('#gantt');
To enable work break down structure in Gantt Property: enableWBS

$("#gantt").ejGantt({
enableWBS : true
});		 Not Applicable
To enable work break down structure predecessor in Gantt Property: enableWBSPredecessor

$("#gantt").ejGantt({
enableWBSPredecessor : true
});		 Not Applicable
To map work value from data source Property: workMapping

$("#gantt").ejGantt({
workMapping: 'estimatedHours'
});		 Property: taskFields.work

var ganttObj = new ej.gantt.Gantt({
taskFields: {
  work: 'estimatedHours'
}
});
ganttObj.appendTo('#gantt');
To define work unit for tasks Property: workUnit

$("#gantt").ejGantt({
workUnit: ej.Gantt.WorkUnit.Hour
});		 Property: workUnit

var ganttObj = new ej.gantt.Gantt({
  workUnit: 'Hour'
});
ganttObj.appendTo('#gantt');
To define task type in Gantt Property: taskType

$("#gantt").ejGantt({
taskType: ej.Gantt.TaskType.FixedUnit
});		 Property: taskType

var ganttObj = new ej.gantt.Gantt({
  taskType: 'FixedUnit'
});
ganttObj.appendTo('#gantt');
To enable/disable multiple exporting option Property: allowMultipleExporting

$("#gantt").ejGantt({
allowMultipleExporting: true
});		 Not applicable
To enable virtual rendering in Gantt Property: enableVirtualization

$("#gantt").ejGantt({
enableVirtualization : true
});		 Not Applicable
Change splitter position dynamically Method: setSplitterIndex(index) setSplitterPosition(width)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.setSplitterIndex(3);

ganttObj.ejGantt("setSplitterPosition","40%");
 Method: setSplitterPosition(value,type)

var ganttObj = document.getElementById('gantt').ej2_instances[0]
ganttObj.setSplitterPosition('40%', 'position');

ganttObj.setSplitterPosition(3, 'columnIndex');
To destroy Gantt Method: destroy()

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.destroy();
 Method: destroy()

var ganttObj = document.getElementById('gantt').ej2_instances[0]
ganttObj.destroy();
To update task id Method: updateTaskId(currentId, newId)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.updateTaskId(5, 7);
 Not applicable
To set scroll top for Gantt Method: setScrollTop(top)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.setScrollTop(50);
 Method: setScrollTop()

var ganttObj = document.getElementById('gantt').ej2_instances[0]
ganttObj.setScrollTop(200);
To get columns to edit in resource view Method: getResourceViewEditColumns()

var ganttObj = $("#gantt").data("ejGantt");
columns = ganttObj.getResourceViewEditColumns()
 Not applicable
Show/hide critical path in Gantt Method: showCriticalPath(isShown)

var ganttObj = $("#gantt").data("ejGantt");
ganttObj.showCriticalPath(true);
 Not applicable
Triggers on initialization of Gantt control Event: load

$("#gantt").ejGantt({
load: function (args) {}
});		 Event: load

var ganttObj= new ej.gantt.Gantt({
load: function (args) {}
});
Triggers after splitter resize action Event: splitterResized

$("#gantt").ejGantt({
splitterResized: function (args) {}
});		 Event: splitterResized

var ganttObj= new ej.gantt.Gantt({
splitterResized: function (args) {}
});
Triggers when taskbar item is clicked Event: taskbarClick

$("#gantt").ejGantt({
taskbarClick: function (args) {}
});		 Event: onTaskbarClick

var ganttObj= new ej.gantt.Gantt({
onTaskbarClick: function (args) {}
});

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Add task in Gantt Method: addRecord(data, rowPosition)
var ganttObj = $("#gantt").data("ejGantt");
var data = {
taskId:"40",
taskName:"New Task 40",
startDate:"2/20/2014",
endDate:"2/25/2014"};
ganttObj.addRecord(data, ej.Gantt.AddRowPosition.Child);
 Method: addRecord(data, rowPosition, rowIndex)
var ganttObj = document.getElementById('gantt').ej2_instances[0];
var data = {
taskId:"40",
taskName:"New Task 40",
startDate:"2/20/2014",
endDate:"2/25/2014"};
ganttObj.addRecord(data, 'Below', 10);
Clear filtered columns Method: clearFilter()
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.clearFilter();
 Method: clearFiltering()
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.clearFiltering();
Delete selected item Method: deleteItem()
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.deleteItem();
 Method: deleteRecord()
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.editModule.deleteRecord();
Expand/collapse record by id Method: expandCollapseRecord(taskId)
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.expandCollapseRecord(1);
 Method: collapseByID()
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.expandByID(1);
ganttObj.collapseByID(1);
Filter records in Gantt Method: filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase])
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.filterColumn("taskName", "startswith", "plan");
 Method: filterByColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase],[ignoreAccent])
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.filterByColumn('taskName', 'startswith', 'plan');
Search records in Gantt Method: searchItem(key)
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.searchItem("plan");
 Method: search(key)
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.search('plan');
Select multiple rows in Gantt Method: selectMultipleRows(rowIndexes)
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.selectMultipleRows([1,2,3]);
 Method: selectRows(key)
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.selectionModule.selectRows([1,2,3]);
Show/hide critical path in Gantt Method: showCriticalPath(isShown)
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.showCriticalPath(true);
 Not applicable
Sort records in Gantt Method: sortColumn(mappingName, columnSortDirection)
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.sortColumn("startDate","ascending");
 Method: sortColumn(columnName, direction,[isMultiSort])
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.sortColumn('startDate','ascending');
Update task details by id Method: updateRecordByTaskId(data)
var ganttObj = $("#gantt").data("ejGantt");
var data = { taskID: 4, taskName: "updated value"};
ganttObj.updateRecordByTaskId(data);
 Method: updateRecordByID
var ganttObj = document.getElementById('gantt').ej2_instances[0];
var data = { taskID: 4, taskName: "updated value"};
ganttObj.updateRecordByID(data);
Update project start date and end date Method: updateScheduleDates(startDate,endDate)
var ganttObj = $("#gantt").data("ejGantt");
ganttObj.updateScheduleDates("5/25/2017", "9/27/2017");
 Method: updateProjectDates(startDate, endDate, isTimelineRoundOff)
var ganttObj = document.getElementById('gantt').ej2_instances[0];
ganttObj.updateProjectDates("5/25/2017", "9/27/2017", true);

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggers for every Gantt action before it get started Event: actionBegin
$("#gantt"), {
actionBegin: function (args){}
});		 Event: actionBegin
let gantt: Gantt = new Gantt({
actionBegin: function (args){}
});
Triggers for after every Gantt action completed Event: actionComplete
$("#gantt"), {
actionComplete: function (args){}
});		 Event: actionComplete
let gantt: Gantt = new Gantt({
actionComplete: function (args){}
});
Triggers after cell selection action Event: cellSelected
$("#gantt"), {
cellSelected: function (args){
});		 Event: cellSelected
let gantt: Gantt = new Gantt({
cellSelected: function (args){}
});
Triggers on cell selection action Event: cellSelecting
$("#gantt"), {
cellSelecting: function (args){}
});		 Event: cellSelecting
let gantt: Gantt = new Gantt({
cellSelecting: function (args){}
});
Triggers after row collapse action Event: collapsed
$("#gantt"), {
collapsed: function (args){}
});		 Event: collapsed
let gantt: Gantt = new Gantt({
collapsed: function (args){}
});
Triggers before row collapse action Event: collapsing
$("#gantt"), {
collapsing: function (args){}
});		 Event: collapsing
let gantt: Gantt = new Gantt({
collapsing: function (args){}
});
Triggers after Gantt rendered Event: create
$("#gantt"), {
create: function (args){}
});		 Event: create
let gantt: Gantt = new Gantt({
create: function (args){}
});
Triggers after Gantt row was expanded Event: expanded
$("#gantt"), {
expanded: function (args){}
});		 Event: expanded
let gantt: Gantt = new Gantt({
expanded: function (args){}
});
Triggers before Gantt row expand action Event: expanding
$("#gantt"), {
expanding: function (args){}
});		 Event: expanding
let gantt: Gantt = new Gantt({
expanding: function (args){}
});
Triggers on initialization of Gantt control Event: load
$("#gantt"), {
load: function (args){}
});		 Event: load
let gantt: Gantt = new Gantt({
load: function (args){}
});
Triggers on grid cell rendering action Event: queryCellInfo
$("#gantt"), {
queryCellInfo: function (args){}
});		 Event: queryCellInfo
let gantt: Gantt = new Gantt({
queryCellInfo: function (args){}
});
Triggers on taskbar rendering action Event: queryTaskbarInfo
$("#gantt"), {
queryTaskbarInfo: function (args){}
});		 Event: queryTaskbarInfo
let gantt: Gantt = new Gantt({
queryTaskbarInfo: function (args){}
});
Triggers before grid rows render action Event: rowDataBound
$("#gantt"), {
rowDataBound: function (args){}
});		 Event: rowDataBound
let gantt: Gantt = new Gantt({
rowDataBound: function (args){}
});
Triggers after row selection action Event: rowSelected
$("#gantt"), {
rowSelected: function (args){}
});		 Event: rowSelected
let gantt: Gantt = new Gantt({
rowSelected: function (args){}
});
Triggers before row selection action Event: rowSelecting
$("#gantt"), {
rowSelecting: function (args){}
});		 Event: rowSelecting
let gantt: Gantt = new Gantt({
rowSelecting: function (args){}
});
Triggers after splitter resize action Event: splitterResized
$("#gantt"), {
splitterResized: function (args){}
});		 Event: splitterResized
let gantt: Gantt = new Gantt({
splitterResized: function (args){}
});
Triggers after taskbar resize, drag action Event: taskbarEdited
$("#gantt"), {
taskbarEdited: function (args){}
});		 Event: taskbarEdited
let gantt: Gantt = new Gantt({
taskbarEdited: function (args){}
});
Triggers while resizing, dragging the taskbar Event: taskbarEditing
$("#gantt"), {
taskbarEditing: function (args){}
});		 Event: taskbarEditing
let gantt: Gantt = new Gantt({
taskbarEditing: function (args){}
});
Triggers when toolbar items clicked Event: toolbarClick
$("#gantt"), {
toolbarClick: function (args){}
});		 Event: toolbarClick
let gantt:Gantt= new Gantt({
toolbarClick: function (args){}
});
Previous
Next