Migration from Essential® JS 1

8 Dec 202424 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

@(Html.EJ().Gantt("Gantt")
.Datasource(ViewBag.datasource)
) 		Property: Datasource

@Html.EJS().Gantt("Gantt")
.DataSource((IEnumerable<object>)ViewBag.DataSource)
.Render()
To map id of task from data source Property: TaskIdMapping

@(Html.EJ().Gantt("Gantt")
.TaskIdMapping("Id")
) 		Property: TaskFields.Id

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Id("TaskId")).Render()
To map name of task from data source Property: TaskNameMapping

@(Html.EJ().Gantt("Gantt")
.TaskNameMapping("Id")
) 		Property: TaskFields.Name

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Name("TaskName").Render()
To map start date from data source Property: StartDateMapping

@(Html.EJ().Gantt("Gantt")
.StartDateMapping("StartDate")
) 		Property: TaskFields.StartDate

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.StartDate("StartDate")).Render()
To map end date from data source Property: EndDateMapping

@(Html.EJ().Gantt("Gantt")
.EndDateMapping("EndDate")
) 		Property: TaskFields.EndDate

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.EndDate("EndDate")).Render()
To map duration from data source Property: DurationMapping

@(Html.EJ().Gantt("Gantt")
.DurationMapping("Duration")
) 		Property: TaskFields.Duration

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Duration("Duration")).Render()
To map duration unit from data source Property: DurationUnitMapping

@(Html.EJ().Gantt("Gantt")
.DurationUnitMapping("DurationUnit")
) 		Property: TaskFields.DurationUnit

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.DurationUnit("DurationUnit")).Render()
To map predecessors from data source Property: PredecessorMapping

@(Html.EJ().Gantt("Gantt")
.PredecessorMapping("Predecessor")
) 		Property: TaskFields.Dependency

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Dependency("Predecessor")).Render()
To map progress from data source Property: ProgressMapping

@(Html.EJ().Gantt("Gantt")
.ProgressMapping("PercentDone")
) 		Property: TaskFields.Progress

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Progress("Progress")).Render()
To map child task from data source Property: ChildMapping

@(Html.EJ().Gantt("Gantt")
.ChildMapping("Children")
) 		Property: TaskFields.child

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Child("SubTasks")).Render()
To map baseline start date from data source Property: BaselineStartDateMapping

@(Html.EJ().Gantt("Gantt")
.BaselineStartDateMapping("baselineStartDate")
) 		Property: TaskFields.BaselineStartDate

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.BaselineStartDate("BaselineStartDate")).Render()
To map baseline end date from data source Property: BaselineEndDateMapping

@(Html.EJ().Gantt("Gantt")
.BaselineEndDateMapping("baselineEndDate")
) 		Property: TaskFields.BaselineEndDate

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.BaselineEndDate("BaselineEndDate")).Render()
To map milestone mapping from data source Property: MilestoneMapping

@(Html.EJ().Gantt("Gantt")
.MilestoneMapping("isMileStone")
) 		Property: TaskFields.Milestone

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Milestone("isMilestone")).Render()
To map notes from data source Property: NotesMapping

@(Html.EJ().Gantt("Gantt")
.NotesMapping("notesContent")
) 		Property: TaskFields.Notes

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.Notes("Notes")).Render()
To map parent task id from data source Property: ParentTaskIdMapping

@(Html.EJ().Gantt("Gantt")
.ParentTaskIdMapping("ParentId")
) 		Property: TaskFields.ParentId

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.ParentId("ParentId")).Render()
To map assigned resources from data source Property: ResourceInfoMapping

@(Html.EJ().Gantt("Gantt")
.ResourceInfoMapping("Resources")
) 		Property: TaskFields.ResourceInfo

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.ResourceInfo("ResourceId")).Render()
To map expand state from data source Property: ExpandStateMapping

@(Html.EJ().Gantt("Gantt")
.ExpandStateMapping("ExpandState")
) 		Property: TaskFields.ExpandState

@Html.EJS().Gantt("Gantt")
.TaskFields(ts => ts.ExpandState("isExpand")).Render()

Sorting

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AllowSorting

@(Html.EJ().Gantt("Gantt")
.AllowSorting(true)
) 		Property: AllowSorting

@Html.EJS().Gantt("Gantt")
.AllowSorting(true).Render()
To enable/disable multiple sorting option Property: AllowMultiSorting

@(Html.EJ().Gantt("Gantt")
.AllowMultiSorting(true)
) 		Property: AllowSorting

@Html.EJS().Gantt("Gantt")
.AllowSorting(true).Render()
Sort column Initially Property: SortSettings.SortedColumns

@(Html.EJ().Gantt("Gantt")
.AllowSorting(true)
.SortSettings(sort=>{
sort.SortedColumns(sorted => sorted.Field("taskName").Direction(SortOrder.Descending).Add());
})
) 		Property: SortSettings.Columns

@Html.EJS().Gantt("Gantt")
AllowSorting(true)
.SortSettings(ss=>
 ss.Columns(col=> {
col.Field("TaskName")
.Direction(Syncfusion.EJ2.Gantt.SortDirection.Ascending).Add();
})).Render()
Clear the Sorted columns Method: clearSorting()

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

Script:
<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 column Initially Property: FilterSettings.FilteredColumns

@(Html.EJ().Gantt("Gantt")
.FilterSettings(filter => {
 filter.FilteredColumns(filtered => {
  filtered.Value("plan").Field("taskName").Predicate("and")
 .Operator(FilterOperatorType.StartsWith).Add();
  });
  })
) 		Property: FilterSettings.Columns

