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

Migration from Essential JS 1 in Angular Gantt component

09 Jun 2021 / 26 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

<ej-gantt [dataSource]="ganttData">
</ej-gantt>		 Property: dataSource

<ejs-gantt [dataSource]="ganttData">
</ejs-gantt>
To map id of task from data source Property: taskIdMapping

<ej-gantt taskIdMapping= "taskID">
</ej-gantt>		 Property: taskFields.id

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { id: 'TaskID' };
To map name of task from data source Property: taskNameMapping

<ej-gantt taskNameMapping= "taskName">
</ej-gantt>		 Property: taskFields.name

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { name: 'TaskName' };
To map start date from data source Property: startDateMapping

<ej-gantt startDateMapping= "startDate">
</ej-gantt>		 Property: taskFields.startDate

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { startDate: 'StartDate' };
To map end date from data source Property: endDateMapping

<ej-gantt endDateMapping= "EndDate">
</ej-gantt>		 Property: taskFields.endDate

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { endDate: 'EndDate' };
To map duration from data source Property: durationMapping

<ej-gantt durationMapping= "duration">
</ej-gantt>		 Property: taskFields.duration

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { duration: 'Duration' };
To map duration unit from data source Property: durationUnitMapping

<ej-gantt durationUnitMapping : "durationUnit">
</ej-gantt>		 Property: taskFields.durationUnit

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { durationUnit: 'durationUnit' };
To map predecessors from data source Property: predecessorMapping

<ej-gantt predecessorMapping : "predecessor">
</ej-gantt>		 Property: taskFields.dependency

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { dependency: 'predecessor' };
To map progress from data source Property: progressMapping

<ej-gantt progressMapping: "progress">
</ej-gantt>		 Property: taskFields.progress

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { progress: 'progress' };
To map child task from data source Property: childMapping

<ej-gantt childMapping : "subTasks">
</ej-gantt>		 Property: taskFields.child

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { child: 'subTasks' };
To map baseline start date from data source Property: baselineStartDateMapping

<ej-gantt baselineStartDateMapping: "baselineStartDate">
</ej-gantt>		 Property: taskFields.baselineStartDate

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { baselineStartDate: 'baselineStartDate' };
To map baseline end date from data source Property: baselineEndDateMapping

<ej-gantt baselineEndDateMapping: "baselineEndDate">
</ej-gantt>		 Property: taskFields.baselineEndDate

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { baselineEndDate: 'baselineEndDate' };
To map milestone mapping from data source Property: milestoneMapping

<ej-gantt milestoneMapping: "isMilestone">
</ej-gantt>		 Property: taskFields.milestone

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { milestone: 'isMilestone'' };
To map notes from data source Property: notesMapping

<ej-gantt notesMapping: "notes">
</ej-gantt>		 Property: taskFields.notes

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { notes: 'notes' };
To map parent task id from data source Property: parentTaskIdMapping

<ej-gantt parentTaskIdMapping: "parentId">
</ej-gantt>		 Property: taskFields.parentID

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { parentID: 'parentId' };
To map assigned resources from data source Property: resourceInfoMapping

<ej-gantt resourceInfoMapping: "assignedResource">
</ej-gantt>		 Property: taskFields.resourceInfo

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { resourceInfo: 'assignedResource' };
To map expand state from data source Property: expandStateMapping

<ej-gantt expandStateMapping: "isExpanded">
</ej-gantt>		 Property: taskFields.expandState

<ejs-gantt [taskFields]="taskSettings">
</ejs-gantt>
TS
this.taskSettings = { expandState: 'isExpanded' };

Sorting

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

<ej-gantt [allowSorting]="true">
</ej-gantt>		 Property: allowSorting

<ejs-gantt [allowSorting]="true">
</ejs-gantt>
To enable/disable multiple sorting option Property: allowMultiSorting

<ej-gantt [allowMultiSorting]="true">
</ej-gantt>		 Property: allowSorting

<ejs-gantt [allowSorting]="true">
</ejs-gantt>
Sort column Initially Property: sortSettings.sortedColumns

<ej-gantt [allowSorting]="true" [sortSettings]="sortSettings">
</ej-gantt>
TS
this.sortSettings = {
  sortedColumns :[ {field: "taskName", direction: "descending" } ]
};		 Property: sortSettings.columns

<ejs-gantt [allowSorting]="true" [sortSettings]="sortSettings">
</ejs-gantt>
TS
this.sortSettings = {
  columns: [{ field: 'TaskID', direction: 'Ascending' }]
};
Clear the Sorted columns Method: clearSorting()

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.clearSorting();
Sort records in Gantt Method: sortColumn(mappingName, columnSortDirection)

export class AppComponent {
constructor() {
  //...
}
public clearSorting(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.sortColumn("startDate","ascending");
}
}		 Method: sortColumn(columnName, direction,[isMultiSort])

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.sortColumn('startDate','ascending');

Filtering

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

<ej-gantt [filterSettings]="filterSettings">
</ej-gantt>
TS
this.filterSettings = {
  filteredColumns: [ { value: "plan", field: "taskName", predicate: "and", operator: "startswith" } ]
};		 Property: filterSettings.columns

<ejs-gantt [filterSettings]="filterSettings">
</ejs-gantt>
TS
this.filterSettings = {
  columns: [ { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' } ]
};
Filter records in Gantt Method: filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase])

export class AppComponent {
constructor() {
  //...
}
public filterColumn(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.filterColumn("taskName", "startswith", "plan");
}
}		 Method: filterByColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase],[ignoreAccent])

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.filterByColumn('taskName', 'startswith', 'plan');
Filter multiple columns Method: filterContent(ejPredicate)

