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

Migration from Essential JS 1 in JavaScript Gantt control

08 May 2023 / 29 minutes to read

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

Data Binding and Task mapping

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  dataSource: taskDetails,
});		 Property: dataSource

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskIdMapping: 'taskId'
});		 Property: taskFields.id

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskNameMapping: 'taskName'
});		 Property: taskFields.name

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

var ganttObj = new ej.Gantt($("#Gantt"), {
startDateMapping: 'startDate'
});		 Property: taskFields.startDate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
endDateMapping: 'endDate'
});		 Property: taskFields.endDate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
durationMapping : 'duration'
});		 Property: taskFields.duration

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

var ganttObj = new ej.Gantt($("#Gantt"), {
durationUnitMapping : 'durationUnit'
});		 Property: taskFields.durationUnit

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

var ganttObj = new ej.Gantt($("#Gantt"), {
predecessorMapping: 'predecessor'
});		 Property: taskFields.dependency

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

var ganttObj = new ej.Gantt($("#Gantt"), {
progressMapping: 'progress'
});		 Property: taskFields.progress

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

var ganttObj = new ej.Gantt($("#Gantt"), {
childMapping : 'subTasks'
});		 Property: taskFields.child

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

var ganttObj = new ej.Gantt($("#Gantt"), {
baselineStartDateMapping: 'baselineStartDate'
});		 Property: taskFields.baselineStartDate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
baselineEndDateMapping: 'baselineEndDate'
});		 Property: taskFields.baselineEndDate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
milestoneMapping: 'isMilestone'
});		 Property: taskFields.milestone

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

var ganttObj = new ej.Gantt($("#Gantt"), {
notesMapping: 'notes'
});		 Property: taskFields.notes

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

var ganttObj = new ej.Gantt($("#Gantt"), {
parentTaskIdMapping: 'parentId'
});		 Property: taskFields.parentID

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

var ganttObj = new ej.Gantt($("#Gantt"), {
resourceInfoMapping: 'assignedResource'
});		 Property: taskFields.resourceInfo

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

var ganttObj = new ej.Gantt($("#Gantt"), {
expandStateMapping: 'isExpanded'
});		 Property: taskFields.expandState

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

Sorting

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

var ganttObj = new ej.Gantt($("#Gantt"), {
allowSorting: true
});		 Property: allowSorting

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

var ganttObj = new ej.Gantt($("#Gantt"), {
allowMultiSorting: true
});		 Property: allowSorting

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

var ganttObj = new ej.Gantt($("#Gantt"), {
allowSorting: true,
sortedColumns: [
   {field: "taskName", direction: ej.sortOrder.Descending }
]
});		 Property: sortSettings.columns

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
filteredColumns: [{
   value: "plan",
  field: "taskName",
  predicate: "and",
  operator: "startswith"
}]
});		 Property: filterSettings.columns

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
  toolbarSettings: {
  showToolbar: true,
  toolbarItems : [ej.Gantt.ToolbarItems.Search]
}
});		 Property: toolbar

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
  allowSelection: true
});		 Property: allowSelection

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

var ganttObj = new ej.Gantt($("#Gantt"), {
selectionType: ej.Gantt.SelectionType.Single
});		 Property: selectionSettings.type

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

var ganttObj = new ej.Gantt($("#Gantt"), {
selectionMode: ej.Gantt.SelectionMode.Row
});		 Property: selectionSettings.mode

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  selectedRowIndex : 2
});		 Property: selectedRowIndex

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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

var ganttObj = new ej.Gantt($("#Gantt"), {
cellSelected: function (args) {}
});		 Event: cellSelected

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

var ganttObj = new ej.Gantt($("#Gantt"), {
cellSelecting: function (args) {}
});		 Event: cellSelecting

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rowSelected: function (args) {}
});		 Event: rowSelected

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rowSelecting: function (args) {}
});		 Event: rowSelecting

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

Editing

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  editSettings : {
  allowEditing: true,
  allowAdding: true,
  allowDeleting: true,
  showDeleteConfirmDialog: true}
});		 Property: editSettings

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

