ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in ASP.NET Core Gantt control

24 Sep 2021 / 23 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 id="Gantt" datasource="ViewBag.datasource">
</ej-gantt>		 Property: dataSource

<ejs-gantt id='Gantt' datasource="ViewBag.datasource">
</ejs-gantt>
To map id of task from data source Property: task-id-mapping

<ej-gantt id="Gantt" task-id-mapping="Id">
</ej-gantt>		 Property: taskFields.id

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields id="TaskId">
 </e-gantt-taskfields>
</ejs-gantt>
To map name of task from data source Property: task-name-mapping

<ej-gantt id="Gantt" task-name-mapping="Name">
</ej-gantt>		 Property: taskFields.name

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields name="TaskName">
 </e-gantt-taskfields>
</ejs-gantt>
To map start date from data source Property: start-date-mapping

<ej-gantt id="Gantt" start-date-mapping="StartDate">
</ej-gantt>		 Property: taskFields.startDate

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields startDate="StartDate">
 </e-gantt-taskfields>
</ejs-gantt>
To map end date from data source Property: end-date-mapping

<ej-gantt id="Gantt" end-date-mapping="EndDate">
</ej-gantt>		 Property: taskFields.endDate

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields endDate="EndDate">
 </e-gantt-taskfields>
</ejs-gantt>
To map duration from data source Property: duration-mapping

<ej-gantt id="Gantt" duration-mapping="Duration">
</ej-gantt>		 Property: taskFields.duration

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields duration="Duration">
 </e-gantt-taskfields>
</ejs-gantt>
To map duration unit from data source Property: duration-unit-mapping

<ej-gantt id="Gantt" duration-unit-mapping="DurationUnit">
</ej-gantt>		 Property: taskFields.durationUnit

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields durationUnit="DurationUnit">
 </e-gantt-taskfields>
</ejs-gantt>
To map predecessors from data source Property: predecessor-mapping

<ej-gantt id="Gantt" predecessor-mapping="Predecessor">
</ej-gantt>		 Property: taskFields.dependency

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields dependency="Predecessor">
 </e-gantt-taskfields>
</ejs-gantt>
To map progress from data source Property: progress-mapping

<ej-gantt id="Gantt" progress-mapping="PercentDone">
</ej-gantt>		 Property: taskFields.progress

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields progress="Progress">
 </e-gantt-taskfields>
</ejs-gantt>
To map child task from data source Property: child-mapping

<ej-gantt id="Gantt" child-mapping="Children">
</ej-gantt>		 Property: taskFields.child

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields child="SubTasks">
 </e-gantt-taskfields>
</ejs-gantt>
To map baseline start date from data source Property: baseline-start-date-mapping

<ej-gantt id="Gantt" baseline-start-date-mapping="BaselineStartDate">
</ej-gantt>		 Property: taskFields.baselineStartDate

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields baselineStartDate="BaselineStartDate">
 </e-gantt-taskfields>
</ejs-gantt>
To map baseline end date from data source Property: baseline-end-date-mapping

<ej-gantt id="Gantt" baseline-end-date-mapping="BaselineEndDate">
</ej-gantt>		 Property: taskFields.baselineEndDate

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields baselineEndDate="BaselineEndDate">
 </e-gantt-taskfields>
</ejs-gantt>
To map milestone mapping from data source Property: milestone-mapping

<ej-gantt id="Gantt" milestone-mapping="IsMilestone">
</ej-gantt>		 Property: taskFields.milestone

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields milestone="IsMilestone">
 </e-gantt-taskfields>
</ejs-gantt>
To map notes from data source Property: notes-mapping

<ej-gantt id="Gantt" notes-mapping="notes">
</ej-gantt>		 Property: taskFields.notes

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields notes="Notes">
 </e-gantt-taskfields>
</ejs-gantt>
To map parent task id from data source Property: parent-task-id-mapping

<ej-gantt id="Gantt" parent-task-id-mapping="ParentId">
</ej-gantt>		 Property: taskFields.parentID

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields parentID="ParentId" >
 </e-gantt-taskfields>
</ejs-gantt>
To map assigned resources from data source Property: resource-info-mapping

<ej-gantt id="Gantt" resource-info-mapping="Resources">
</ej-gantt>		 Property: taskFields.resourceInfo

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields resourceInfo="ResourceId">
 </e-gantt-taskfields>
</ejs-gantt>
To map expand state from data source Property: expand-state-mapping

<ej-gantt id="Gantt" expand-state-mapping="IsExpanded">
</ej-gantt>		 Property: taskFields.expandState

<ejs-gantt id='Gantt'>
 <e-gantt-taskfields expandState="IsExpanded">
 </e-gantt-taskfields>
</ejs-gantt>

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allow-sorting

<ej-gantt id="Gantt" allow-sorting="true">
</ej-gantt>		 Property: allowSorting

<ejs-gantt id='Gantt' allowSorting="true">
</ejs-gantt>
To enable/disable multiple sorting option Property: allow-multi-sorting

<ej-gantt id="Gantt" allow-multi-sorting="true">
</ej-gantt>		 Property: allowSorting

<ejs-gantt id='Gantt' allowSorting="true">
</ejs-gantt>
Sort column Initially Property: sortSettings.sortedColumns

<ej-gantt id="Gantt" allow-sorting="true">
 <e-gantt-sort-settings>
  <e-gantt-sorted-columns>
   <e-gantt-sorted-column field="taskName" direction="Descending"></e-gantt-sorted-column>
  </e-gantt-sorted-columns>
 </e-gantt-sort-settings>
</ej-gantt>		 Property: sortSettings.columns