@{
List<object> filterColumns = new List<object>();
filterColumns.Add(new { field = "TaskName", matchCase = false, @operator = "startswith", predicate = "and", value = "Identify" });
}

@Html.EJS().Gantt("Gantt")
.AllowFiltering(true)
.FilterSettings(filter => filter.Columns(filterColumns)).Render()
Filter records in Gantt Method: filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase])

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("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()

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

Script:
<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

@(Html.EJ().Gantt("Gantt")
.ToolbarSettings(toolbar=> {
 toolbar.ShowToolbar(true);
 toolbar.ToolbarItems(new List<GanttToolBarItems>() { GanttToolBarItems.Search });
})
) 		Property: Toolbar

@Html.EJS().Gantt("Gantt")
.Toolbar(new List<string>() { "Search" }).Render()
Search records in Gantt Method: searchItem(key)

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

Script:
<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

@(Html.EJ().Gantt("Gantt")
.AllowSelection(true)
) 		Property: AllowSelection

@Html.EJS().Gantt("Gantt")
.AllowSelection(true).Render()
To define selection type in Gantt Property: SelectionType

@(Html.EJ().Gantt("Gantt")
.SelectionType(GanttSelectionType.Multiple)
) 		Property: SelectionSettings.Type

@Html.EJS().Gantt("Gantt")
.SelectionSettings(ss => ss.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
To define selection mode in Gantt Property: SelectionMode

@(Html.EJ().Gantt("Gantt")
.SelectionMode(GanttSelectionMode.Row)
) 		Property: SelectionSettings.Mode

@Html.EJS().Gantt("Gantt")
.SelectionSettings(ss=>
ss.Mode(Syncfusion.EJ2.Grids.SelectionMode.Both)).Render()
Select Row by Index Property: SelectedRowIndex

@(Html.EJ().Gantt("Gantt")
.SelectedRowIndex(3)
) 		Property: SelectedRowIndex

@Html.EJS().Gantt("Gantt")
.SelectedRowIndex(3).Render()
To define selected cell index in Gantt Property: SelectedCellIndexes

@(Html.EJ().Gantt("Gantt")
.SelectedCellIndexes( [ ] )
) 		Not applicable
Select Multiple Cells Method: selectCells(Indexes,preservePreviousSelectedCell)

@(Html.EJ().Gantt("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)

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.CellSelected("cellSelected"))

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

@Html.EJS().Gantt("Gantt")
.CellSelected("cellSelected").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.CellSelecting("cellSelecting"))

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

@Html.EJS().Gantt("Gantt")
.CellSelecting("cellSelecting").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.RowSelected("rowSelected"))

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

@Html.EJS().Gantt("Gantt")
.RowSelected("rowSelected").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.RowSelecting("rowSelecting"))

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

@Html.EJS().Gantt("Gantt")
.RowSelecting("rowSelecting").Render()

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

Editing

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: EditSettings

@(Html.EJ().Gantt("Gantt")
.EditSettings(edit=> {
edit.AllowEditing(true);
edit.AllowAdding(true);
edit.AllowDeleting(true);
edit.ShowDeleteConfirmDialog(true);
})
) 		Property: EditSettings

@Html.EJS().Gantt("Gantt")
.EditSettings(es=>es.AllowEditing(true)
.AllowAdding(true)
.AllowDeleting(true)
.ShowDeleteConfirmDialog(true)).Render()
Cell Editing Property: EditSettings.editMode

@(Html.EJ().Gantt("Gantt")
.EditSettings(edit=> {
 edit.EditMode("cellEditing");
})
) 		Property: EditSettings.mode

@Html.EJS().Gantt("Gantt")
.EditSettings(es=>
es.Mode(Syncfusion.EJ2.Gantt.EditMode.Auto)).Render()
Dialog Editing Property: EditSettings.editMode

@(Html.EJ().Gantt("Gantt")
.EditSettings(edit=> {
 edit.EditMode("normal");
})
) 		Property: EditSettings.mode

@Html.EJS().Gantt("Gantt")
.EditSettings(es=>
es.Mode(Syncfusion.EJ2.Gantt.EditMode.Dialog)).Render()
To enable/disable taskbar editing Property: AllowGanttChartEditing

@(Html.EJ().Gantt("Gantt")
.AllowGanttChartEditing(true)
) 		Property: EditSettings.allowTaskbarEditing
@Html.EJS().Gantt("Gantt")
.EditSettings(es =>
es.AllowTaskbarEditing(true)).Render()
To enable progressbar resizing Property: EnableProgressBarResizing

@(Html.EJ().Gantt("Gantt")
.EnableProgressBarResizing(false)
) 		Property: EditSettings.allowTaskbarEditing

@Html.EJS().Gantt("Gantt")
.EditSettings(es =>
es.AllowTaskbarEditing(true)).Render()
To enable indent/ outdent option Property: EditSettings.allowIndent

@(Html.EJ().Gantt("Gantt")
.EditSettings(edit => {
 edit.AllowIndent(true);
})
) 		Not applicable
To define click or double click action to begin edit action Property: EditSettings.beginEditAction

@(Html.EJ().Gantt("Gantt")
.EditSettings(edit => {
 edit.BeginEditAction(GanttBeginEditAction.Click);
})
) 		Not applicable
To define new row position in Gantt Property: EditSettings.rowPosition

