Ej1 api migration in JavaScript Gantt control

18 Nov 201824 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: [<br/>{day: “02/06/2017”,<br/>label: “Project Start”,<br/>lineStyle: “dotted”,<br/>lineColor: “Darkblue”,<br/>lineWidth: 2 }]<br/> <br>}); | **Property:** *eventMarkers* <br/><br/>var ganttObj = new ej.gantt.Gantt({<br>eventMarkers: [
{day: new Date('04/09/2019'),
label: 'Research phase'
cssClass: 'e-custom-stripline'}
]<br>});<br>ganttObj.appendTo(‘#gantt’);| | To map task collection from resources for resource view Gantt| **Property:** *taskCollectionMapping* <br/><br/> $(“#gantt”).ejGantt(<br>{<br>taskCollectionMapping: ‘tasks’ <br>}); | Not applicable| | To map id of task from data source | **Property:** *taskIdMapping* <br/><br/> $(“#gantt”).ejGantt(<br>{<br>taskIdMapping: ‘taskId’ <br>}); | **Property:** *taskFields.id* <br/><br/>var ganttObj = new ej.gantt.Gantt({<br>taskFields: {<br/>id: ‘taskId’<br/>}<br>});<br>ganttObj.appendTo(‘#gantt’);| | To map name of task from data source | **Property:** *taskNameMapping* <br/><br/> $(“#gantt”).ejGantt(<br>{<br>taskNameMapping: ‘taskName’ <br>}); | **Property:** *taskFields.name* <br/><br/>var ganttObj = new ej.gantt.Gantt({<br>taskFields: {<br/>name: ‘taskName’<br/>}<br>});<br>ganttObj.appendTo(‘#gantt’);| | To define task scheduling mode in Gantt | **Property:** *taskSchedulingMode* <br/><br/> $(“#gantt”).ejGantt(<br>{<br>taskSchedulingMode: ej.Gantt.TaskSchedulingMode.Auto <br>}); | Not applicable| | To map task scheduling mode from data source | **Property:** *taskSchedulingModeMapping* <br/><br/> $(“#gantt”).ejGantt(<br>{<br>taskSchedulingModeMapping: ‘taskMode’ <br>}); | Not applicable| | To define task type in Gantt | **Property:** *taskType* <br/><br/> $(“#gantt”).ejGantt(<br>{<br>taskType: ej.Gantt.TaskType.FixedUnit <br>}); | Not applicable| | To define taskbar background type in Gantt | **Property:** *taskbarBackground* <br/><br/> $(“#gantt”).ejGantt(<br>{<br>taskbarBackground: ‘#FF4453’ <br>}); | Not applicable| | To define tooltip template for taskbar edit action | **Property:** *taskbarEditingTooltipTemplate* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>taskbarEditingTooltipTemplate: ‘’ <br>}); | **Property:** *tooltipSettings.editing* <br/><br/> var ganttObj = new ej.gantt.Gantt({<br>tooltipSettings: { editing: ‘’ }<br>});<br>ganttObj.appendTo(‘#gantt’); | | To define tooltip template id for taskbar edit action | **Property:** *taskbarEditingTooltipTemplateId* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>taskbarEditingTooltipTemplateId: ‘#templateId’ <br>}); | **Property:** *tooltipSettings.editing* <br/><br/> var ganttObj = new ej.gantt.Gantt({<br>tooltipSettings: { editing: ‘#templateId’ }<br>});<br>ganttObj.appendTo(‘#gantt’); | | To define taskbar tooltip template string in Gantt| **Property:** *taskbarTooltipTemplate* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>taskbarTooltipTemplate: ‘’ <br>}); | **Property:** *tooltipSettings.taskbar* <br/><br/> var ganttObj = new ej.gantt.Gantt({<br>tooltipSettings: { taskbar: ‘’ }<br>});<br>ganttObj.appendTo(‘#gantt’); | | To define taskbar tooltip template id in Gantt| **Property:** *taskbarTooltipTemplateId* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>taskbarTooltipTemplateId: ‘#templateId’ <br>}); | **Property:** *tooltipSettings.taskbar* <br/><br/> var ganttObj = new ej.gantt.Gantt({<br>tooltipSettings: { taskbar: ‘#templateId’ }<br>});<br>ganttObj.appendTo(‘#gantt’); | | To configure toolbar of Gantt| **Property:** *toolbarSettings* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>toolbarSettings: { showToolbar: true, toolbarItems: [ej.Gantt.ToolbarItems.Add] } <br>}); | **Property:** *toolbar* <br/><br/> var ganttObj = new ej.gantt.Gantt({<br>toolbar: [‘Add’]<br>});<br>ganttObj.appendTo(‘#gantt’); | | To enable predecessor validation task predecessor draw action | **Property:** *validateManualTasksOnLinking* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>validateManualTasksOnLinking: true <br>}); | Not applicable| | To define view type of Gantt | **Property:** *viewType* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>viewType: ej.Gantt.ViewType.ProjectView <br>}); | **Property:** *viewType* <br/><br/>var ganttObj = new ej.gantt.Gantt({<br>&nbsp;&nbsp;viewType: ‘ProjectView’<br>});<br>ganttObj.appendTo(‘#gantt’);| | To define weekend background in Gantt| **Property:** *weekendBackground* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>weekendBackground: ‘#FF5673’ <br>}); | Not applicable| | To define view type of Gantt | **Property:** *viewType* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>viewType: ej.Gantt.ViewType.ProjectView <br>}); |**Property:** *viewType* <br/><br/>var ganttObj = new ej.gantt.Gantt({<br>&nbsp;&nbsp;viewType: ‘ProjectView’<br>});<br>ganttObj.appendTo(‘#gantt’);| | To map work value from data source | **Property:** *workMapping* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>workMapping: ‘estimatedHours’ <br>}); | Not applicable| | To define work unit for tasks | **Property:** *workUnit* <br/> <br/> $(“#gantt”).ejGantt(<br>{<br>workUnit: ej.Gantt.WorkUnit.Hour <br>});` | 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: [ <br> &nbsp;&nbsp; {field: “taskName”, direction: ej.sortOrder.Descending }<br>]
}); 		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: [<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Add,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Edit,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Delete,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Update,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Cancel,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.ExpandAll,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.CollapseAll,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Search,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.PrevTimeSpan,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.NextTimeSpan<br>],
}
}); 		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: [<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Indent,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.Outdent,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.CriticalPath,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.ExcelExport,<br>&nbsp;&nbsp;ej.Gantt.ToolbarItems.PdfExport<br>],
}
}); 		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: [ <br>&nbsp;{ text: ‘Collapse the Row’, target: ‘.e-content’, id: ‘collapserow’ },<br>&nbsp;{ text: ‘Expand the Row’, target: ‘.e-content’, id: ‘expandrow’ }<br>]
});
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){}
});