@{
List<GanttSortDescriptor> cols = new List<GanttSortDescriptor>();
cols.Add(new GanttSortDescriptor { Field = "TaskId", Direction =Syncfusion.EJ2.Gantt.SortDirection.Descending });
cols.Add(new GanttSortDescriptor { Field = "TaskName", Direction = Syncfusion.EJ2.Gantt.SortDirection.Ascending });
}

<ejs-gantt id='Gantt' allowSorting="true">
 <e-gantt-sortsettings columns="cols"></e-gantt-sortsettings>
</ejs-gantt>
Clear the Sorted columns Method: clearSorting()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.clearSorting();
<script>		 Method: clearSorting()

<ejs-gantt id="Gantt">
</ejs-gantt>

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.sortColumn("startDate","ascending");
<script>		 Method: sortColumn(columnName, direction,[isMultiSort])

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.sortColumn('startDate','ascending');
<script>

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Filter records in Gantt Method: filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase])

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.filterColumn("taskName", "startswith", "plan");
<script>		 Method: filterByColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase],[ignoreAccent])

<ejs-gantt id="Gantt">
</ejs-gantt>

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
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);
<script>		 Not applicable
Clear filtered columns Method: clearFilter()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.clearFilter();
<script>		 Method: clearFiltering()

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.clearFiltering();
<script>

Searching

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

<ej-gantt id="Gantt">
 <e-gantt-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "search" })" />
</ej-gantt>		 Property: toolbar

<ejs-gantt id='Gantt' toolbar="@(new List<string>() { "Search" })">
</ejs-gantt>
Search records in Gantt Method: searchItem(key)

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.searchItem("plan");
<script>		 Method: search(key)

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.search('plan');
<script>

Selection

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

<ej-gantt id="Gantt" allow-selection="true">
</ej-gantt>		 Property: allowSelection

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

<ej-gantt id="Gantt" selection-type="Multiple"
</ej-gantt>		 Property: selectionSettings.type

<ejs-gantt id='Gantt'>
<e-gantt-selectionSettings type="Multiple"></e-gantt-selectionSettings>
</ejs-gantt>
To define selection mode in Gantt Property: selectionMode

<ej-gantt id="Gantt" selection-mode="Row"
</ej-gantt>		 Property: selectionSettings.mode

<ejs-gantt id='Gantt'>
<e-gantt-selectionsettings mode="Both"></e-gantt-selectionsettings>
</ejs-gantt>
Select Row by Index Property: selectedRowIndex

<ej-gantt id="Gantt" selected-row-index=3>
</ej-gantt>		 Property: selectedRowIndex

<ejs-gantt selectedRowIndex="3">
<ejs-gantt>
To define selected cell index in Gantt Property: selectedCellIndexes

<ej-gantt id="Gantt" selected-cell-indexes=[ ]>
</ej-gantt>		 Not applicable
Select Multiple Cells Method: selectCells(Indexes,preservePreviousSelectedCell)

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}];
ganttObj.selectCells(indexes, true);
<script>		 Not Applicable
Select multiple Rows Method: selectMultipleRows(rowIndexes)

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.selectMultipleRows([1,2,3]);
<script>		 Method: selectRows(key)

<ejs-gantt id="Gantt">
</ejs-gantt>

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

<ej-gantt id="Gantt"
cell-selected="cellSelected">
</ej-gantt>

Script:
<script>
function cellSelected(args) { }
</script>		 Event: cellSelected

<ejs-gantt id="Gantt"
cellSelected="cellSelected"">
</ejs-gantt>

Script:
<script>
function cellSelected(args) { }
</script>
Triggers on cell selection action Event: cellSelecting

<ej-gantt id="Gantt"
cell-selecting="cellSelecting">
</ej-gantt>

Script:
<script>
function cellSelecting(args) { }
</script>		 Event: cellSelecting

<ejs-gantt id="Gantt"
cellSelecting="cellSelecting">
</ejs-gantt>

Script:
<script>
function cellSelecting(args) { }
</script>
Triggers after row selection action Event: rowSelected

<ej-gantt id="Gantt"
row-selected="rowSelected">
</ej-gantt>

Script:
<script>
function rowSelected(args) { }
</script>		 Event: rowSelected

<ejs-gantt id="Gantt"
rowSelected="rowSelected">
</ejs-gantt>

Script:
<script>
function rowSelected(args) { }
</script>
Triggers before row selection action Event: rowSelecting

<ej-gantt id="Gantt"
row-selecting="rowSelecting">
</ej-gantt>

Script:
<script>
function rowSelecting(args) { }
</script>		 Event: rowSelecting

<ejs-gantt id="Gantt"
rowSelecting="rowSelecting">
</ejs-gantt>

Script:
<script>
function rowSelecting(args) { }
</script>

Editing

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

<ej-gantt id="Gantt">
 <e-gantt-edit-settings allow-editing="true" allow-adding="true" allow-deleting="true" show-delete-confirm-dialog="true" />
</ej-gantt>		 Property: editSettings

<ejs-gantt id='Gantt'>
 <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
</ejs-gantt>
Cell Editing Property: editSettings.editMode

<ej-gantt id="Gantt">
 <e-gantt-edit-settings allow-editing="true" edit-mode="cellEditing"></e-gantt-edit-settings>
</ej-gantt>		 Property: editSettings.mode

<ejs-gantt id='Gantt'>
 <e-gantt-editsettings allowEditing="true" mode="Auto"></e-gantt-editsettings>
</ejs-gantt>
Dialog Editing Property: editSettings.editMode

ej-gantt id="Gantt">
 <e-gantt-edit-settings allow-editing="true" edit-mode="normal"></e-gantt-edit-settings>