@(Html.EJ().Gantt("Gantt")
.EditSettings(edit=> {
edit.RowPosition(GanttRowPosition.Child);
})
) 		Property: EditSettings.newRowPosition

@Html.EJS().Gantt("Gantt")
.EditSettings(es=>
es.NewRowPosition(Syncfusion.EJ2.Gantt.RowPosition.Child))
.Render()
To define fields in edit dialog Property: EditDialogFields

@(Html.EJ().Gantt("Gantt")
.EditDialogFields(editDialog => {
 editDialog.Field("TaskID").EditType("stringedit").Add();
 editDialog.Field("TaskName").EditType("stringedit").Add();
})
) 		Property: EditDialogFields

@Html.EJS().Gantt("Gantt")
.EditDialogFields(edf =>> {
 edf.Type(Syncfusion.EJ2.Gantt.DialogFieldType.General)
 .HeaderText("General").Add();
 edf.Type(Syncfusion.EJ2.Gantt.DialogFieldType.Dependency)
.Add();
}).Render()
To define fields in add dialog Property: AddDialogFields

@(Html.EJ().Gantt("Gantt")
.AddDialogFields(addDialog => {
 addDialog.Field("TaskID").EditType("stringedit").Add();
 addDialog.Field("TaskName").EditType("stringedit").Add();
})
) 		Property: AddDialogFields

@Html.EJS().Gantt("Gantt")
.AddDialogFields(adf=> {
 adf.Type(Syncfusion.EJ2.Gantt.DialogFieldType.General)
.HeaderText("General Tab").Add();
 adf.Type(Syncfusion.EJ2.Gantt.DialogFieldType.Dependency)
.Add();
}).Render()
To make Gantt as read only Property: ReadOnly

@(Html.EJ().Gantt("Gantt")
.ReadOnly(true)
) 		Not Applicable
To open Edit dialog Method: openEditDialog()

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("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)

@Html.EJS().Gantt("Gantt").Render()

Script:
<script>
var data = {
  taskId:"40",
  taskName:"New Task 40",
  startDate:"2/20/2014",
  endDate:"2/25/2014"
};
ganttObj.addRecord(data, 'Below', 10);
</script>
Delete selected item Method: deleteItem()

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

Script:
<script>
var data = { taskID: 4, taskName: "updated value"};
ganttObj.updateRecordByID(data);
</script>
Delete dependency Method: deleteDependency(fromTaskId,toTaskId)

@(Html.EJ().Gantt("Gantt"))

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

@(Html.EJ().Gantt("Gantt"))

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

@(Html.EJ().Gantt("Gantt"))

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

@(Html.EJ().Gantt("Gantt"))

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.ActionBegin("actionBegin"))

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

@Html.EJS().Gantt("Gantt")
.ActionBegin("actionBegin").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.ActionComplete("actionComplete"))

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

@Html.EJS().Gantt("Gantt")
.ActionComplete("actionComplete").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.TaskbarEditing("taskbarEditing"))

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

@Html.EJS().Gantt("Gantt")
.TaskbarEditing("taskbarEditing").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.TaskbarEdited("taskbarEdited"))

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

@Html.EJS().Gantt("Gantt")
.TaskbarEdited("taskbarEdited").Render()

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

Columns

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

@(Html.EJ().Gantt("Gantt")
.AllowColumnResize(true)
) 		Property: AllowResizing

@Html.EJS().Gantt("Gantt")
.AllowResizing(true).Render()
To enable/disable column chooser Property: ShowColumnChooser

@(Html.EJ().Gantt("Gantt")
.ShowColumnChooser(true)
) 		Property: ShowColumnMenu

@Html.EJS().Gantt("Gantt")
.ShowColumnMenu(true).Render()
To enable/disable column add, remove option in column menu Property: ShowColumnOptions

@(Html.EJ().Gantt("Gantt")
.ShowColumnOptions(true)
) 		Not applicable
Tree column index Property: TreeColumnIndex

@(Html.EJ().Gantt("Gantt")
.TreeColumnIndex(2)
) 		Property: TreeColumnIndex

@Html.EJS().Gantt("Gantt")
.TreeColumnIndex(2).Render()
To define column fields in column menu Property: ColumnDialogFields

@(Html.EJ().Gantt("Gantt")
.ColumnDialogFields(new List <GanttColumnDialogFields>() {
 GanttColumnDialogFields.Field,
 GanttColumnDialogFields.HeaderText,
 GanttColumnDialogFields.EditType
})
) 		Not applicable
Show column Method: showColumn(headerText)

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

Script:
<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

@(Html.EJ().Gantt("Gantt")
.ToolbarSettings(toolbar => {
 toolbar.ShowToolbar(true);
 toolbar.ToolbarItems(new List<GanttToolBarItems>() {
  GanttToolBarItems.Add,
  GanttToolBarItems.Edit,
  GanttToolBarItems.Delete,
  GanttToolBarItems.Update,
  GanttToolBarItems.Cancel,
  GanttToolBarItems.ExpandAll,
  GanttToolBarItems.CollapseAll,
  GanttToolBarItems.Search,
  GanttToolBarItems.PrevTimeSpan,
  GanttToolBarItems.NextTimeSpan
 });,
})
) 		Property: Toolbar

@Html.EJS().Gantt("Gantt")
.Toolbar(new List<string>() { "Add", "Cancel", "CollapseAll", "Delete", "Edit", "ExpandAll","NextTimeSpan",
  "PrevTimeSpan", "Search", "Update" }).Render()