var ganttObj = new ej.Gantt($("#Gantt"), {
editSettings: {
editMode: "cellEditing"
}
});		 Property: editSettings.mode

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

var ganttObj = new ej.Gantt($("#Gantt"), {
editSettings: {
editMode: "normal"
}
});		 Property: editSettings.mode

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

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

var ganttObj = new ej.Gantt($("#Gantt"), {
enableProgressBarResizing: true
});		 Property: editSettings.allowTaskbarEditing

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

var ganttObj = new ej.Gantt($("#Gantt"), {
editSettings: {
allowIndent: true
}
});		 Not applicable
To define click or double click action to begin edit action Property: editSettings.beginEditAction

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

var ganttObj = new ej.Gantt($("#Gantt"), {
editSettings: {
rowPosition: ej.Gantt.RowPosition.AboveSelectedRow
}
});		 Property: editSettings.newRowPosition

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

var ganttObj = new ej.Gantt($("#Gantt"), {
editDialogFields: [{ field: 'taskName', editType: 'stringedit' }]
});		 Property: editDialogFields

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

var ganttObj = new ej.Gantt($("#Gantt"), {
addDialogFields: [{ field: 'taskName', editType: 'stringedit' }]
});		 Property: addDialogFields

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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

var ganttObj = new ej.Gantt($("#Gantt"), {
actionBegin: function (args) {}
});		 Event: actionBegin

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

var ganttObj = new ej.Gantt($("#Gantt"), {
actionComplete: function (args) {}
});		 Event: actionComplete

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarEditing: function (args) {}
});		 Event: taskbarEditing

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarEdited: function (args) {}
});		 Event: taskbarEdited

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

Columns

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

var ganttObj = new ej.Gantt($("#Gantt"), {
allowColumnResize: true
});		 Property: allowResizing

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

var ganttObj = new ej.Gantt($("#Gantt"), {
showColumnChooser: true
});		 Property: showColumnMenu

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

var ganttObj = new ej.Gantt($("#Gantt"), {
showColumnOptions: true
});		 Not applicable
Tree column index Property: treeColumnIndex

var ganttObj = new ej.Gantt($("#Gantt"), {
treeColumnIndex: 2,
});		 Property: treeColumnIndex

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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

var ganttObj = new ej.Gantt($("#Gantt"), {
toolbarSettings: {
  showToolbar: true
  customToolbarItems: [{ text: "ShowBaseline", tooltipText: "Show Baseline" }, { text: "Reset",tooltipText:"Reset" }]
},
});		 Property: toolbar

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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

var ganttObj = new ej.Gantt($("#Gantt"), {
enableTaskbarTooltip: true
});		 Property: tooltipSettings.showTooltip

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

var ganttObj = new ej.Gantt($("#Gantt"), {
cellTooltipTemplate: '#templateId'
});		 Not applicable
To define tooltip template for row drag action Property: dragTooltip

var ganttObj = new ej.Gantt($("#Gantt"), {
dragTooltip: { showTooltip: true }
});		 Not applicable
To enable taskbar editing tooltip Property: enableTaskbarDragTooltip

var ganttObj = new ej.Gantt($("#Gantt"), {
enableTaskbarDragTooltip: true
});		 Not Applicable
To enable/disable tooltip for grid cells Property: showGridCellTooltip

var ganttObj = new ej.Gantt($("#Gantt"), {
showGridCellTooltip: true
});		 Not applicable
To enable/disable tooltip for grid cells Property: showGridExpandCellTooltip

var ganttObj = new ej.Gantt($("#Gantt"), {
showGridExpandCellTooltip: true
});		 Not applicable
To define taskbar tooltip template in Gantt Property: taskbarTooltipTemplate

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarTooltipTemplate: 'template tooltip string'
});		 Property: tooltipSettings.taskbar

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarTooltipTemplateId: '#templateId'
});		 Property: tooltipSettings.taskbar

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

var ganttObj = new ej.Gantt($("#Gantt"), {
predecessorTooltipTemplate: '#predecessorTooltip'
});		 Property: tooltipSettings.connectorLine

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