</ej-gantt>		 Property: editSettings.mode

<ejs-gantt id='Gantt'>
 <e-gantt-editsettings allowEditing="true" mode="Dialog"></e-gantt-editsettings>
</ejs-gantt>
To enable/disable taskbar editing Property: allowGanttChartEditing

<ej-gantt id="Gantt" allow-gantt-chart-editing="true">
</ej-gantt>		 Property: editSettings.allowTaskbarEditing
<ejs-gantt id='Gantt'>
 <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings>
</ejs-gantt>
To enable progressbar resizing Property: enableProgressBarResizing

<ej-gantt id="Gantt" enable-progress-bar-resizing="true">
</ej-gantt>		 Property: editSettings.allowTaskbarEditing

<ejs-gantt id='Gantt'>
 <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings>
</ejs-gantt>
To enable indent/ outdent option Property: editSettings.allowIndent

<ej-gantt id="Gantt">
<e-gantt-edit-settings allow-indent="true" />
</ej-gantt>		 Not applicable
To define click or double click action to begin edit action Property: editSettings.beginEditAction

<ej-gantt id="Gantt">
<e-gantt-edit-settings begin-edit-action="Click"></e-gantt-edit-settings>
</ej-gantt>		 Not applicable
To define new row position in Gantt Property: editSettings.rowPosition

<ej-gantt id="Gantt">
<e-gantt-edit-settings row-position="AboveSelectedRow"></e-gantt-edit-settings>
</ej-gantt>		 Property: editSettings.newRowPosition

<ejs-gantt id="Gantt">
<e-gantt-edit-settings newRowPosition="Below"></e-gantt-edit-settings>
</ejs-gantt>
To define fields in edit dialog Property: editDialogFields

<ej-gantt id="Gantt">
<e-edit-dialog-fields>
 <e-edit-dialog-field field="TaskID" edit-type="stringedit"></e-edit-dialog-field>
 <e-edit-dialog-field field="StartDate" edit-type="datepicker"></e-edit-dialog-field>
</e-edit-dialog-fields>
</ej-gantt>		 Property: editDialogFields

<ejs-gantt id='Gantt'>
<e-gantt-editdialogfields>
 <e-gantt-editdialogfield field="TaskID" edit-type="stringedit"></e-gantt-editdialogfield>
 <e-gantt-editdialogfield field="StartDate" edit-type="datepicker"></e-gantt-editdialogfield>
</e-gantt-editdialogfields>
</ej-gantt>
To define fields in add dialog Property: addDialogFields

<ej-gantt id="Gantt">
<e-add-dialog-fields>
 <e-add-dialog-field field="taskName" edit-type="stringedit"></e-add-dialog-field>
 <e-add-dialog-field field="StartDate" edit-type="datepicker"></e-add-dialog-field>
</e-add-dialog-fields>
</ej-gantt>		 Property: addDialogFields

<ejs-gantt id='Gantt'>
<e-gantt-adddialogfields>
 <e-gantt-adddialogfield type="General" headerText="General Tab"></e-gantt-adddialogfield >
 <e-gantt-adddialogfield type="Dependency"></e-gantt-adddialogfield>
</e-gantt-adddialogfields>
</ej-gantt>
To make Gantt as read only Property: readOnly

<ej-gantt id="Gantt" read-only="true">
</ej-gantt>		 Not Applicable
To open Edit dialog Method: openEditDialog()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.openEditDialog();
<script>		 Method: openEditDialog()

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.openEditDialog();
<script>
To open Add dialog Method: openAddDialog()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.openAddDialog();
<script>		 Method: openAddDialog()

<ejs-gantt id="Gantt">
</ejs-gantt>

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
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);
<script>		 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);
<script>
Delete selected item Method: deleteItem()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.deleteItem();
<script>		 Method: deleteRecord()

<ejs-gantt id="Gantt">
</ejs-gantt>

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

<ej-gantt id="Gantt">
</ej-gantt>

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

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.deleteDependency(3, 6);
<script>		 Not applicable
Save Edit Method: saveEdit()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.saveEdit();
<script>		 Not applicable
Cancel Edit Method: cancelEdit()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
cancelEdit var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.cancelEdit();
<script>		 Method: cancelEdit()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.cancelEdit()
<script>
Triggers for every Gantt action before it get started Event: actionBegin

<ej-gantt id="Gantt"
action-begin="actionBegin">
</ej-gantt>

Script:
<script>
function actionBegin(args) { }
</script>		 Event: actionBegin

<ejs-gantt id="Gantt"
actionBegin="actionBegin">
</ejs-gantt>

Script:
<script>
function actionBegin(args) { }
</script>
Triggers for after every Gantt action completed Event: actionComplete

<ej-gantt id="Gantt"
action-complete="actionComplete">
</ej-gantt>

Script:
<script>
function actionComplete(args) { }
</script>		 Event: actionComplete

<ejs-gantt id="Gantt"
actionComplete="actionComplete">
</ejs-gantt>

Script:
<script>
function actionComplete(args) { }
</script>
Triggers while resizing, dragging the taskbar Event: taskbarEditing

<ej-gantt id="Gantt"
taskbar-editing="taskbarEditing">
</ej-gantt>

Script:
<script>
function taskbarEditing(args) { }
</script>		 Event: taskbarEditing

<ejs-gantt id="Gantt"
taskbarEditing="taskbarEditing">
</ejs-gantt>

Script:
<script>
function taskbarEditing(args) { }
</script>
Triggers after taskbar resize, drag action Event: taskbarEdited

<ej-gantt id="Gantt"
taskbar-edited="taskbarEdited">
</ej-gantt>