Other toolbars Property: ToolbarSettings.toolbarItems

@(Html.EJ().Gantt("Gantt")
.ToolbarSettings(toolbar => {
 toolbar.ShowToolbar(true);
 toolbar.ToolbarItems(new List<GanttToolBarItems>() {
  GanttToolBarItems.Indent,
  GanttToolBarItems.Outdent,
  GanttToolBarItems.CriticalPath,
  GanttToolBarItems.ExcelExport,
  GanttToolBarItems.PdfExport
]; 		Not applicable
Custom toolbar Property: ToolbarSettings.customToolbarItems

@(Html.EJ().Gantt("Gantt")
.ToolbarSettings(toolbar => {
 toolbar.ShowToolbar(true);
 toolbar.CustomToolbarItems(ct => {
  ct.TemplateID("#ColumnVisibility").TooltipText("Column Visibility").Add();
  ct.Text("Reset").TooltipText("Reset").Add();
 });
)}
) 		Property: Toolbar

@{
List<object> toolbarItems = new List<object>();
toolbarItems.Add(new { text = "Quick Filter", tooltipText = "Quick Filter", id = "toolbarfilter", align = "Right" });
}

@Html.EJS().Gantt("Gantt")
.Toolbar(toolbarItems).Render()
Triggers when toolbar items clicked Event: ToolbarClick

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.ToolbarClick("toolbarClick"))

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

@Html.EJS().Gantt("Gantt")
.ToolbarClick("toolbarClick").Render()

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

ToolTip

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

@(Html.EJ().Gantt("Gantt")
.EnableTaskbarTooltip(true)
) 		Property: TooltipSettings.showTooltip

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.ShowTooltip(true)).Render()
To define tooltip for all cells Property: CellTooltipTemplate

@(Html.EJ().Gantt("Gantt")
.CellTooltipTemplate("#CustomToolTip")
) 		Not applicable
To define tooltip template for row drag action Property: DragTooltip

@(Html.EJ().Gantt("Gantt")
.DragTooltip(tooltip => {
 tooltip.ShowTooltip(true);
})
) 		Not applicable
To enable taskbar editing tooltip Property: EnableTaskbarDragTooltip

@(Html.EJ().Gantt("Gantt")
.EnableTaskbarDragTooltip(true)
) 		Not Applicable
To enable/disable tooltip for grid cells Property: ShowGridCellTooltip

@(Html.EJ().Gantt("Gantt")
.ShowGridCellTooltip(true)
) 		Not applicable
To enable/disable tooltip for grid cells Property: ShowGridExpandCellTooltip

@(Html.EJ().Gantt("Gantt")
.ShowGridExpandCellTooltip(true)
) 		Not applicable
To define taskbar tooltip template in Gantt Property: TaskbarTooltipTemplate

@(Html.EJ().Gantt("Gantt")
TaskbarTooltipTemplate=" custom template tooltip string"
) 		Property: TooltipSettings.taskbar

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.Taskbar("custom template tooltip string")).Render()
To define taskbar tooltip template id in Gantt Property: TaskbarTooltipTemplateId

@(Html.EJ().Gantt("Gantt")
TaskbarTooltipTemplate="customtemplateID"
) 		Property: TooltipSettings.taskbar

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.Taskbar("#customtemplateID")).Render()
To define tooltip template for connector line Property: PredecessorTooltipTemplate

@(Html.EJ().Gantt("Gantt")
.PredecessorTooltipTemplate("ToolTipTemplate")
) 		Property: TooltipSettings.connectorLine

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.ConnectorLine("#dependencyLineTooltip")).Render()
To define template for progress resize tooltip Property: ProgressbarTooltipTemplate

@(Html.EJ().Gantt("Gantt")
.ProgressbarTooltipTemplate("progressbareditingtooltiptemplate")
) 		Property: TooltipSettings.editing

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.Editing("editingTooltip")).Render()
To define template id for progress resize tooltip Property: ProgressbarTooltipTemplateId

@(Html.EJ().Gantt("Gantt")
.ProgressbarTooltipTemplateId("progressbareditingtooltiptempID")
) 		Property: TooltipSettings.editing

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.Editing("#editingTooltip")).Render()
To define tooltip template for taskbar edit action Property: TaskbarEditingTooltipTemplate

@(Html.EJ().Gantt("Gantt")
.TaskbarEditingTooltipTemplate("taskbareditingtooltiptemplate")
) 		Property: TooltipSettings.editing

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.Editing("editingTooltip")).Render()
To define tooltip template id for taskbar edit action Property: TaskbarEditingTooltipTemplateId

@(Html.EJ().Gantt("Gantt")
.TaskbarEditingTooltipTemplateId("taskbareditingtooltiptempID")
) 		Property: TooltipSettings.editing

@Html.EJS().Gantt("Gantt")
.TooltipSettings(ts => ts.Editing("#editingTooltip")).Render()

Timeline

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

@(Html.EJ().Gantt("Gantt")
.ScheduleHeaderSettings(sh=>sh.WeekHeaderFormat("MMM dd , yyyy ")
.DayHeaderFormat("ddd ")
.YearHeaderFormat("yyyy")
.MonthHeaderFormat("MMM yyyy")
.HourHeaderFormat("HH")
.ScheduleHeaderType(GanttScheduleHeaderType.Week)
.MinutesPerInterval(GanttMinutesPerInterval.FiveMinutes)
.WeekendBackground("#F2F2F2")
.TimescaleStartDateMode(GanttTimescaleRoundMode.Month)
.TimescaleUnitSize("70%")
.WeekStartDay(3)
.UpdateTimescaleView(false))
) 		Property: TimelineSettings