var ganttObj = new ej.Gantt($("#Gantt"), {
progressbarTooltipTemplate: 'template tooltip string'
});		 Property: tooltipSettings.editing

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

var ganttObj = new ej.Gantt($("#Gantt"), {
progressbarTooltipTemplateId: '#progressResize'
});		 Property: tooltipSettings.editing

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarEditingTooltipTemplate: 'template tooltip string'
});		 Property: tooltipSettings.editing

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarEditingTooltipTemplateId: '#templateId'
});		 Property: tooltipSettings.editing

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
weekendBackground: '#FF5673'
});		 Not applicable
To Highlight weekends Property: highlightWeekends

var ganttObj = new ej.Gantt($("#Gantt"), {
  highlightWeekends: true
});		 Property: highlightWeekends

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  includeWeekend : true
});		 Property: includeWeekend

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

var ganttObj = new ej.Gantt($("#Gantt"), {
scheduleStartDate: '3/20/2018'
});		 Property: projectStartDate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
scheduleEndDate: '3/20/2018'
});		 Property: projectEndDate

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
allowDragAndDrop: true
});		 Property: allowRowDragAndDrop

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

var ganttObj = new ej.Gantt($("#Gantt"), {
enableAltRow: true
});		 Not applicable
To add Row height Property: rowHeight

var ganttObj = new ej.Gantt($("#Gantt"), {
  rowHeight: 60
});		 Property: rowHeight

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

var ganttObj = new ej.Gantt($("#Gantt"), {
enableCollapseAll: true
});		 Property: collapseAllParentTasks

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
collapsed: function (args) {}
});		 Event: collapsed

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

var ganttObj = new ej.Gantt($("#Gantt"), {
collapsing: function (args) {}
});		 Event: collapsing

let gantt: Gantt = new Gantt({
collapsing: function (args) {}
});
Triggers after Gantt row was expanded Event: expanded

var ganttObj = new ej.Gantt($("#Gantt"), {
expanded: function (args) {}
});		 Event: expanded

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

var ganttObj = new ej.Gantt($("#Gantt"), {
expanding: function (args) {}
});		 Event: expanding

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rowDataBound: function (args) {}
});		 Event: rowDataBound

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rowDrag: function (args) {}
});		 Event: rowDrag

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rowDragStart: function (args) {}
});		 Event: rowDragStart

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rowDragStop: function (args) {}
});		 Event: rowDrop

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

Resources

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  resources: projectResources,
});		 Property: resources

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

var ganttObj = new ej.Gantt($("#Gantt"), {
resourceIdMapping: 'resourceId'
});		 Property: resourceFields.id

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

var ganttObj = new ej.Gantt($("#Gantt"), {
resourceNameMapping: 'resourceName'
});		 Property: resourceFields.name

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

var ganttObj = new ej.Gantt($("#Gantt"), {
resourceUnitMapping: 'resourceUnit'
});		 Property: resourceFields.unit

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

var ganttObj = new ej.Gantt($("#Gantt"), {
viewType: ej.Gantt.ViewType.ResourceView
});		 Property: viewType

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

var ganttObj = new ej.Gantt($("#Gantt"), {
resourceCollectionMapping: 'resources'
});		 Not Applicable
To map task collection from resources for resource view Gantt Property: taskCollectionMapping

var ganttObj = new ej.Gantt($("#Gantt"), {
taskCollectionMapping: 'tasks'
});		 Not applicable
To map group id for resource view Gantt Property: groupIdMapping

var ganttObj = new ej.Gantt($("#Gantt"), {
groupIdMapping : 'groupId'
});		 Not Applicable
To map group name for resource view Gantt Property: groupNameMapping

var ganttObj = new ej.Gantt($("#Gantt"), {
groupNameMapping : 'groupName'
});		 Not Applicable

Baseline

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  renderBaseline: true
});		 Property: renderBaseline

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  baselineColor: "#fba41c"
});		 Property: baselineColor

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
  enableContextMenu: true
});		 Property: enableContextMenu

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