Script:
<script>
function taskbarEdited(args) { }
</script>		 Event: taskbarEdited

<ejs-gantt id="Gantt"
taskbarEdited="taskbarEdited">
</ejs-gantt>

Script:
<script>
function taskbarEdited(args) { }
</script>

Columns

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

<ej-gantt id="Gantt" allow-column-resize="true">
</ej-gantt>		 Property: allowResizing

<ejs-gantt id='Gantt' allowResizing="true">
<ejs/gantt>
To enable/disable column chooser Property: showColumnChooser

<ej-gantt id="Gantt" show-column-chooser="true">
</ej-gantt>		 Property: showColumnMenu

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

<ej-gantt id="Gantt" show-column-options="true">
</ej-gantt>		 Not applicable
Tree column index Property: treeColumnIndex

<ej-gantt id="Gantt" tree-column-index=1>
</ej-gantt>		 Property: treeColumnIndex

<ejs-gantt id='Gantt' treeColumnIndex="2">
</ejs-gantt>
To define column fields in column menu Property: columnDialogFields

<ej-gantt id="Gantt" column-dialog-fields="@(new List<string>() {"field", "headerText", "editType" })">
</ej-gantt>		 Not applicable
Show column Method: showColumn(headerText)

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.showColumn("Task Name");
<script>		 Method: showColumn(keys, showBy)

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.showColumn("TaskName");
<script>
Hide column Method: hideColumn(headerText)

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.hideColumn("Task Name");
<script>		 Method: hideColumn(keys, showBy)

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.hideColumn("TaskName");
<script>

Toolbar

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

<ej-gantt id="Gantt">
<e-gantt-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "add","edit","delete","update","cancel","expandAll","collapseAll"
"search","prevTimeSpan","nextTimeSpan" })">
</e-gantt-toolbar-settings>
</ej-gantt>		 Property: toolbar

<ejs-gantt id='Gantt' toolbar="@(new List<string>() { "Add", "Cancel", "CollapseAll", "Delete", "Edit", "ExpandAll", "NextTimeSpan", "PrevTimeSpan", "Search", "Update" })">
</ejs-gantt>
Other toolbars Property: toolbarSettings.toolbarItems

<ej-gantt id="Gantt">
<e-gantt-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "indent","outdent","criticalPath","excelExport","pdfExport" })">
</e-gantt-toolbar-settings>
</ej-gantt>		 Not applicable
Custom toolbar Property: toolbarSettings.customToolbarItems

<ej-gantt id="Gantt">
<e-gantt-toolbar-settings show-toolbar="true" custom-toolbar-items="@(new List<string>() { [{ text: "ShowBaseline", tooltipText: "Show Baseline" }, { text: "Reset", tooltipText:"Reset" }] }" />		 Property: toolbar

@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add(new { text = "Test", tooltipText = "Test", id = "Test" });
}

<ejs-gantt id='Gantt' toolbar=toolbarItems>
</ejs-gantt>
Triggers when toolbar items clicked Event: toolbarClick

<ej-gantt id="Gantt"
toolbar-click="toolbarClick">
</ej-gantt>

Script:
<script>
function toolbarClick(args) { }
</script>		 Event: toolbarClick

<ejs-gantt id="Gantt"
toolbarClick="toolbarClick">
</ejs-gantt>

Script:
<script>
function toolbarClick(args) { }
</script>

ToolTip

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

<ej-gantt id="Gantt" enable-taskbar-tooltip="true">
</ej-gantt>		 Property: tooltipSettings.showTooltip

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings showTooltip="true">
</e-gantt-tooltipsettings>
></ejs-gantt>
To define tooltip for all cells Property: cellTooltipTemplate

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

<ej-gantt id="Gantt" drag-tooltip= "dragTooltip">
</ej-gantt>		 Not applicable
To enable taskbar editing tooltip Property: enableTaskbarDragTooltip

<ej-gantt id="Gantt" enable-taskbar-drag-tooltip="true">
</ej-gantt>		 Not Applicable
To enable/disable tooltip for grid cells Property: showGridCellTooltip

<ej-gantt id="Gantt" show-grid-cell-tooltip="true">
</ej-gantt>		 Not applicable
To enable/disable tooltip for grid cells Property: showGridExpandCellTooltip

<ej-gantt id="Gantt" show-grid-expand-cell-tooltip="true">
</ej-gantt>		 Not applicable
To define taskbar tooltip template in Gantt Property: taskbarTooltipTemplate

<ej-gantt id="Gantt" taskbar-tooltip-template="tooltipTemplate">
</ej-gantt>		 Property: tooltipSettings.taskbar

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings taskbar="taskbarTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>
To define taskbar tooltip template id in Gantt Property: taskbarTooltipTemplateId

<ej-gantt id="Gantt" taskbar-tooltip-template-id="tooltipTemplateID">
</ej-gantt>		 Property: tooltipSettings.taskbar

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings taskbar="#taskbarTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>
To define tooltip template for connector line Property: predecessorTooltipTemplate

<ej-gantt id="Gantt" predecessor-tooltip-template="ToolTipTemplate">
</ej-gantt>		 Property: tooltipSettings.connectorLine

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings connectorLine="dependencyLineTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>
To define template for progress resize tooltip Property: progressbarTooltipTemplate

<ej-gantt id="Gantt" progressbar-tooltip-template="progressbar_editing_tooltip_template">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings editing="editingTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>
To define template id for progress resize tooltip Property: progressbarTooltipTemplateId

<ej-gantt id="Gantt" progressbar-tooltip-template-id="progressbar_editing_tooltip_template">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings editing="#editingTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>
To define tooltip template for taskbar edit action Property: taskbarEditingTooltipTemplate