@Html.EJS().Gantt("Gantt")
.TimelineSettings(ts=>
ts.TimelineViewMode(Syncfusion.EJ2.Gantt
.TimelineViewMode.Week)
 .TimelineUnitSize(150)
 .WeekStartDay(3)
 .ShowTooltip(true)
 .WeekendBackground("#F2F2F2")
 .UpdateTimescaleView(false)
 .TopTier(tt => tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Month)
.Format("MMM"))
 .BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day))
).Render()
To define weekend background in Gantt Property: WeekendBackground

@(Html.EJ().Gantt("Gantt")
.WeekendBackground("rgba(116, 195, 231, 0.26)")
) 		Not applicable
To Highlight weekends Property: HighlightWeekends

@(Html.EJ().Gantt("Gantt")
.HighlightWeekends(true)
) 		Property: HighlightWeekends

@Html.EJS().Gantt("Gantt")
.HighlightWeekends(true).Render()
To include weekends Property: IncludeWeekend

@(Html.EJ().Gantt("Gantt")
.IncludeWeekend(true)
) 		Property: IncludeWeekend

@Html.EJS().Gantt("Gantt")
.IncludeWeekend(true).Render()
To define project start date in Gantt Property: ScheduleStartDate

@(Html.EJ().Gantt("Gantt")
.ScheduleStartDate(“02/01/2014”)
) 		Property: ProjectStartDate

@Html.EJS().Gantt("Gantt")
.ProjectStartDate("03/24/2019").Render()
To define project end date in Gantt Property: ScheduleEndDate

@(Html.EJ().Gantt("Gantt")
.ScheduleEndDate(“03/14/2014”)
) 		Property: ProjectEndDate

@Html.EJS().Gantt("Gantt")
.ProjectEndDate("04/28/2019").Render()
Update project start date and end date Method: updateScheduleDates(startDate,endDate)

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

Script:
<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

@(Html.EJ().Gantt("Gantt")
.AllowDragAndDrop(true)
) 		Not applicable
To enable/disable alternate row background Property: EnableAltRow

@(Html.EJ().Gantt("Gantt")
.EnableAltRow(false)
) 		Not applicable
To add Row height Property: RowHeight

@(Html.EJ().Gantt("Gantt")
.RowHeight(60)
) 		Property: RowHeight

@Html.EJS().Gantt("Gantt")
.RowHeight(60).Render()
To render parent in collapsed state Property: EnableCollapseAll

@(Html.EJ().Gantt("Gantt")
.EnableCollapseAll(true)
) 		Property: CollapseAllParentTasks

@Html.EJS().Gantt("Gantt")
.CollapseAllParentTasks(true).Render()
Expand/collapse record by id Method: expandCollapseRecord(taskId)

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.Collapsed("collapsed"))

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

@Html.EJS().Gantt("Gantt").Collapsed("collapsed").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.Collapsing("collapsing"))

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

@Html.EJS().Gantt("Gantt").Collapsing("collapsing").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.Expanded("expanded"))

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

@Html.EJS().Gantt("Gantt").Expanded("expanded").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.Expanding("expanding"))

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

@Html.EJS().Gantt("Gantt").Expanding("expanding").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.RowDataBound("rowDataBound"))

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

@Html.EJS().Gantt("Gantt")
.RowDataBound("rowDataBound").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.RowDrag("rowDrag"))

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.RowDragStart("rowDragStart"))

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.RowDragStop("rowDragStop"))

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

Resources

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

@(Html.EJ().Gantt("Gantt")
.Resources(ViewBag.resource)
) 		Property: Resources

@Html.EJS().Gantt("Gantt")
.Resources((IEnumerable<object>)ViewBag.projectResources)
.Render()
To map resource id field from resource collection Property: ResourceIdMapping

@(Html.EJ().Gantt("Gantt")
.ResourceIdMapping("ResourceId")
) 		Property: ResourceIDMapping

@Html.EJS().Gantt("Gantt")
.ResourceIdMapping("ResourceId")
.Render()
To map resource name field from resource collection Property: ResourceNameMapping

@(Html.EJ().Gantt("Gantt")
.ResourceNameMapping("ResourceName")
) 		Property: ResourceNameMapping

@Html.EJS().Gantt("Gantt")
.ResourceNameMapping("ResourceName")
.Render()
To map resource unit field from assigned resource collection Property: ResourceUnitMapping