var ganttObj = new ej.Gantt($("#Gantt"), {
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

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
contextMenuOpen: function (args) {}
});		 Event: contextMenuOpen

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskSchedulingMode: ej.Gantt.TaskSchedulingMode.Auto
});		 Property: taskMode

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskSchedulingModeMapping: 'taskMode'
});		 Property: taskFields.manual

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

var ganttObj = new ej.Gantt($("#Gantt"), {
validateManualTasksOnLinking: true
});		 Property: validateManualTasksOnLinking

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

var ganttObj = new ej.Gantt($("#Gantt"), {
dayWorkingTime: [{from:'09:00 AM', to: '06:00 PM' }]
});		 Property: dayWorkingTime

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

var ganttObj = new ej.Gantt($("#Gantt"), {
roundOffDayworkingTime: true
});		 Not applicable
To define non-working background color Property: nonWorkingBackground

var ganttObj = new ej.Gantt($("#Gantt"), {
nonWorkingBackground : '#0000FF'
});		 Not Applicable
To highlight non working time range in Gantt Property: highlightNonWorkingTime

var ganttObj = new ej.Gantt($("#Gantt"), {
highlightNonWorkingTime : true
});		 Not Applicable
To set working days of a week Property: workweek

var ganttObj = new ej.Gantt($("#Gantt"), {
workweek:["Sunday","Monday","Tuesday","Wednesday","Thursday"]
});		 Property: workWeek

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  allowUnscheduledTask: true
});		 Property: allowUnscheduledTasks

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarBackground: '#FF4453'
});		 Not applicable
To define background color for parent taskbar Property: parentTaskbarBackground

var ganttObj = new ej.Gantt($("#Gantt"), {
parentTaskbarBackground: '#565673'
});		 Not applicable
To add Taskbar height Property: taskbarHeight

var ganttObj = new ej.Gantt($("#Gantt"), {
  taskbarHeight: 30,
  rowHeight: 40
});		 Property: taskbarHeight

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

var ganttObj = new ej.Gantt($("#Gantt"), {
parentProgressbarBackground: '#565673'
});		 Not applicable
To define background color for progress bar Property: progressbarBackground

var ganttObj = new ej.Gantt($("#Gantt"), {
progressbarBackground : '#0000FF'
});		 Not Applicable
To define height for progress bar Property: progressbarHeight

var ganttObj = new ej.Gantt($("#Gantt"), {
progressbarHeight : 80
});		 Not Applicable
To render progress status taskbar Property: showProgressStatus

var ganttObj = new ej.Gantt($("#Gantt"), {
showProgressStatus: true
});		 Property: labelSettings.taskLabel

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  connectorlineWidth: 2
});		 Property: connectorLineWidth

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  connectorLineBackground: "#0aecb8"
});		 Property: connectorLineBackground

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

var ganttObj = new ej.Gantt($("#Gantt"), {
weekendBackground: '#FF5673'
});		 Not applicable
To define taskbar template Property: taskbarTemplate

var ganttObj = new ej.Gantt($("#Gantt"), {
  taskbarTemplate: "#taskbarTemplate",
});		 Property: taskbarTemplate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  parentTaskbarTemplate: "#parentTaskbarTemplate",
});		 Property: parentTaskbarTemplate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  milestoneTemplate: "#milestoneTemplate",
});		 Property: milestoneTemplate

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rightTaskLabelMapping: 'endDate'
});		 Property: labelSettings.rightLabel

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

var ganttObj = new ej.Gantt($("#Gantt"), {
leftTaskLabelMapping: 'endDate'
});		 Property: labelSettings.leftLabel

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

var ganttObj = new ej.Gantt($("#Gantt"), {
rightTaskLabelTemplate: "#rightLabelTemplate",
});		 Property: labelSettings.rightLabel

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

var ganttObj = new ej.Gantt($("#Gantt"), {
leftTaskLabelTemplate: "#leftLabelTemplate",
});		 Property: labelSettings.leftLabel

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

var ganttObj = new ej.Gantt($("#Gantt"), {
showResourceNames: true
});		 Property: labelSettings.rightLabel

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

var ganttObj = new ej.Gantt($("#Gantt"), {
showTaskNames: true
});		 Property: labelSettings.leftLabel

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