<ej-gantt id="Gantt" taskbar-editing-tooltip-template="TaskbarEditingTooltipTemplate">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings editing="editingTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>
To define tooltip template id for taskbar edit action Property: taskbarEditingTooltipTemplateId

<ej-gantt id="Gantt" taskbar-editing-tooltip-template-id="TaskbarEditingTooltipTemplate">
</ej-gantt>		 Property: tooltipSettings.editing

<ejs-gantt id='Gantt'>
 <e-gantt-tooltipsettings editing="#editingTooltip">
</e-gantt-tooltipsettings>
</ejs-gantt>

Timeline

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

<ej-gantt id="Gantt" <e-schedule-header-settings week-header-format="MMM dd , yyyy" day-header-format="dd,MM,yy" year-header-format="yyyy" month-header-format="MMM yyyy" hour-header-format="HH" schedule-header-type="Week" minutes-per-interval="FiveMinutes" weekend-background="#F2F2F2" timescale-start-date-mode="Month" timescale-unit-size="100%" week-start-day=2 update-timescale-view="false">
<ej-gantt>		 Property: timelineSettings

<ejs-gantt id='Gantt'>
 <e-gantt-timelinesettings timelineViewMode="Week" timelineUnitSize="150" weekStartDay="3" showTooltip="true" weekendBackground="" updateTimescaleView="false">
  <e-timelinesettings-toptier unit="Month" format="MMM"></e-timelinesettings-toptier>
  <e-timelinesettings-bottomtier unit="Day"></e-timelinesettings-bottomtier>
 </e-gantt-timelinesettings>
</ejs-gantt>
To define weekend background in Gantt Property: weekendBackground

<ej-gantt id="Gantt" weekend-background= "blue">
</ej-gantt>;		 Not applicable
To Highlight weekends Property: highlightWeekends

<ej-gantt id="Gantt" highlight-weekends="true">>
</ej-gantt>;		 Property: highlightWeekends

<ejs-gantt id='Gantt' highlightWeekends="true">
</ejs-gantt>
To include weekends Property: includeWeekend

<ej-gantt id="Gantt" include-weekend="true">
</ej-gantt>;		 Property: includeWeekend

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

<ej-gantt id="Gantt" schedule-start-date = "3/20/2018">
</ej-gantt>		 Property: projectStartDate

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

<ej-gantt id="Gantt" schedule-end-date = "3/20/2018">
</ej-gantt>		 Property: projectEndDate

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

<ej-gantt id="Gantt">
</ej-gantt>

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

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.updateProjectDates("5/25/2017", "9/27/2017", true);
<script>

Rows

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

<ej-gantt id="Gantt" allow-drag-and-drop="true">
</ej-gantt>		 Not applicable
To enable/disable alternate row background Property: enableAltRow

<ej-gantt id="Gantt" enable-alt-row="true">
</ej-gantt>		 Not applicable
To add Row height Property: rowHeight

<ej-gantt id="Gantt" row-height=60>
</ej-gantt>		 Property: rowHeight

<ejs-gantt id='Gantt' rowHeight="60">
</ejs-gantt>
To render parent in collapsed state Property: enableCollapseAll

<ej-gantt id="Gantt" enable-collapse-all="true">
</ej-gantt>		 Property: collapseAllParentTasks

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.expandCollapseRecord(1);
<script>		 Method: collapseByID() expandByID()

<ejs-gantt id="Gantt">
</ejs-gantt>

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

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.expandAllItems();
<script>		 Method: expandAll()

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.expandAll();
<script>
Collapse all rows Method: collapseAllItems()

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.collapseAllItems();
<script>		 Method: collapseAll()

<ejs-gantt id="Gantt">
</ejs-gantt>

Script:
var ganttObj = document.getElementById('Gantt').ej2_instances[0];
ganttObj.collapseAll();
<script>
Triggers after row collapse action Event: collapsed

<ej-gantt id="Gantt"
Collapsed="collapsed">
</ej-gantt>

Script:
<script>
function collapsed(args) { }
</script>		 Event: collapsed

<ejs-gantt id="Gantt"
collapsed="collapsed">
</ejs-gantt>

Script:
<script>
function collapsed(args) { }
</script>
Triggers before row collapse action Event: collapsing

<ej-gantt id="Gantt"
collapsing="collapsing">
</ej-gantt>

Script:
<script>
function collapsing(args) { }
</script>		 Event: collapsing

<ejs-gantt id="Gantt"
collapsing="collapsing">
</ejs-gantt>

Script:
<script>
function collapsing(args) { }
</script>
Triggers after Gantt row was expanded Event: expanded

<ej-gantt id="Gantt"
expanded="expanded">
</ej-gantt>

Script:
<script>
function expanded(args) { }
</script>		 Event: expanded

<ejs-gantt id="Gantt"
expanded="expanded">
</ejs-gantt>

Script:
<script>
function expanded(args) { }
</script>
Triggers before Gantt row expand action Event: expanding

<ej-gantt id="Gantt"
expanding="expanding">
</ej-gantt>

Script:
<script>
function expanding(args) { }
</script>		 Event: expanding

<ejs-gantt id="Gantt"
expanding="expanding">
</ejs-gantt>

Script:
<script>
function expanding(args) { }
</script>
Triggers before grid rows render action Event: rowDataBound

<ej-gantt id="Gantt"
row-data-bound="rowDataBound">
</ej-gantt>

Script:
<script>
function rowDataBound(args) { }
</script>		 Event: rowDataBound

<ejs-gantt id="Gantt"
rowDataBound="rowDataBound">
</ejs-gantt>

Script:
<script>
function rowDataBound(args) { }
</script>
Triggers while dragging a row Event: rowDrag