@(Html.EJ().Gantt("Gantt")
.ResourceUnitMapping("ResourceUnit") 		Not applicable
To define resource view type of Gantt Property: ViewType

@(Html.EJ().Gantt("Gantt")
.ViewType(GanttViewType.ResourceView) 		Not applicable
To define mapping property for resource collection in resource view Gantt Property: ResourceCollectionMapping

@(Html.EJ().Gantt("Gantt")
.ResourceCollectionMapping("Resources")
) 		Not Applicable
To map task collection from resources for resource view Gantt Property: TaskCollectionMapping

@(Html.EJ().Gantt("Gantt")
.TaskCollectionMapping("Tasks") 		Not applicable
To map group id for resource view Gantt Property: GroupIdMapping

@(Html.EJ().Gantt("Gantt")
.GroupIdMapping("TeamId")
) 		Not Applicable
To map group name for resource view Gantt Property: GroupNameMapping

@(Html.EJ().Gantt("Gantt")
.GroupNameMapping("TeamName")
) 		Not Applicable

Baseline

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

@(Html.EJ().Gantt("Gantt")
.RenderBaseline(true)
) 		Property: RenderBaseline

@Html.EJS().Gantt("Gantt")
.RenderBaseline(true).Render()
To define baselineColor Property: BaselineColor

@(Html.EJ().Gantt("Gantt")
.BaselineColor("#fba41c")
) 		Property: BaselineColor

@Html.EJS().Gantt("Gantt")
.BaselineColor("#fba41c")
.Render()

Context Menu

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

@(Html.EJ().Gantt("Gantt")
.EnableContextMenu(true)
) 		Property: EnableContextMenu

@Html.EJS().Gantt("Gantt")
.EnableContextMenu(true).Render()
To define custom menu items Event: ContextMenuOpen

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.ContextMenuOpen("contextMenuOpen"))

Script:
<script>
function contextMenuOpen() {
  event.contextMenuItems.push({
   headerText: "Expand/Collapse",
   menuId: "expand",
   iconPath: "url(Expand-02-WF.png)",
   eventHandler: function() {
     //event handler for custom menu items
   }
});
</script>
</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" });
}

@Html.EJS().Gantt("Gantt")
.ContextMenuItems(contextItems).Render()
Triggers before context menu opens Event: ContextMenuOpen

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.ContextMenuOpen("contextMenuOpen"))

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

@Html.EJS().Gantt("Gantt")
.ContextMenuOpen("contextMenuOpen").Render()

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

Scheduling Tasks

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

@(Html.EJ().Gantt("Gantt")
.TaskSchedulingMode(GanttTaskSchedulingMode.Auto)
) 		Not applicable
To map task scheduling mode from data source Property: TaskSchedulingModeMapping

@(Html.EJ().Gantt("Gantt")
tTaskSchedulingModeMapping("TaskMode")
) 		Not applicable
To enable schedule date validation while task predecessor draw action Property: ValidateManualTasksOnLinking

@(Html.EJ().Gantt("Gantt")
.ValidateManualTasksOnLinking(false)
) 		Not applicable
To define working time range of day Property: DayWorkingTime

@(Html.EJ().Gantt("Gantt")
.DayWorkingTime(dt => {
 dt.From("08:00 AM").To("12:00 PM").Background("#EBF5FB").Add();
 })
) 		Property: DayWorkingTime

@Html.EJS().Gantt("Gantt")
.DayWorkingTime(dw =>{dw.From(9).To(18).Add();}).Render()
To enable rounding off date value in taskbar editing Property: RoundOffDayworkingTime

@(Html.EJ().Gantt("Gantt")
.RoundOffDayworkingTime(true)
) 		Not applicable
To define non-working background color Property: NonWorkingBackground

@(Html.EJ().Gantt("Gantt")
.NonWorkingBackground("#B7C3D0")
) 		Not Applicable
To highlight non working time range in Gantt Property: HighlightNonWorkingTime

@(Html.EJ().Gantt("Gantt")
.HighlightNonWorkingTime(true)
) 		Not Applicable
To set working days of a week Property: Workweek

@(Html.EJ().Gantt("Gantt")
.WorkWeek(new List<string>() { "Sunday","Monday","Tuesday","Wednesday","Thursday" })
) 		Property: WorkWeek

@Html.EJS().Gantt("Gantt")
.WorkWeek(new string[] { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday" }).Render()
To enable/disable Unscheduled tasks Property: AllowUnscheduledTask

@(Html.EJ().Gantt("Gantt")
.AllowUnscheduledTask(true)
) 		Property: AllowUnscheduledTasks

@Html.EJS().Gantt("Gantt")
.AllowUnscheduledTasks(true)
.Render()

Appearance and Customizations

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

@(Html.EJ().Gantt("Gantt")
.TaskbarBackground("#1764d7")
) 		Not applicable
To define background color for parent taskbar Property: ParentTaskbarBackground

@(Html.EJ().Gantt("Gantt")
.ParentTaskbarBackground("#91dc88")
) 		Not applicable
To add Taskbar height Property: TaskbarHeight

@(Html.EJ().Gantt("Gantt")
.TaskbarHeight(30)
.RowHeight(40)
) 		Property: TaskbarHeight

@Html.EJS().Gantt("Gantt")
.RowHeight(60)
.TaskbarHeight(50).Render()
To define background color for parent progress bar Property: ParentProgressbarBackground

@(Html.EJ().Gantt("Gantt")
.ParentProgressbarBackground("#af2f2f")
) 		Not applicable
To define background color fro progress bar Property: ProgressbarBackground

@(Html.EJ().Gantt("Gantt")
.ProgressbarBackground("#8c83b1")
) 		Not applicable
To define height for progress bar Property: ProgressbarHeight

@(Html.EJ().Gantt("Gantt")
.ProgressbarHeight(80)
) 		Not Applicable
To render progress status taskbar Property: ShowProgressStatus

@(Html.EJ().Gantt("Gantt")
.ShowProgressStatus(true)
) 		Property: LabelSettings.taskLabel

@Html.EJS().Gantt("Gantt")
.LabelSettings(ls => ls.TaskLabel("${Progress}%")).Render()
To set connectorline width Property: ConnectorlineWidth

@(Html.EJ().Gantt("Gantt")
.ConnectorLineWidth(3)
) 		Property: ConnectorLineWidth

@Html.EJS().Gantt("Gantt")
.ConnectorLineWidth(3)
.Render()
To set connectorline background Property: ConnectorLineBackground

@(Html.EJ().Gantt("Gantt")
.ConnectorLineBackground("#0aecb8")
) 		Property: ConnectorLineBackground

@Html.EJS().Gantt("Gantt")
.ConnectorLineBackground("red").Render()
To define weekend background in Gantt Property: WeekendBackground

@(Html.EJ().Gantt("Gantt")
.WeekendBackground("rgba(116, 195, 231, 0.26)")
) 		Not applicable
To define taskbar template Property: TaskbarTemplate

@(Html.EJ().Gantt("Gantt")
.TaskbarTemplate("#taskbarTemplate")
) 		Property: TaskbarTemplate

@Html.EJS().Gantt("Gantt")
.TaskbarTemplate("#TaskbarTemplate")
.Render()
To define parent taskbar template Property: ParentTaskbarTemplate

@(Html.EJ().Gantt("Gantt")
.ParentTaskbarTemplate("#ParentTaskbarTemplate")
) 		Property: ParentTaskbarTemplate

@Html.EJS().Gantt("Gantt")
.ParentTaskbarTemplate("#ParentTaskbarTemplate")
.Render()
To define milestone template Property: MilestoneTemplate

@(Html.EJ().Gantt("Gantt")
.MilestoneTemplate("#milestoneTemplate")
) 		Property: MilestoneTemplate

@Html.EJS().Gantt("Gantt")
.MilestoneTemplate("#milestoneTemplate")
.Render()
To define right task label Property: RightTaskLabelMapping

@(Html.EJ().Gantt("Gantt")
.RightTaskLabelMapping("TaskID")
) 		Property: LabelSettings.rightLabel

@Html.EJS().Gantt("Gantt")
.LabelSettings(ls => ls.RightLabel("Task Name: ${taskData.TaskName}").Render()
To define left task label Property: LeftTaskLabelMapping

@(Html.EJ().Gantt("Gantt")
.LeftTaskLabelMapping("TaskName")
) 		Property: LabelSettings.leftLabel

@Html.EJS().Gantt("Gantt")
.LabelSettings(ls => ls.LeftLabel("TaskId").Render()
To define right task label template Property: RightTaskLabelTemplate

@(Html.EJ().Gantt("Gantt")
.RightTaskLabelTemplate("#rightLabelTemplate")
) 		Property: LabelSettings.rightLabel

@Html.EJS().Gantt("Gantt")
.LabelSettings(ls => ls.RightLabel("#RightTemplate").Render()
To define left task label template Property: LeftTaskLabelTemplate

@(Html.EJ().Gantt("Gantt")
.LeftTaskLabelTemplate("#leftLabelTemplate")
) 		Property: LabelSettings.leftLabel

@Html.EJS().Gantt("Gantt")
.LabelSettings(ls => ls.LeftLabel("#LeftTemplate").Render()
To render resource names right to taskbar Property: ShowResourceNames

@(Html.EJ().Gantt("Gantt")
.ShowResourceNames(true)
) 		Property: LabelSettings.rightLabel

@Html.EJS().Gantt("Gantt")
.LabelSettings(ls => ls.RightLabel(ResourceInfo).Render()
To render task name left to taskbar Property: ShowTaskNames

@(Html.EJ().Gantt("Gantt")
[showTaskNames]="true"
) 		Property: LabelSettings.leftLabel

@Html.EJS().Gantt("Gantt")
.LabelSettings("ls => ls.LeftLabel("TaskName").Render()
Triggers on taskbar rendering action Event: QueryTaskbarInfo

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.QueryTaskbarInfo("queryTaskbarInfo"))

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

@Html.EJS().Gantt("Gantt")
.QueryTaskbarInfo("queryTaskbarInfo").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.QueryCellInfo("queryCellInfo"))

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

@Html.EJS().Gantt("Gantt")
.QueryCellInfo("queryCellInfo").Render()

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

Stripline

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

@(Html.EJ().Gantt("Gantt")
.StripLines(new List<Syncfusion.JavaScript.Models.StripLine> {
new Syncfusion.JavaScript.Models.StripLine() {
 Day="03/02/2014",
 Label="Project Release",
 LineStyle="dotted",
 LineColor="blue",
 LineWidth=2},
})
) 		Property: EventMarkers

@Html.EJS().Gantt("Gantt")
.EventMarkers(em => {
 em.Day("04/10/2019")
.Label("Project approval and kick-off")
.CssClass("e-custom-event-marker").Add();
}).Render()

Holidays

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

@(Html.EJ().Gantt("Gantt")
.Holidays(new List<Syncfusion.JavaScript.Models.Holiday> {
new Syncfusion.JavaScript.Models.Holiday() {
 Day="2/03/2014",
 Background="YellowGreen",
 Label="Public holiday"
 },
})
) 		Property: Holidays

@Html.EJS().Gantt("Gantt")
.Holidays(hol=> {
hol.From("04/11/2019")
.To("04/12/2019")
.Label("Public holidays")
.CssClass("e-custom-holiday").Add();
}).Render
To define days in holiday collection Property: Holidays.day

@(Html.EJ().Gantt("Gantt")
.Holidays(new List<Syncfusion.JavaScript.Models.Holiday> {
new Syncfusion.JavaScript.Models.Holiday() {
 Day="2/03/2014"
 },
})
) 		Property: Holidays.from

@Html.EJS().Gantt("Gantt")
..Holidays(hol=> {
hol.From("04/11/2019").Add();
}).Render

Others

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

@(Html.EJ().Gantt("Gantt")
.SizeSettings(size=>size.Height("350px"))
) 		Property: Height

@Html.EJS().Gantt("Gantt")
.Height("450px").Render()
To define width for Gantt Property: SizeSettings.width

@(Html.EJ().Gantt("Gantt")
.SizeSettings(size=>size.Width("700px"))
) 		Property: Width

@Html.EJS().Gantt("Gantt")
.Width("700px").Render()
To change splitter position Property: SplitterPosition

@(Html.EJ().Gantt("Gantt")
.SplitterPosition("50%")
) 		Not applicable
To change splitter by position Property: SplitterSettings.Position

@(Html.EJ().Gantt("Gantt")
.SplitterSettings(sp=> sp.Position("60%"))
) 		Property: SplitterSettings.Position

@Html.EJS().Gantt("Gantt")
.SplitterSettings(ss=>ss.Position("80%")).Render()
To change splitter by index Property: SplitterSettings.Index

@(Html.EJ().Gantt("Gantt")
.SplitterSettings(sp=> sp.Index(3))
) 		Property: SplitterSettings.ColumnIndex

@Html.EJS().Gantt("Gantt")
.SplitterSettings(ss=>ss.ColumnIndex(3)).Render()
To define resource view type of Gantt Property: ViewType

@(Html.EJ().Gantt("Gantt")
.ViewType(GanttViewType.ProjectView) 		Not applicable
To enable Localization Property: Locale

@(Html.EJ().Gantt("Gantt")
.Locale("fr-FR")
) 		Property: Locale

@Html.EJS().Gantt("Gantt")
.Locale("fr-FR").Render()
To specify the date format for Gantt Property: DateFormat

@(Html.EJ().Gantt("Gantt")
.DateFormat("M/d/yyyy hh:mm:ss tt")
) 		Property: DateFormat

@Html.EJS().Gantt("Gantt")
.DateFormat("M/d/yyyy hh:mm:ss tt").Render()
To enable/disable key navigation Property: AllowKeyboardNavigation

@(Html.EJ().Gantt("Gantt")
.AllowKeyboardNavigation(true)
) 		Property: AllowKeyboard

@Html.EJS().Gantt("Gantt")
.AllowKeyboard(true).Render()
To enable serial number support Property: EnableSerialNumber

@(Html.EJ().Gantt("Gantt")
.EnableSerialNumber(true)
) 		Not applicable
To enable/disable predecessor validation Property: EnablePredecessorValidation

@(Html.EJ().Gantt("Gantt")
.EnablePredecessorValidation(false)
) 		Property: EnablePredecessorValidation

@Html.EJS().Gantt("Gantt")
.EnablePredecessorValidation(false).Render()
To set timescale for working hours Property: WorkingTimeScale

@(Html.EJ().Gantt("Gantt")
.WorkingTimeScale(GanttWorkingTimeScale.TimeScale24Hours)
) 		Property: DayWorkingTime

@Html.EJS().Gantt("Gantt")
.DayWorkingTime(dw =>{ dw.From(9).To(18).Add();
}).Render()
To enable work break down structure in Gantt Property: EnableWBS

@(Html.EJ().Gantt("Gantt")
.EnableWBS(true)
) 		Not Applicable
To enable work break down structure predecessor in Gantt Property: EnableWBSPredecessor

@(Html.EJ().Gantt("Gantt")
.EnableWBSPredecessor(true)
) 		Not Applicable
To map work value from data source Property: WorkMapping

@(Html.EJ().Gantt("Gantt")
.WorkMapping("estimatedWork")
) 		Not applicable
To define work unit for tasks Property: WorkUnit

@(Html.EJ().Gantt("Gantt")
.WorkUnit(GanttWorkUnit.Minute)
) 		Not applicable
To define task type in Gantt Property: TaskType

@(Html.EJ().Gantt("Gantt")
.TaskType(GanttTaskType.FixedWork)
) 		Not applicable
To enable/disable multiple exporting option Property: AllowMultipleExporting

@(Html.EJ().Gantt("Gantt")
.AllowMultipleExporting(true)
) 		Not applicable
To enable virtual rendering in Gantt Property: EnableVirtualization

@(Html.EJ().Gantt("Gantt")
.EnableVirtualization(true)
) 		Not Applicable
Change splitter position dynamically Method: SetSplitterIndex(Index) SetSplitterPosition(Width)

@(Html.EJ().Gantt("Gantt"))

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

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

@Html.EJS().Gantt("Gantt").Render()

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

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt"))

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

@(Html.EJ().Gantt("Gantt"))

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

@Html.EJS().Gantt("Gantt").Render()

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

@(Html.EJ().Gantt("Gantt"))

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

@(Html.EJ().Gantt("Gantt"))

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.Load("load"))

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

@Html.EJS().Gantt("Gantt").Load("load").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.SplitterResized("splitterResized"))

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

@Html.EJS().Gantt("Gantt")
.SplitterResized("splitterResized").Render()

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

@(Html.EJ().Gantt("Gantt").ClientSideEvents(e =>
e.TaskbarClick("taskbarClick"))

Script:
<script>
function taskbarClick(event) { } 		Not applicable