var ganttObj = new ej.Gantt($("#Gantt"), {
queryTaskbarInfo: function (args) {}
});		 Event: queryTaskbarInfo

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

var ganttObj = new ej.Gantt($("#Gantt"), {
queryCellInfo: function (args) {}
});		 Event: queryCellInfo

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

Stripline

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

var ganttObj = new ej.Gantt($("#Gantt"), {
stripLines: [{
  day: "01/02/2014",
  label: "Project Release",
  lineStyle: "dotted",
  lineColor: "blue",
  lineWidth: 2
}]
});		 Property: eventMarkers

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
  holidays: [{
  day: "2/03/2014",
  label: " Public holiday",
  background: "yellow"
}]
});		 Property: holidays

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
holidays: [ {day: '3/20/2018'}]
});		 Property: holidays.from

let gantt: Gantt = new 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

var ganttObj = new ej.Gantt($("#Gantt"), {
sizeSettings: {height: '450px'}
});		 Property: height

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

var ganttObj = new ej.Gantt($("#Gantt"), {
sizeSettings: {width: '750px'}
});		 Property: width

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

var ganttObj = new ej.Gantt($("#Gantt"), {
splitterPosition : "50%"
}
});		 Not applicable
To change splitter by position Property: splitterSettings.position

var ganttObj = new ej.Gantt($("#Gantt"), {
splitterSettings: {
  position: "50%"
},
});		 Property: splitterSettings.position

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

var ganttObj = new ej.Gantt($("#Gantt"), {
splitterSettings: {
  index: 3
},
});		 Property: splitterSettings.columnIndex

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

var ganttObj = new ej.Gantt($("#Gantt"), {
viewType: ej.Gantt.ViewType.ProjectView
});		 Property: viewType

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  locale: "fr-FR"
});		 Property: locale

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  dateFormat: "dd/MM/yyyy"
});		 Property: dateFormat

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

var ganttObj = new ej.Gantt($("#Gantt"), {
allowKeyboardNavigation: true
});		 Property: allowKeyboard

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

var ganttObj = new ej.Gantt($("#Gantt"), {
enableSerialNumber: true
});		 Not applicable
To enable/disable predecessor validation Property: enablePredecessorValidation

var ganttObj = new ej.Gantt($("#Gantt"), {
  enablePredecessorValidation: true
});		 Property: enablePredecessorValidation

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

var ganttObj = new ej.Gantt($("#Gantt"), {
  workingTimeScale: ej.Gantt.workingTimeScale.TimeScale24Hours
});		 Property: dayWorkingTime

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

var ganttObj = new ej.Gantt($("#Gantt"), {
enableWBS : true
});		 Not Applicable
To enable work break down structure predecessor in Gantt Property: enableWBSPredecessor

var ganttObj = new ej.Gantt($("#Gantt"), {
enableWBSPredecessor : true
});		 Not Applicable
To map work value from data source Property: workMapping

var ganttObj = new ej.Gantt($("#Gantt"), {
workMapping: 'estimatedHours'
});		 Property: taskFields.work

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

var ganttObj = new ej.Gantt($("#Gantt"), {
workUnit: ej.Gantt.WorkUnit.Hour
});		 Property: workUnit

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskType: ej.Gantt.TaskType.FixedUnit
});		 Property: taskType

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

var ganttObj = new ej.Gantt($("#Gantt"), {
allowMultipleExporting: true
});		 Not applicable
To enable virtual rendering in Gantt Property: enableVirtualization

var ganttObj = new ej.Gantt($("#Gantt"), {
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

var ganttObj = new ej.Gantt($("#Gantt"), {
load: function (args) {}
});		 Event: load

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

var ganttObj = new ej.Gantt($("#Gantt"), {
splitterResized: function (args) {}
});		 Event: splitterResized

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

var ganttObj = new ej.Gantt($("#Gantt"), {
taskbarClick: function (args) {}
});		 Event: onTaskbarClick

let gantt: Gantt = new Gantt({
onTaskbarClick: function (args) {}
`});
Previous
Next