<ej-gantt id="Gantt"
row-drag="rowDrag">
</ej-gantt>

Script:
<script>
function rowDrag(args) { }		 Not applicable
Triggers while while start to drag row Event: rowDragStart

<ej-gantt id="Gantt"
row-drag-start="rowDragStart">
</ej-gantt>

Script:
<script>
function rowDrag(args) { }		 Not applicable
Triggers while while drop a row Event: rowDragStop

<ej-gantt id="Gantt"
row-drag-stop="rowDragStop">
</ej-gantt>

Script:
<script>
function rowDrag(args) { }		 Not applicable

Resources

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

<ej-gantt id="Gantt" resources="ViewBag.resources">
</ej-gantt>		 Property: resources

<ejs-gantt id='Gantt' resources="ViewBag.projectResources">
</ejs-gantt>
To map resource id field from resource collection Property: resourceIdMapping

<ej-gantt id="Gantt" resource-id-mapping="ResourceId">
</ej-gantt>		 Property: resourceIDMapping

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

<ej-gantt id="Gantt" resource-name-mapping="ResourceName">
</ej-gantt>		 Property: resourceNameMapping

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

<ej-gantt id="Gantt" resource-unit-mapping="ResourceUnit">
</ej-gantt>		 Not applicable
To define resource view type of Gantt Property: viewType

<ej-gantt id="Gantt" view-type="ResourceView">
</ej-gantt>		 Not applicable
To define mapping property for resource collection in resource view Gantt Property: resourceCollectionMapping

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

<ej-gantt id="Gantt" task-collection-mapping="Tasks">
</ej-gantt>		 Not applicable
To map group id for resource view Gantt Property: groupIdMapping

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

<ej-gantt id="Gantt" group-name-mapping="TeamName">
</ej-gantt>		 Not Applicable

Baseline

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

<ej-gantt id="Gantt" render-baseline="true">
</ej-gantt>		 Property: renderBaseline

<ejs-gantt id='Gantt' renderBaseline="true">
</ejs-gantt>
To define baselineColor Property: baselineColor

<ej-gantt id="Gantt" baseline-color= "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 id="Gantt" enable-context-menu="true">
</ej-gantt>		 Property: enableContextMenu

<ejs-gantt id='Gantt' enableContextMenu="true">
</ejs-gantt>
To define custom menu items Event: contextMenuOpen

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

@{
List<object> contextItems = new List<object>();
contextItems.Add(new { text = "Collapse the Row", target = ".e-content", id = "collapserow" });
contextItems.Add(new { text = "Expand the Row", target = ".e-content", id = "expandrow" });
}

<ejs-gantt id='Gantt' contextMenuItems="contextItems">
</ejs-gantt>
Triggers before context menu opens Event: contextMenuOpen

<ej-gantt id="Gantt"
context-menu-open="contextMenuOpen">
</ej-gantt>

Script:
<script>
function contextMenuOpen(args) { }
</script>		 Event: contextMenuOpen

<ejs-gantt id="Gantt"
contextMenuOpen="contextMenuOpen">
</ejs-gantt>

Script:
<script>
function contextMenuOpen(args) { }
</script>

Scheduling Tasks

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

<ej-gantt id="Gantt" task-scheduling-mode="Auto">
</ej-gantt>		 Not applicable
To map task scheduling mode from data source Property: taskSchedulingModeMapping

<ej-gantt id="Gantt" task-scheduling-mode-mapping="IsManual">
</ej-gantt>		 Not applicable
To enable schedule date validation while task predecessor draw action Property: validateManualTasksOnLinking

<ej-gantt id="Gantt" validate-manual-tasks-on-linking="true">
</ej-gantt>		 Not applicable
To define working time range of day Property: dayWorkingTime

<ej-gantt id="Gantt">
 <e-gantt-day-working-time-collection>
  <e-gantt-day-working-time from="08:00 AM" to="12:00 PM"></e-gantt-day-working-time>
<e-gantt-day-working-time from="01:00 PM" to="05:00 PM"></e-gantt-day-working-time>
 </e-gantt-day-working-time-collection>
</ej-gantt>		 Property: dayWorkingTime

<ejs-gantt id='Gantt'>
 <e-gantt-dayworkingtimecollection>
  <e-gantt-dayworkingtime from="9" to="18"></e-gantt-dayworkingtime>
 </e-gantt-dayworkingtimecollection>
</ejs-gantt>
To enable rounding off date value in taskbar editing Property: roundOffDayworkingTime

<ej-gantt id="Gantt" round-off-dayworkingtime="true">
</ej-gantt>		 Not applicable
To define non-working background color Property: nonWorkingBackground

<ej-gantt id="Gantt" non-working-background="#B7C3D0">
</ej-gantt>		 Not Applicable
To highlight non working time range in Gantt Property: highlightNonWorkingTime

<ej-gantt id="Gantt" highlight-non-working-time="true">
</ej-gantt>		 Not Applicable
To set working days of a week Property: workweek

<ej-gantt id="Gantt" work-week="@(new List<string>() { "Sunday","Monday","Tuesday","Wednesday","Thursday" })">
</ej-gantt>		 Property: workWeek

<ejs-gantt id='Gantt' workWeek="@(new string[] { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday" })">
</ejs-gantt>
To enable/disable Unscheduled tasks Property: allowUnscheduledTask

<ej-gantt id="Gantt" allow-unscheduled-task = "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 id="Gantt" taskbar-background = "#F2F2F2">
</ej-gantt>		 Not applicable
To define background color for parent taskbar Property: parentTaskbarBackground

<ej-gantt id="Gantt" parent-taskbar-background= "#F2F2F2">
</ej-gantt>		 Not applicable
To add Taskbar height Property: taskbarHeight