export class AppComponent {
constructor() {
  //...
}
public filterContent(event) {
  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()

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.clearFiltering();

Searching

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

<ej-gantt [toolbarSettings]="toolbarSettings">
</ej-gantt>
TS
this.toolbarSettings = {
  showToolbar: true,
  toolbarItems : [ej.Gantt.ToolbarItems.Search]
};		 Property: toolbar

<ejs-gantt [toolbar]="toolbar>
</ejs-gantt>
TS
this.toolbar = ['Search'];
Search records in Gantt Method: searchItem(key)

export class AppComponent {
constructor() {
  //...
}
public searchItem(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.searchItem("plan");
}
}		 Method: search(key)

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.search('plan');

Selection

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

<ej-gantt [allowSelection]="true">
</ej-gantt>		 Property: allowSelection

<ejs-gantt [allowSelection]="true">
</ejs-gantt>
To define selection type in Gantt Property: selectionType

<ej-gantt selectionType="single
</ej-gantt>		 Property: selectionSettings.type

<ejs-gantt [selectionSettings]="selectionSettings">
</ejs-gantt>
TS
this.selectionSettings = { type: 'Multiple' };
To define selection mode in Gantt Property: selectionMode

<ej-gantt selectionMode="cell
</ej-gantt>		 Property: selectionSettings.mode

<ejs-gantt [selectionSettings]="selectionSettings">
</ejs-gantt>
TS
this.selectionSettings = { mode: 'Cell' };
Select Row by Index Property: selectedRowIndex

<ej-gantt [selectedRowIndex]="selectedRowIndex">
</ej-gantt>
TS
this.selectedRowIndex = 3		 Property: selectedRowIndex

<ejs-gantt [selectedRowIndex]='5'>
<ejs-gantt>
To define selected cell index in Gantt Property: selectedCellIndexes

<ej-gantt [selectedCellIndexes]="selectedCellIndexes">
</ej-gantt>
TS
this.selectedCellIndexes = [ ];		 Not applicable
Select Multiple Cells Method: selectCells(Indexes,preservePreviousSelectedCell)

export class AppComponent {
constructor() {
  //...
}
public selectCells(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
ganttObj.selectCells(indexes, true);		 Not Applicable
Select multiple Rows Method: selectMultipleRows(rowIndexes)

export class AppComponent {
constructor() {
  //...
}
public selectMultipleRows(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.selectMultipleRows([1,2,3]);
}
}		 Method: selectRows(key)

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.selectionModule.selectRows([1,2,3]);
Triggers after cell selection action Event: cellSelected

<ej-gantt id="Gantt" (cellSelected)="cellSelected($event)">
</ej-gantt>
TS
cellSelected(event) { }		 Event: cellSelected

<ejs-gantt (cellSelected)="cellSelected($event)">
</ejs-gantt>
TS
public cellSelected(event) { }
Triggers on cell selection action Event: cellSelecting

<ej-gantt id="Gantt" (cellSelecting)="cellSelecting($event)">
</ej-gantt>
TS
cellSelecting(event) { }		 Event: cellSelecting

<ejs-gantt (cellSelecting)="cellSelecting($event)">
</ejs-gantt>
TS
public cellSelecting(event) { }
Triggers after row selection action Event: rowSelected

<ej-gantt id="Gantt" (rowSelected)="rowSelected($event)">
</ej-gantt>
TS
rowSelected(event) { }		 Event: rowSelected

<ejs-gantt (rowSelected)="rowSelected($event)">
</ejs-gantt>
TS
public rowSelected(event) { }
Triggers before row selection action Event: rowSelecting

<ej-gantt id="Gantt" (rowSelecting)="rowSelecting($event)">
</ej-gantt>
TS
rowSelecting(event) { }		 Event: rowSelecting

<ejs-gantt (rowSelecting)="rowSelecting($event)">
</ejs-gantt>
TS
public rowSelecting(event) { }

Editing

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

<ej-gantt [editSettings]= "editSettings">
</ej-gantt>
TS
this.editSettings = {
  allowEditing: true,
  allowAdding: true,
  allowDeleting: true,
  showDeleteConfirmDialog: true};
});		 Property: editSettings

<ejs-gantt [editSettings]="editSettings">
</ejs-gantt>
TS
this.editSettings = {
  allowEditing: true,
  allowAdding: true,
  allowDeleting: true,
  showDeleteConfirmDialog: true};
Cell Editing Property: editSettings.editMode

<ej-gantt [editSettings]="editSettings">
</ej-gantt>
TS
this.editSettings = { editMode: "cellEditing" };		 Property: editSettings.mode

<ejs-gantt [editSettings]="editSettings">
</ejs-gantt>
TS
this.editSettings = { mode: "Auto" };
Dialog Editing Property: editSettings.editMode

<ej-gantt [editSettings]="editSettings">
</ej-gantt>
TS
this.editSettings = { editMode: "normal" };		 Property: editSettings.mode

<ejs-gantt [editSettings]="editSettings">
</ejs-gantt>
TS
this.editSettings = { mode: "Dialog" };
To enable/disable taskbar editing Property: allowGanttChartEditing

<ej-gantt [allowGanttChartEditing]="true">
</ej-gantt>		 Property: editSettings.allowTaskbarEditing
<ejs-gantt [editSettings]="editSettings">
</ejs-gantt>
TS
this.editSettings = { allowTaskbarEditing: true };
To enable progressbar resizing Property: enableProgressBarResizing

<ej-gantt [enableProgressBarResizing]="true">
</ej-gantt>		 Property: editSettings.allowTaskbarEditing

<ejs-gantt [editSettings]="editSettings">
</ejs-gantt>
TS
this.editSettings = { allowTaskbarEditing: true };
To enable indent/ outdent option Property: editSettings.allowIndent

<ej-gantt [editSettings]="editSettings">
</ej-gantt>
TS
this.editSettings = { allowIndent: true };		 Not applicable
To define click or double click action to begin edit action Property: editSettings.beginEditAction

<ej-gantt [editSettings]="editSettings">
</ej-gantt>
TS
this.editSettings = { beginEditAction: 'click' };		 Not applicable
To define new row position in Gantt Property: editSettings.rowPosition

<ej-gantt [editSettings]="editSettings">
</ej-gantt>
TS
this.editSettings = { rowPosition: ej.Gantt.RowPosition.AboveSelectedRow};		 Property: editSettings.newRowPosition

<ejs-gantt [editSettings]="editSettings">
</ejs-gantt>
TS
this.editSettings = { newRowPosition: 'Below'};
To define fields in edit dialog Property: editDialogFields

<ej-gantt [editDialogFields]= "editDialogFields">
</ej-gantt>
TS
this.editDialogFields = [{ field: 'taskName', editType: 'stringedit' }];		 Property: editDialogFields

<ejs-gantt [editDialogFields]="editDialogFields">
<ejs/gantt>
TS
this.editDialogFields = [ { type: 'General', fields: ['TaskName'] } ];
To define fields in add dialog Property: addDialogFields

<ej-gantt [addDialogFields]="addDialogFields">
</ej-gantt>
TS
this.addDialogFields = [{ field: 'taskName', editType: 'stringedit' }];		 Property: addDialogFields

<ejs-gantt [addDialogFields]="addDialogFields">
</ejs-gantt>
TS
this.addDialogFields: [ { type: 'General', fields: ['taskName'] } ];
To make Gantt as read only Property: readOnly

<ej-gantt [readOnly]= "true">
</ej-gantt>		 Not Applicable
To open Edit dialog Method: openEditDialog()

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.openEditDialog();
To open Add dialog Method: openAddDialog()

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.openAddDialog();
Add task in Gantt Method: addRecord(data, rowPosition)

export class AppComponent {
constructor() {
  //...
}
public addRecord(event) {
var ganttObj = $("#Gantt").ejGantt("instance");
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)

@ViewChild('gantt')
public ganttObj: GanttComponent;
var data = {
  taskId:"40",
  taskName:"New Task 40",
  startDate:"2/20/2014",
  endDate:"2/25/2014"
};
this.ganttObj.addRecord(data, 'Below', 10);
Delete selected item Method: deleteItem()

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.editModule.deleteRecord();
Update task details by id Method: updateRecordByTaskId(data)

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
var data = { taskID: 4, taskName: "updated value"};
this.ganttObj.updateRecordByID(data);
Delete dependency Method: deleteDependency(fromTaskId,toTaskId)

export class AppComponent {
constructor() {
  //...
}
public deleteDependency(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.deleteDependency(3, 6);		 Not applicable
Save Edit Method: saveEdit()

export class AppComponent {
constructor() {
  //...
}
public saveEdit(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.saveEdit();		 Not applicable
Cancel Edit Method: cancelEdit()

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.cancelEdit()
Triggers for every Gantt action before it get started Event: actionBegin

<ej-gantt id="Gantt" (actionBegin)="actionBegin($event)">
</ej-gantt>
TS
actionBegin(event) { }		 Event: actionBegin

<ejs-gantt (actionBegin)="actionBegin($event)">
</ejs-gantt>
TS
public actionBegin(event) { }
Triggers for after every Gantt action completed Event: actionComplete

<ej-gantt id="Gantt" (actionComplete)="actionComplete($event)">
</ej-gantt>
TS
actionComplete(event) { }		 Event: actionComplete

<ejs-gantt (actionComplete)="actionComplete($event)">
</ejs-gantt>
TS
public actionComplete(event) { }
Triggers while resizing, dragging the taskbar Event: taskbarEditing

<ej-gantt id="Gantt" (taskbarEditing)="taskbarEditing($event)">
</ej-gantt>
TS
taskbarEditing(event) { }		 Event: taskbarEditing

<ejs-gantt (taskbarEditing)="taskbarEditing($event)">
</ejs-gantt>
TS
public taskbarEditing(event) { }
Triggers after taskbar resize, drag action Event: taskbarEdited

<ej-gantt id="Gantt" (taskbarEdited)="taskbarEdited($event)">
</ej-gantt>
TS
taskbarEdited(event) { }		 Event: taskbarEdited

<ejs-gantt (taskbarEdited)="taskbarEdited($event)">
</ejs-gantt>
TS
public taskbarEdited(event) { }

Columns

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

<ej-gantt [allowColumnResize]="true">
</ej-gantt>		 Property: allowResizing

<ejs-gantt [allowResizing]="true">
<ejs/gantt>
To enable/disable column chooser Property: showColumnChooser

<ej-gantt [showColumnChooser]="true">
</ej-gantt>		 Property: showColumnMenu

<ejs-gantt [showColumnMenu]="true">
<ejs/gantt>
To enable/disable column add, remove option in column menu Property: showColumnOptions

<ej-gantt [showColumnOptions]="true">
</ej-gantt>		 Not applicable
Tree column index Property: treeColumnIndex

<ej-gantt [treeColumnIndex]= "1">
</ej-gantt>		 Property: treeColumnIndex

<ejs-gantt [treeColumnIndex]= "2">
</ejs-gantt>
To define column fields in column menu Property: columnDialogFields

<ej-gantt [columnDialogFields]="columnDialogFields">
</ej-gantt>
TS
this.columnDialogFields = ["field", "headerText", "editType", "width", "visible", "allowSorting", "textAlign", "headerTextAlign"];		 Not applicable
Show column Method: showColumn(headerText)

export class AppComponent {
constructor() {
  //...
}
public showColumn(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.showColumn("Task Name");		 Method: showColumn(keys, showBy)

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.showColumn("TaskName");
Hide column Method: hideColumn(headerText)

export class AppComponent {
constructor() {
  //...
}
public hideColumn(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.hideColumn("Task Name");		 Method: hideColumn(keys, showBy)

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.hideColumn("TaskName");

Toolbar

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

<ej-gantt [toolbarSettings]= "toolbarSettings">
</ej-gantt>
TS
this.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
],
};
</ej-gantt>		 Property: toolbar

<ejs-gantt [toolbar]="toolbar">
</ejs-gantt>
TS
this.toolbar = ['Add','Edit','Delete','Update','Cancel','ExpandAll',
  'CollapseAll','Search','PrevTimeSpan','NextTimeSpan'];
Other toolbars Property: toolbarSettings.toolbarItems

<ej-gantt [toolbarSettings]= "toolbarSettings">
</ej-gantt>
TS
this.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

<ej-gantt [toolbarSettings]= "toolbarSettings">
</ej-gantt>
TS
this.toolbarSettings = {
  showToolbar: true,
  customToolbarItems: [{ text: "ShowBaseline", tooltipText: "Show Baseline" }, { text: "Reset", tooltipText:"Reset" }]
};		 Property: toolbar

<ejs-gantt [toolbar]="toolbar">
</ejs-gantt>
TS
this.toolbar = [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right'}];
Triggers when toolbar items clicked Event: toolbarClick

<ej-gantt id="Gantt" (toolbarClick)="toolbarClick($event)">
</ej-gantt>
TS
toolbarClick(event) { }		 Event: toolbarClick

<ejs-gantt (toolbarClick)="toolbarClick($event)">
</ejs-gantt>
TS
public toolbarClick(event) { }

ToolTip

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

<ej-gantt [enableTaskbarTooltip]="true">
</ej-gantt>		 Property: tooltipSettings.showTooltip

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { showTooltip: true } >
To define tooltip for all cells Property: cellTooltipTemplate

<ej-gantt cellTooltipTemplate="#CustomToolTip">
</ej-gantt>		 Not applicable
To define tooltip template for row drag action Property: dragTooltip

<ej-gantt [dragTooltip]= "dragTooltip">
</ej-gantt>
TS
this.dragTooltip = { showTooltip: true };		 Not applicable
To enable taskbar editing tooltip Property: enableTaskbarDragTooltip

<ej-gantt [enableTaskbarDragTooltip]="true">
</ej-gantt>		 Not Applicable
To enable/disable tooltip for grid cells Property: showGridCellTooltip

<ej-gantt [showGridCellTooltip]="true">
</ej-gantt>		 Not applicable
To enable/disable tooltip for grid cells Property: showGridExpandCellTooltip

<ej-gantt [showGridExpandCellTooltip]="true">
</ej-gantt>		 Not applicable
To define taskbar tooltip template in Gantt Property: taskbarTooltipTemplate

<ej-gantt taskbarTooltipTemplate="template tooltip string">
</ej-gantt>		 Property: tooltipSettings.taskbar

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { taskbar: "template tooltip string: } >
To define taskbar tooltip template id in Gantt Property: taskbarTooltipTemplateId

<ej-gantt taskbarTooltipTemplateId = "#templateId">
</ej-gantt>		 Property: tooltipSettings.taskbar

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { taskbar : "#templateId" } >
To define tooltip template for connector line Property: predecessorTooltipTemplate

<ej-gantt predecessorTooltipTemplate= "predecessorTooltipTemplate">
</ej-gantt>		 Property: tooltipSettings.connectorLine

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { connectorLine : "predecessorTooltip" };
To define template for progress resize tooltip Property: progressbarTooltipTemplate

<ej-gantt progressbarTooltipTemplate= "progressbarTooltipTemplate">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { editing : "template tooltip string" };
To define template id for progress resize tooltip Property: progressbarTooltipTemplateId

<ej-gantt progressbarTooltipTemplateId= "#tooltipTemplateID">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { editing : "#progressResize" };
To define tooltip template for taskbar edit action Property: taskbarEditingTooltipTemplate

<ej-gantt taskbarEditingTooltipTemplate = "tooltipTemplate">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { editing : "template tooltip string" };
To define tooltip template id for taskbar edit action Property: taskbarEditingTooltipTemplateId

<ej-gantt taskbarEditingTooltipTemplateId = "#templateId">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt [tooltipSettings]="tooltipSettings">
></ejs-gantt>
TS
this.tooltipSettings = { editing : "#templateId" } >

Timeline

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

<ej-gantt [scheduleHeaderSettings]="scheduleHeaderSettings">
<ej-gantt>
TS
this.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
}>
</ej-gantt>		 Property: timelineSettings

<ejs-gantt [timelineSettings]="timelineSettings">
</ejs-gantt>
TS
this.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
}
};
To define weekend background in Gantt Property: weekendBackground

<ej-gantt weekendBackground= "blue">
</ej-gantt>;		 Not applicable
To Highlight weekends Property: highlightWeekends

<ej-gantt [highlightWeekends]="true">
</ej-gantt>;		 Property: highlightWeekends

<ejs-gantt [highlightWeekends]="true">
</ejs-gantt>
To include weekends Property: includeWeekend

<ej-gantt [includeWeekend]="true">
</ej-gantt>;		 Property: includeWeekend

<ejs-gantt [includeWeekend]="true">
</ejs-gantt>
To define project start date in Gantt Property: scheduleStartDate

<ej-gantt scheduleStartDate = "3/20/2018">
</ej-gantt>		 Property: projectStartDate

<ejs-gantt [projectStartDate]="projectStartDate">
</ej-gantt>
TS
this. projectStartDate = new Date('3/20/2018');
To define project end date in Gantt Property: scheduleEndDate

<ej-gantt scheduleEndDate = "3/20/2018">
</ej-gantt>		 Property: projectEndDate

<ejs-gantt [projectEndDate]="projectEndDate">
</ej-gantt>
TS
this. projectEndDate = new Date('3/20/2018');
Update project start date and end date Method: updateScheduleDates(startDate,endDate)

export class AppComponent {
constructor() {
  //...
}
public updateScheduleDates(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.updateScheduleDates("5/25/2017", "9/27/2017");
}
}		 Method: updateProjectDates(startDate, endDate, isTimelineRoundOff)

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.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

<ej-gantt [allowDragAndDrop]="true">
</ej-gantt>		 Not applicable
To enable/disable alternate row background Property: enableAltRow

<ej-gantt [enableAltRow]="true">
</ej-gantt>		 Not applicable
To add Row height Property: rowHeight

<ej-gantt [rowHeight]="60">
</ej-gantt>		 Property: rowHeight

<ejs-gantt [rowHeight]="60">
</ejs-gantt>
To render parent in collapsed state Property: enableCollapseAll

<ej-gantt [enableCollapseAll]="true">
</ej-gantt>		 Property: collapseAllParentTasks

<ejs-gantt [collapseAllParentTasks]="true" >
Expand/collapse record by id Method: expandCollapseRecord(taskId)

export class AppComponent {
constructor() {
  //...
}
public expandCollapseRecord(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.expandCollapseRecord(1);
}
}		 Method: collapseByID() expandByID()

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.expandByID(1);

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

export class AppComponent {
constructor() {
  //...
}
public expandAllItems(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.expandAllItems();
}
}		 Method: expandAll()

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.expandAll();
Collapse all rows Method: collapseAllItems()

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.collapseAll();
Triggers after row collapse action Event: collapsed

<ej-gantt id="Gantt" (collapsed)="collapsed($event)">
</ej-gantt>
TS
collapsed(event) { }		 Event: collapsed

<ejs-gantt (collapsed)="collapsed($event)">
</ejs-gantt>
TS
public collapsed(event) { }
Triggers before row collapse action Event: collapsing

<ej-gantt id="Gantt" (collapsing)="collapsing($event)">
</ej-gantt>
TS
collapsing(event) { }		 Event: collapsing

<ejs-gantt (collapsing)="collapsing($event)">
</ejs-gantt>
TS
public collapsing(event) { }
Triggers after Gantt row was expanded Event: expanded

<ej-gantt id="Gantt" (expanded)="expanded($event)">
</ej-gantt>
TS
expanded(event) { }		 Event: expanded

<ejs-gantt (expanded)="expanded($event)">
</ejs-gantt>
TS
public expanded(event) { }
Triggers before Gantt row expand action Event: expanding

<ej-gantt id="Gantt" (expanding)="expanding($event)">
</ej-gantt>
TS
expanding(event) { }		 Event: expanding

<ejs-gantt (expanding)="expanding($event)">
</ejs-gantt>
TS
public expanding(event) { }
Triggers before grid rows render action Event: rowDataBound

<ej-gantt id="Gantt" (rowDataBound)="rowDataBound($event)">
</ej-gantt>
TS
rowDataBound(event) { }		 Event: rowDataBound

<ejs-gantt (rowDataBound)="rowDataBound($event)">
</ejs-gantt>
TS
public rowDataBound(event) { }
Triggers while dragging a row Event: rowDrag

<ej-gantt id="Gantt" (rowDrag)="rowDrag($event)">
</ej-gantt>
TS
rowDrag(event) { }		 Not applicable
Triggers while while start to drag row Event: rowDragStart

<ej-gantt id="Gantt" (rowDragStart)="rowDragStart($event)">
</ej-gantt>
TS
rowDrag(event) { }		 Not applicable
Triggers while while drop a row Event: rowDragStop

<ej-gantt id="Gantt" (rowDragStop)="rowDragStop($event)">
</ej-gantt>
TS
rowDrag(event) { }		 Not applicable

Resources

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

<ej-gantt [resources]="resources">
</ej-gantt>
TS
this.resources =[{id:1; name:"jack" }];		 Property: resources

<ejs-gantt [resources]="resources">
</ejs-gantt>
TS
this.resources =[{ resourceId: 1, resourceName: 'Martin Tamer' }];
To map resource id field from resource collection Property: resourceIdMapping

<ej-gantt resourceIdMapping ="id">
</ej-gantt>		 Property: resourceIDMapping

<ejs-gantt resourceIDMapping='resourceId'>
</ejs-gantt>
To map resource name field from resource collection Property: resourceNameMapping

<ej-gantt resourceNameMapping = "name">
</ej-gantt>		 Property: resourceNameMapping

<ejs-gantt resourceNameMapping='resourceName'>
</ejs-gantt>
To map resource unit field from assigned resource collection Property: resourceUnitMapping

<ej-gantt resourceUnitMapping = "Unit">
</ej-gantt>		 Not applicable
To define resource view type of Gantt Property: viewType

<ej-gantt [viewType]= "viewType">
</ej-gantt>
TS
this.viewType = ej.Gantt.ViewType.ResourceView>
</ej-gantt>		 Not applicable
To define mapping property for resource collection in resource view Gantt Property: resourceCollectionMapping

<ej-gantt resourceCollectionMapping= "resources">
</ej-gantt>		 Not Applicable
To map task collection from resources for resource view Gantt Property: taskCollectionMapping

<ej-gantt taskCollectionMapping= "tasks">
</ej-gantt>		 Not applicable
To map group id for resource view Gantt Property: groupIdMapping

<ej-gantt groupIdMapping= "groupId">
</ej-gantt>		 Not Applicable
To map group name for resource view Gantt Property: groupNameMapping

<ej-gantt groupNameMapping= "groupName">
</ej-gantt>		 Not Applicable

Baseline

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

<ej-gantt [renderBaseline] = "true">
</ej-gantt>		 Property: renderBaseline

<ejs-gantt [renderBaseline]="true">
</ejs-gantt>
To define baselineColor Property: baselineColor

<ej-gantt [baselineColor]= "blue">
</ej-gantt>		 Property: baselineColor

<ejs-gantt baselineColor="red">
</ejs-gantt>

Context Menu

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

<ej-gantt [enableContextMenu]="true">
</ej-gantt>		 Property: enableContextMenu

<ejs-gantt [enableContextMenu]="true" >
To define custom menu items Event: contextMenuOpen

<ej-gantt id="Gantt" (contextMenuOpen)="contextMenuOpen($event)">
</ej-gantt>
TS
contextMenuOpen(event) {
  event.contextMenuItems.push({
   headerText: "Expand/Collapse",
   menuId: "expand",
   iconPath: "url(Expand-02-WF.png)",
   eventHandler: function() {
     //event handler for custom menu items
   }
});
}
}		 Property: contextMenuItems

<ejs-gantt [contextMenuItems]="contextMenuItems">
</ejs-gantt>
TS
this.contextMenuItems = [
 { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' } as ContextMenuItemModel,
 { text: 'Expand the Row', target: '.e-content', id: 'expandrow' } as ContextMenuItemModel
];
Triggers before context menu opens Event: contextMenuOpen

<ej-gantt id="Gantt" (contextMenuOpen)="contextMenuOpen($event)">
</ej-gantt>
TS
contextMenuOpen(event) { }		 Event: contextMenuOpen

<ejs-gantt (contextMenuOpen)="contextMenuOpen($event)">
</ejs-gantt>
TS
public contextMenuOpen(event) { }

Scheduling Tasks

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

<ej-gantt [taskSchedulingMode]= "taskSchedulingMode">
</ej-gantt>
TS
this.taskSchedulingMode = ej.Gantt.TaskSchedulingMode.Auto;		 Not applicable
To map task scheduling mode from data source Property: taskSchedulingModeMapping

<ej-gantt taskSchedulingModeMapping= "taskMode">
</ej-gantt>		 Not applicable
To enable schedule date validation while task predecessor draw action Property: validateManualTasksOnLinking

<ej-gantt [validateManualTasksOnLinking]="true">
</ej-gantt>		 Not applicable
To define working time range of day Property: dayWorkingTime

<ej-gantt [dayWorkingTime]="dayWorkingTime">
</ej-gantt>
TS
this.dayWorkingTime = [{ "from": "08:00 AM", "to": "12:00 PM" }];		 Property: dayWorkingTime

<ejs-gantt [dayWorkingTime]="dayWorkingTime">
</ejs-gantt>
TS
this.dayWorkingTime = [ { from: 9, to: 18 } ];
To enable rounding off date value in taskbar editing Property: roundOffDayworkingTime

<ej-gantt [roundOffDayworkingTime]="true">
</ej-gantt>		 Not applicable
To define non-working background color Property: nonWorkingBackground

<ej-gantt nonWorkingBackground = "#0000FF">
</ej-gantt>		 Not Applicable
To highlight non working time range in Gantt Property: highlightNonWorkingTime

<ej-gantt [highlightNonWorkingTime]="true">
</ej-gantt>		 Not Applicable
To set working days of a week Property: workweek

<ej-gantt [workweek]= "workweek">
</ej-gantt>
TS
this.workweek = ["Sunday","Monday","Tuesday","Wednesday","Thursday"];		 Property: workWeek

<ejs-gantt [workWeek]="workWeek">
</ejs-gantt>
TS
this.workWeek = ["Sunday","Monday","Tuesday","Wednesday","Thursday"];
To enable/disable Unscheduled tasks Property: allowUnscheduledTask

<ej-gantt [allowUnscheduledTask]="true">
</ej-gantt>		 Property: allowUnscheduledTasks

<ejs-gantt allowUnscheduledTasks="true">
</ejs-gantt>

Appearance and Customizations

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

<ej-gantt taskbarBackground = "#F2F2F2">
</ej-gantt>		 Not applicable
To define background color for parent taskbar Property: parentTaskbarBackground

<ej-gantt parentTaskbarBackground= "#F2F2F2">
</ej-gantt>		 Not applicable
To add Taskbar height Property: taskbarHeight

<ej-gantt [taskbarHeight]="25" [rowHeight]="40">
</ej-gantt>		 Property: taskbarHeight

<ejs-gantt [taskbarHeight]="50" [rowHeight]="60">
</ejs-gantt>
To define background color for parent progress bar Property: parentProgressbarBackground

<ej-gantt parentProgressbarBackground= "#F2F2F2">
</ej-gantt>		 Not applicable
To define background color fro progress bar Property: progressbarBackground

<ej-ganttprogressbarBackground= "#F2F2F2">
</ej-gantt>		 Not Applicable
To define height for progress bar Property: progressbarHeight

<ej-gantt progressbarHeight= "100">
</ej-gantt>		 Not Applicable
To render progress status taskbar Property: showProgressStatus

<ej-gantt [showProgressStatus] = "true">
</ej-gantt>		 Property: labelSettings.taskLabel

<ejs-gantt [labelSettings]="labelSettings">
</ejs-gantt>
TS
this.labelSettings = { taskLabel: '${Progress}%' };
To set connectorline width Property: connectorlineWidth

<ej-gantt [connectorlineWidth]= 2>
</ej-gantt>		 Property: connectorLineWidth

<ejs-gantt [connectorLineWidth]='3'>
</ejs-gantt>
To set connectorline background Property: connectorLineBackground

<ej-gantt connectorLineBackground="#F2F2F2">>
</ej-gantt>		 Property: connectorLineBackground

<ejs-gantt connectorLineBackground="red">
</ejs-gantt>
To define weekend background in Gantt Property: weekendBackground

<ej-gantt weekendBackground = "blue">
</ej-gantt>		 Not applicable
To define taskbar template Property: taskbarTemplate

<ej-gantt taskbarTemplate= "#TaskbarTemplate">
</ej-gantt>		 Property: taskbarTemplate

<ejs-gantt taskbarTemplate="#TaskbarTemplate">
</ejs-gantt>
To define parent taskbar template Property: parentTaskbarTemplate

<ej-gantt parentTaskbarTemplate= "#parentTaskbarTemplate">
</ej-gantt>		 Property: parentTaskbarTemplate

<ejs-gantt parentTaskbarTemplate= "#parentTaskbarTemplate">
</ejs-gantt>
To define milestone template Property: milestoneTemplate

<ej-gantt milestoneTemplate= "#milestoneTemplate">
</ej-gantt>		 Property: milestoneTemplate

<ejs-gantt milestoneTemplate= '#MilestoneTemplate'>
</ejs-gantt>
To define right task label Property: rightTaskLabelMapping

<ej-gantt rightTaskLabelMapping = "taskName">
</ej-gantt>		 Property: labelSettings.rightLabel

<ejs-gantt [labelSettings]="labelSettings">
</ejs-gantt>
TS
this.labelSettings = { rightLabel: '${taskData.Progress}' };
To define left task label Property: leftTaskLabelMapping

<ej-gantt leftTaskLabelMapping= "taskId">
</ej-gantt>		 Property: labelSettings.leftLabel

<ejs-gantt [labelSettings]="labelSettings">
</ejs-gantt>
TS
this.labelSettings = { leftLabel: 'TaskID' };
To define right task label template Property: rightTaskLabelTemplate

<ej-gantt rightTaskLabelTemplate = "#customTaskRightLabel">
</ej-gantt>		 Property: labelSettings.rightLabel

<ejs-gantt [labelSettings]="labelSettings">
</ejs-gantt>
TS
this.labelSettings = { rightLabel: '#rightLabel'};
To define left task label template Property: leftTaskLabelTemplate

<ej-gantt leftTaskLabelTemplate= "#customTaskLeftLabel">
</ej-gantt>		 Property: labelSettings.leftLabel

<ejs-gantt [labelSettings]="labelSettings">
</ejs-gantt>
TS
this.labelSettings = { leftLabel: '#leftLabel'};
To render resource names right to taskbar Property: showResourceNames

<ej-gantt [showResourceNames]="true">
</ej-gantt>		 Property: labelSettings.rightLabel

<ejs-gantt [labelSettings]="labelSettings">
</ejs-gantt>
TS
this.labelSettings = { rightLabel: 'resourceInfo'};
To render task name left to taskbar Property: showTaskNames

<ej-gantt [showTaskNames]="true">
</ej-gantt>		 Property: labelSettings.leftLabel

<ejs-gantt [labelSettings]="labelSettings">
</ejs-gantt>
TS
this.labelSettings = { leftLabel: 'taskName'};
Triggers on taskbar rendering action Event: queryTaskbarInfo

<ej-gantt id="Gantt" (queryTaskbarInfo)="queryTaskbarInfo($event)">
</ej-gantt>
TS
queryTaskbarInfo(event) { }		 Event: queryTaskbarInfo

<ejs-gantt (queryTaskbarInfo)="queryTaskbarInfo($event)">
</ejs-gantt>
TS
public queryTaskbarInfo(event) { }
Triggers on grid cell rendering action Event: queryCellInfo

<ej-gantt id="Gantt" (queryCellInfo)="queryCellInfo($event)">
</ej-gantt>
TS
queryCellInfo(event) { }		 Event: queryCellInfo

<ejs-gantt (queryCellInfo)="queryCellInfo($event)">
</ejs-gantt>
TS
public queryCellInfo(event) { }

Stripline

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

<ej-gantt [stripLines]= "stripLines">
</ej-gantt>
TS
this.stripLines = [ { day: "01/02/2014",label: "Project Release", lineStyle: "dotted", lineColor: "blue", lineWidth: 2 } ];		 Property: eventMarkers

<ejs-gantt [eventMarkers]="eventMarkers">
</ejs-gantt>
TS
this.eventMarkers = [ { day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off'} ];

Holidays

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

<ej-gantt [holidays]= "holidays">
</ej-gantt>
TS
this.holidays = [ { day: "2/03/2014", label: " Public holiday", background: "yellow" } ];		 Property: holidays

<ejs-gantt [holidays] = "holidays">
</ejs-gantt>
TS
this.holidays = [ { from: "04/04/2019", to:"04/05/2019", label: " Public holidays", cssClass:"e-custom-holiday"} ];
To define days in holiday collection Property: holidays.day

<ejs-gantt [holidays] = "holidays">
</ejs-gantt>
TS
this.holidays = [ { day:"12/2/2000" } ];		 Property: holidays.from

<ejs-gantt [holidays] = "holidays">
</ejs-gantt>
TS
this.holidays = [ { from: "3/20/2018" } ];

Others

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

<ej-gantt [sizeSettings]= "sizeSettings">
</ej-gantt>
TS
this.sizeSettings = { height: "450px" };		 Property: height

<ejs-gantt height="430px">
</ejs-gantt>
To define width for Gantt Property: sizeSettings.width

<ej-gantt [sizeSettings]= "sizeSettings">
</ej-gantt>
TS
this.sizeSettings = { width: "700px" }>
</ej-gantt>		 Property: width

<ejs-gantt width="700px">
</ejs-gantt>
To change splitter position Property: splitterPosition

<ej-gantt [splitterSettings]= "splitterSettings"[splitterPosition] = "50%">
</ej-gantt>		 Not applicable
To change splitter by position Property: splitterSettings.position

<ej-gantt [splitterSettings]= "splitterSettings">
</ej-gantt>
TS
this.splitterSettings = { position: "50%" };		 Property: splitterSettings.position

<ejs-gantt [splitterSettings]="splitterSettings">
</ejs-gantt>
TS
this.splitterSettings = { position: "50%" };
To change splitter by index Property: splitterSettings.index

<ej-gantt [splitterSettings]= "splitterSettings">
</ej-gantt>
TS
this.splitterSettings = { index : "3" };		 Property: splitterSettings.columnIndex

<ejs-gantt [splitterSettings]="splitterSettings">
</ejs-gantt>
TS
this.splitterSettings = { columnIndex : "3" };
To define view type of Gantt Property: viewType

<ej-gantt [viewType]= "viewType">
</ej-gantt>
TS
this.viewType = ej.Gantt.ViewType.ProjectView>
</ej-gantt>		 Not applicable
To enable Localization Property: locale

<ej-gantt locale="fr-FR">
</ej-gantt>		 Property: locale

<ejs-gantt locale="fr-FR">
</ejs-gantt>
To specify the date format for Gantt Property: dateFormat

<ej-gantt dateFormat= "dd/MM/yyyy">
</ej-gantt>		 Property: dateFormat

<ejs-gantt dateFormat= "dd/MM/yyyy">
</ejs-gantt>
To enable/disable key navigation Property: allowKeyboardNavigation

<ej-gantt [allowKeyboardNavigation]="true">
</ej-gantt>		 Property: allowKeyboard

<ejs-gantt [allowKeyboard]="true" >
</ejs-gantt>
To enable serial number support Property: enableSerialNumber

<ej-gantt [enableSerialNumber]="true">
</ej-gantt>		 Not applicable
To enable/disable predecessor validation Property: enablePredecessorValidation

<ej-gantt [enablePredecessorValidation]="true">
</ej-gantt>		 Property: enablePredecessorValidation

<ejs-gantt [enablePredecessorValidation]="true">
</ejs-gantt>
To set timescale for working hours Property: workingTimeScale

<ej-gantt [workingTimeScale]= "workingTimeScale">
</ej-gantt>
TS
this.workingTimeScale = ej.Gantt.workingTimeScale.TimeScale24Hours;		 Property: dayWorkingTime

<ejs-gantt [dayWorkingTime]="dayWorkingTime">
</ejs-gantt>
TS
this.dayWorkingTime = [ { from: 0, to: 24 } ];
To enable work break down structure in Gantt Property: enableWBS

<ej-gantt [enableWBS] ="true">
</ej-gantt>		 Not Applicable
To enable work break down structure predecessor in Gantt Property: enableWBSPredecessor

<ej-gantt [enableWBSPredecessor] ="true">
</ej-gantt>		 Not Applicable
To map work value from data source Property: workMapping

<ej-gantt workMapping = "estimatedHours">
</ej-gantt>		 Not applicable
To define work unit for tasks Property: workUnit

<ej-gantt [workUnit]= "workUnit">
</ej-gantt>
TS
this.workUnit = ej.Gantt.WorkUnit.Day;		 Not applicable
To define task type in Gantt Property: taskType

<ej-gantt [taskType]= "taskType">
</ej-gantt>
TS
this.taskType = ej.Gantt.TaskType.FixedWork;		 Not applicable
To enable/disable multiple exporting option Property: allowMultipleExporting

<ej-gantt [allowMultipleExporting]="true">
</ej-gantt>		 Not applicable
To enable virtual rendering in Gantt Property: enableVirtualization

<ej-gantt [enableVirtualization] ="true">
</ej-gantt>		 Not Applicable
Change splitter position dynamically Method: setSplitterIndex(index) setSplitterPosition(width)

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

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.setSplitterPosition('40%', 'position');

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

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

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.destroy();
To update task id Method: updateTaskId(currentId, newId)

export class AppComponent {
constructor() {
  //...
}
public updateTaskId(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.updateTaskId(5, 7);
}
}		 Not applicable
To set scroll top for Gantt Method: setScrollTop(top)

export class AppComponent {
constructor() {
  //...
}
public updateTaskId(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.setScrollTop(50);
}
}		 Method: setScrollTop()

@ViewChild('gantt')
public ganttObj: GanttComponent;
this.ganttObj.setScrollTop(200);
To get columns to edit in resource view Method: getResourceViewEditColumns()

export class AppComponent {
constructor() {
  //...
}
public getResourceViewEditColumns(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  columns = ganttObj.getResourceViewEditColumns()		 Not applicable
Show/hide critical path in Gantt Method: showCriticalPath(isShown)

export class AppComponent {
constructor() {
  //...
}
public showCriticalPath(event) {
  var ganttObj = $("#Gantt").ejGantt("instance");
  ganttObj.showCriticalPath(true);
}
}		 Not applicable
Triggers on initialization of Gantt control Event: load

<ej-gantt id="Gantt" (load)="load($event)">
</ej-gantt>
TS
load(event) { }		 Event: load

<ejs-gantt (load)="load($event)">
</ejs-gantt>
TS
public load(event) { }
Triggers after splitter resize action Event: splitterResized

<ej-gantt id="Gantt" (splitterResized)="splitterResized($event)">
</ej-gantt>
TS
splitterResized(event) { }		 Event: splitterResized

<ejs-gantt (splitterResized)="splitterResized($event)">
</ejs-gantt>
TS
public splitterResized(event) { }
Triggers when taskbar item is clicked Event: taskbarClick

<ej-gantt id="Gantt" (taskbarClick)="taskbarClick($event)">
</ej-gantt>
TS
taskbarClick(event) { }		 Not applicable
Previous
Next