This topic shows the API equivalent of JS2 Gantt component to be used, while migrating your project that uses JS1 Gantt.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Data Binding | Property: Datasource @(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() |
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> |
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> |
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> |
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> |
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> |
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> |
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> |
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() |
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> |
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 |
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 |
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() |
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> |
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() |
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> |
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() |
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 |
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 |