<ej-gantt id="Gantt" taskbar-height=25 row-height=40>
</ej-gantt>		 Property: taskbarHeight

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

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

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

<ej-gantt id="Gantt" progressbar-height= "100">
</ej-gantt>		 Not Applicable
To render progress status taskbar Property: showProgressStatus

<ej-gantt id="Gantt" show-progress-status="true">
</ej-gantt>		 Property: labelSettings.taskLabel

<ejs-gantt id='Gantt'>
 <e-gantt-labelSettings taskLabel="${Progress}%"></e-gantt-labelSettings>
</ejs-gantt>
To set connectorline width Property: connectorlineWidth

<ej-gantt id="Gantt" connectorline-width="2">
</ej-gantt>		 Property: connectorLineWidth

<ejs-gantt id='Gantt' connectorLineWidth="3">
</ejs-gantt>
To set connectorline background Property: connectorLineBackground

<ej-gantt id="Gantt" connector-line-background="red">
</ej-gantt>		 Property: connectorLineBackground

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

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

<ej-gantt id="Gantt" taskbar-template="#TaskbarTemplate">
</ej-gantt>		 Property: taskbarTemplate

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

<ej-gantt id="Gantt" parent-taskbar-template="#parentTaskbarTemplate">
</ej-gantt>		 Property: parentTaskbarTemplate

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

<ej-gantt id="Gantt" milestone-template="#milestoneTemplate">
</ej-gantt>		 Property: milestoneTemplate

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

<ej-gantt id="Gantt" right-task-label-mapping="taskName">
</ej-gantt>		 Property: labelSettings.rightLabel

<ejs-gantt id='Gantt'>
 <e-gantt-labelSettings rightLabel="Task Name: ${taskData.TaskName}"></e-gantt-labelSettings>
</ejs-gantt>
To define left task label Property: leftTaskLabelMapping

<ej-gantt id="Gantt" left-task-label-mapping="taskID">
</ej-gantt>		 Property: labelSettings.leftLabel

<ejs-gantt id='Gantt'>
 <e-gantt-labelSettings leftLabel="TaskId"></e-gantt-labelSettings>
</ejs-gantt>
To define right task label template Property: rightTaskLabelTemplate

<ej-gantt id="Gantt" right-task-label-template="#rightLabelTemplate">
</ej-gantt>		 Property: labelSettings.rightLabel

<ejs-gantt id='Gantt'>
 <e-gantt-labelSettings rightLabel="#RightLabelTemplate"></e-gantt-labelSettings>
</ejs-gantt>
To define left task label template Property: leftTaskLabelTemplate

<ej-gantt id="Gantt" left-task-label-template="#leftLabelTemplate">
</ej-gantt>		 Property: labelSettings.leftLabel

<ejs-gantt id='Gantt'>
 <e-gantt-labelSettings leftLabel="#LeftlabelTemplate"></e-gantt-labelSettings>
</ejs-gantt>
To render resource names right to taskbar Property: showResourceNames

<ej-gantt id="Gantt" show-resource-names="true">
</ej-gantt>		 Property: labelSettings.rightLabel

<ejs-gantt id='Gantt'>
 <e-gantt-labelSettings rightLabel="${if(ResourceId)}${ResourceId}${/if}">></e-gantt-labelSettings>
</ejs-gantt>
To render task name left to taskbar Property: showTaskNames

<ej-gantt id="Gantt" show-task-names>
</ej-gantt>		 Property: labelSettings.leftLabel

<ejs-gantt id='Gantt'>
 <e-gantt-labelSettings rightLabel="Task Name: ${taskData.TaskName}"></e-gantt-labelSettings>
</ejs-gantt>
Triggers on taskbar rendering action Event: queryTaskbarInfo

<ej-gantt id="Gantt"
query-taskbar-info="queryTaskbarInfo">
</ej-gantt>

Script:
<script>
function queryTaskbarInfo(args) { }
</script>		 Event: queryTaskbarInfo

<ejs-gantt id="Gantt"
queryTaskbarInfo="queryTaskbarInfo">
</ejs-gantt>

Script:
<script>
function queryTaskbarInfo(args) { }
</script>
Triggers on grid cell rendering action Event: queryCellInfo

<ej-gantt id="Gantt"
query-cell-info="queryCellInfo">
</ej-gantt>

Script:
<script>
function queryCellInfo(args) { }
</script>		 Event: queryCellInfo

<ejs-gantt id="Gantt"
queryCellInfo="queryCellInfo">
</ejs-gantt>

Script:
<script>
function queryCellInfo(args) { }
</script>

Stripline

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

<ej-gantt id="Gantt">
 <e-strip-lines>
  <e-gantt-strip-line day="01/02/2014" label="Project Release" line-width=2 line-color="Darkblue" line-style="dotted"></e-gantt-strip-line>
 </e-strip-lines>
</ej-gantt>		 Property: eventMarkers

<ejs-gantt id='Gantt'>
 <e-gantt-eventmarkers>
  <e-gantt-eventmarker day="04/10/2019" label="Project approval and kick-off" cssClass="e-custom-event-marker"></e-gantt-eventmarker>
 </e-gantt-eventmarkers>
</ejs-gantt>

Holidays

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

<ej-gantt id="Gantt">
 <e-holidays>
  <e-holiday day="2/03/2014" label="Public holiday" background="yellowgreen"></e-holiday>
 </e-holidays>
</ej-gantt>		 Property: holidays

<ejs-gantt id='Gantt'>
 <e-gantt-holidays>
  <e-gantt-holiday from="04/11/2019" to="04/12/2019" label="Public holidays" cssClass="e-custom-holiday"></e-gantt-holiday>
 </e-gantt-holidays>
</ejs-gantt>
To define days in holiday collection Property: holidays.day

<ej-gantt id="Gantt">
 <e-holidays>
  <e-holiday day="2/03/2014"></e-holiday>
 </e-holidays>
</ej-gantt>		 Property: holidays.from

<ejs-gantt id='Gantt'>
 <e-gantt-holidays>
  <e-gantt-holiday from="04/11/2019"></e-gantt-holiday>
 </e-gantt-holidays>
</ejs-gantt>

Others

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

<ej-gantt id="Gantt">
 <e-gantt-size-settings height="450px" />
</ej-gantt>		 Property: height

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

<ej-gantt id="Gantt">
 <e-gantt-size-settings width="100%" />
</ej-gantt>		 Property: width

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

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

<ej-gantt id="Gantt">
 <e-splitter-settings position="50"></e-splitter-settings>
</ej-gantt>		 Property: splitterSettings.position

<ejs-gantt id='Gantt'>
 <e-gantt-splittersettings position="80%"></e-gantt-splittersettings>
</ejs-gantt>
To change splitter by index Property: splitterSettings.index

<ej-gantt id="Gantt">
 <e-splitter-settings index="3"></e-splitter-settings>
</ej-gantt>		 Property: splitterSettings.columnIndex

<ejs-gantt id='Gantt'>
 <e-gantt-splittersettings columnIndex = "3"></e-gantt-splittersettings>
</ejs-gantt>
To define view type of Gantt Property: viewType

<ej-gantt id="Gantt" view-type="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 date-format="dd/MM/yyyy">
</ej-gantt>		 Property: dateFormat

<ejs-gantt dateFormat="M/d/yyyy hh:mm:ss tt">
</ejs-gantt>
To enable/disable key navigation Property: allowKeyboardNavigation

<ej-gantt id="Gantt" allow-keyboard-navigation="true">
</ej-gantt>		 Property: allowKeyboard

<ejs-gantt id='Gantt' allowKeyboard="true" >
</ejs-gantt>
To enable serial number support Property: enableSerialNumber

<ej-gantt id="Gantt" enable-serial-number="true">
</ej-gantt>		 Not applicable
To enable/disable predecessor validation Property: enablePredecessorValidation

<ej-gantt id="Gantt" enable-predecessor-validation="true">
</ej-gantt>		 Property: enablePredecessorValidation

<ejs-gantt id='Gantt' enablePredecessorValidation="true">
</ejs-gantt>
To set timescale for working hours Property: workingTimeScale

<ej-gantt id="Gantt" working-time-scale="TimeScale24Hours">
</ej-gantt>		 Property: dayWorkingTime

<ejs-gantt id='Gantt'>
 <e-gantt-dayworkingtimecollection>
  <e-gantt-dayworkingtime from="0" to="24"></e-gantt-dayworkingtime>
 </e-gantt-dayworkingtimecollection>
</ejs-gantt>
To enable work break down structure in Gantt Property: enableWBS

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

<ej-gantt id="Gantt" enable-wbs-predecessor="true">
</ej-gantt>		 Not Applicable
To map work value from data source Property: workMapping

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

<ej-gantt id="Gantt" work-unit="Minute">
</ej-gantt>		 Not applicable
To define task type in Gantt Property: taskType

<ej-gantt id="Gantt" task-type="FixedWork">
</ej-gantt>		 Not applicable
To enable/disable multiple exporting option Property: allowMultipleExporting

<ej-gantt id="Gantt" allow-multiple-exporting="true">
</ej-gantt>		 Not applicable
To enable virtual rendering in Gantt Property: enableVirtualization

<ej-gantt id="Gantt" enable-virtualization="true">
</ej-gantt>		 Not Applicable
Change splitter position dynamically Method: SetSplitterIndex(Index) SetSplitterPosition(Width)

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.setSplitterIndex(3);

ganttObj.setSplitterPosition("40%");
<script>		 Method: setSplitterPosition(value,type)

<ejs-gantt id="Gantt">
</ejs-gantt>

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

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.destroy();
<script>		 Method: destroy()

<ejs-gantt id="Gantt">
</ejs-gantt>

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

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.updateTaskId(5, 7);
<script>		 Not applicable
To set scroll top for Gantt Method: SetScrollTop(top)

<ej-gantt id="Gantt">
</ej-gantt>

Script:
<script>
var ganttObj = $("#Gantt").data("ejGantt");
ganttObj.setScrollTop(50);
<script>		 Method: SetScrollTop()

<ejs-gantt id="Gantt">
</ejs-gantt>

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

<ej-gantt id="Gantt">
</ej-gantt>

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

<ej-gantt id="Gantt">
</ej-gantt>

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

<ej-gantt id="Gantt"
load="load">
</ej-gantt>

Script:
<script>
function load(args) { }
</script>		 Event: load

<ejs-gantt id="Gantt"
load="load">
</ejs-gantt>

Script:
<script>
function load(args) { }
</script>
Triggers after splitter resize action Event: splitterResized

<ej-gantt id="Gantt"
splitter-resized="splitterResized">
</ej-gantt>

Script:
<script>
function splitterResized(args) { }
</script>		 Event: splitterResized

<ejs-gantt id="Gantt"
splitterResized="splitterResized">
</ejs-gantt>

Script:
<script>
function splitterResized(args) { }
</script>
Triggers when taskbar item is clicked Event: taskbarClick

<ej-gantt id="Gantt"
taskbar-click="taskbarClick">
</ej-gantt>

Script:
<script>
function taskbarClick(args) { }		 Not applicable
Previous
Next