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 <ej-gantt id="Gantt" datasource="ViewBag.datasource"> </ej-gantt> |
Property: dataSource <ejs-gantt id='Gantt' datasource="ViewBag.datasource"> </ejs-gantt> |
To map id of task from data source | Property: task-id-mapping <ej-gantt id="Gantt" task-id-mapping="Id"> </ej-gantt> |
Property: taskFields.id <ejs-gantt id='Gantt'> <e-gantt-taskfields id="TaskId"> </e-gantt-taskfields> </ejs-gantt> |
To map name of task from data source | Property: task-name-mapping <ej-gantt id="Gantt" task-name-mapping="Name"> </ej-gantt> |
Property: taskFields.name <ejs-gantt id='Gantt'> <e-gantt-taskfields name="TaskName"> </e-gantt-taskfields> </ejs-gantt> |
To map start date from data source | Property: start-date-mapping <ej-gantt id="Gantt" start-date-mapping="StartDate"> </ej-gantt> |
Property: taskFields.startDate <ejs-gantt id='Gantt'> <e-gantt-taskfields startDate="StartDate"> </e-gantt-taskfields> </ejs-gantt> |
To map end date from data source | Property: end-date-mapping <ej-gantt id="Gantt" end-date-mapping="EndDate"> </ej-gantt> |
Property: taskFields.endDate <ejs-gantt id='Gantt'> <e-gantt-taskfields endDate="EndDate"> </e-gantt-taskfields> </ejs-gantt> |
To map duration from data source | Property: duration-mapping <ej-gantt id="Gantt" duration-mapping="Duration"> </ej-gantt> |
Property: taskFields.duration <ejs-gantt id='Gantt'> <e-gantt-taskfields duration="Duration"> </e-gantt-taskfields> </ejs-gantt> |
To map duration unit from data source | Property: duration-unit-mapping <ej-gantt id="Gantt" duration-unit-mapping="DurationUnit"> </ej-gantt> |
Property: taskFields.durationUnit <ejs-gantt id='Gantt'> <e-gantt-taskfields durationUnit="DurationUnit"> </e-gantt-taskfields> </ejs-gantt> |
To map predecessors from data source | Property: predecessor-mapping <ej-gantt id="Gantt" predecessor-mapping="Predecessor"> </ej-gantt> |
Property: taskFields.dependency <ejs-gantt id='Gantt'> <e-gantt-taskfields dependency="Predecessor"> </e-gantt-taskfields> </ejs-gantt> |
To map progress from data source | Property: progress-mapping <ej-gantt id="Gantt" progress-mapping="PercentDone"> </ej-gantt> |
Property: taskFields.progress <ejs-gantt id='Gantt'> <e-gantt-taskfields progress="Progress"> </e-gantt-taskfields> </ejs-gantt> |
To map child task from data source | Property: child-mapping <ej-gantt id="Gantt" child-mapping="Children"> </ej-gantt> |
Property: taskFields.child <ejs-gantt id='Gantt'> <e-gantt-taskfields child="SubTasks"> </e-gantt-taskfields> </ejs-gantt> |
To map baseline start date from data source | Property: baseline-start-date-mapping <ej-gantt id="Gantt" baseline-start-date-mapping="BaselineStartDate"> </ej-gantt> |
Property: taskFields.baselineStartDate <ejs-gantt id='Gantt'> <e-gantt-taskfields baselineStartDate="BaselineStartDate"> </e-gantt-taskfields> </ejs-gantt> |
To map baseline end date from data source | Property: baseline-end-date-mapping <ej-gantt id="Gantt" baseline-end-date-mapping="BaselineEndDate"> </ej-gantt> |
Property: taskFields.baselineEndDate <ejs-gantt id='Gantt'> <e-gantt-taskfields baselineEndDate="BaselineEndDate"> </e-gantt-taskfields> </ejs-gantt> |
To map milestone mapping from data source | Property: milestone-mapping <ej-gantt id="Gantt" milestone-mapping="IsMilestone"> </ej-gantt> |
Property: taskFields.milestone <ejs-gantt id='Gantt'> <e-gantt-taskfields milestone="IsMilestone"> </e-gantt-taskfields> </ejs-gantt> |
To map notes from data source | Property: notes-mapping <ej-gantt id="Gantt" notes-mapping="notes"> </ej-gantt> |
Property: taskFields.notes <ejs-gantt id='Gantt'> <e-gantt-taskfields notes="Notes"> </e-gantt-taskfields> </ejs-gantt> |
To map parent task id from data source | Property: parent-task-id-mapping <ej-gantt id="Gantt" parent-task-id-mapping="ParentId"> </ej-gantt> |
Property: taskFields.parentID <ejs-gantt id='Gantt'> <e-gantt-taskfields parentID="ParentId" > </e-gantt-taskfields> </ejs-gantt> |
To map assigned resources from data source | Property: resource-info-mapping <ej-gantt id="Gantt" resource-info-mapping="Resources"> </ej-gantt> |
Property: taskFields.resourceInfo <ejs-gantt id='Gantt'> <e-gantt-taskfields resourceInfo="ResourceId"> </e-gantt-taskfields> </ejs-gantt> |
To map expand state from data source | Property: expand-state-mapping <ej-gantt id="Gantt" expand-state-mapping="IsExpanded"> </ej-gantt> |
Property: taskFields.expandState <ejs-gantt id='Gantt'> <e-gantt-taskfields expandState="IsExpanded"> </e-gantt-taskfields> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allow-sorting <ej-gantt id="Gantt" allow-sorting="true"> </ej-gantt> |
Property: allowSorting <ejs-gantt id='Gantt' allowSorting="true"> </ejs-gantt> |
To enable/disable multiple sorting option | Property: allow-multi-sorting <ej-gantt id="Gantt" allow-multi-sorting="true"> </ej-gantt> |
Property: allowSorting <ejs-gantt id='Gantt' allowSorting="true"> </ejs-gantt> |
Sort column Initially | Property: sortSettings.sortedColumns <ej-gantt id="Gantt" allow-sorting="true"> <e-gantt-sort-settings> <e-gantt-sorted-columns> <e-gantt-sorted-column field="taskName" direction="Descending"></e-gantt-sorted-column> </e-gantt-sorted-columns> </e-gantt-sort-settings> </ej-gantt> |
Property: sortSettings.columns @{ List<GanttSortDescriptor> cols = new List<GanttSortDescriptor>(); cols.Add(new GanttSortDescriptor { Field = "TaskId", Direction =Syncfusion.EJ2.Gantt.SortDirection.Descending }); cols.Add(new GanttSortDescriptor { Field = "TaskName", Direction = Syncfusion.EJ2.Gantt.SortDirection.Ascending }); } <ejs-gantt id='Gantt' allowSorting="true"> <e-gantt-sortsettings columns="cols"></e-gantt-sortsettings> </ejs-gantt> |
Clear the Sorted columns | Method: clearSorting() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.clearSorting(); <script> |
Method: clearSorting() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.clearSorting(); <script> |
Sort records in Gantt | Method: sortColumn(mappingName, columnSortDirection) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.sortColumn("startDate","ascending"); <script> |
Method: sortColumn(columnName, direction,[isMultiSort]) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.sortColumn('startDate','ascending'); <script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Filter records in Gantt | Method: filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase]) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.filterColumn("taskName", "startswith", "plan"); <script> |
Method: filterByColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase],[ignoreAccent]) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.filterByColumn('taskName', 'startswith', 'plan'); <script> |
Filter multiple columns | Method: filterContent(ejPredicate) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); var predicate = ej.Predicate("taskName", ej.FilterOperators.equal, "planning", false) .or("taskName", ej.FilterOperators.equal, "plan budget", false) .and("progress", ej.FilterOperators.equal, 100, true); ganttObj.filterContent(ejPredicate); <script> |
Not applicable |
Clear filtered columns | Method: clearFilter() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.clearFilter(); <script> |
Method: clearFiltering() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.clearFiltering(); <script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: toolbarSettings.toolbarItems <ej-gantt id="Gantt"> <e-gantt-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "search" })" /> </ej-gantt> |
Property: toolbar <ejs-gantt id='Gantt' toolbar="@(new List<string>() { "Search" })"> </ejs-gantt> |
Search records in Gantt | Method: searchItem(key) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.searchItem("plan"); <script> |
Method: search(key) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.search('plan'); <script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allowSelection <ej-gantt id="Gantt" allow-selection="true"> </ej-gantt> |
Property: allowSelection <ejs-gantt id='Gantt' allowSelection="true"> </ejs-gantt> |
To define selection type in Gantt | Property: selectionType <ej-gantt id="Gantt" selection-type="Multiple" </ej-gantt> |
Property: selectionSettings.type <ejs-gantt id='Gantt'> <e-gantt-selectionSettings type="Multiple"></e-gantt-selectionSettings> </ejs-gantt> |
To define selection mode in Gantt | Property: selectionMode <ej-gantt id="Gantt" selection-mode="Row" </ej-gantt> |
Property: selectionSettings.mode <ejs-gantt id='Gantt'> <e-gantt-selectionsettings mode="Both"></e-gantt-selectionsettings> </ejs-gantt> |
Select Row by Index | Property: selectedRowIndex <ej-gantt id="Gantt" selected-row-index=3> </ej-gantt> |
Property: selectedRowIndex <ejs-gantt selectedRowIndex="3"> <ejs-gantt> |
To define selected cell index in Gantt | Property: selectedCellIndexes <ej-gantt id="Gantt" selected-cell-indexes=[ ]> </ej-gantt> |
Not applicable |
Select Multiple Cells | Method: selectCells(Indexes,preservePreviousSelectedCell) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}]; ganttObj.selectCells(indexes, true); <script> |
Not Applicable |
Select multiple Rows | Method: selectMultipleRows(rowIndexes) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.selectMultipleRows([1,2,3]); <script> |
Method: selectRows(key) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.selectionModule.selectRows([1,2,3]); <script> |
Triggers after cell selection action | Event: cellSelected <ej-gantt id="Gantt" cell-selected="cellSelected"> </ej-gantt> Script: <script> function cellSelected(args) { } </script> |
Event: cellSelected <ejs-gantt id="Gantt" cellSelected="cellSelected""> </ejs-gantt> Script: <script> function cellSelected(args) { } </script> |
Triggers on cell selection action | Event: cellSelecting <ej-gantt id="Gantt" cell-selecting="cellSelecting"> </ej-gantt> Script: <script> function cellSelecting(args) { } </script> |
Event: cellSelecting <ejs-gantt id="Gantt" cellSelecting="cellSelecting"> </ejs-gantt> Script: <script> function cellSelecting(args) { } </script> |
Triggers after row selection action | Event: rowSelected <ej-gantt id="Gantt" row-selected="rowSelected"> </ej-gantt> Script: <script> function rowSelected(args) { } </script> |
Event: rowSelected <ejs-gantt id="Gantt" rowSelected="rowSelected"> </ejs-gantt> Script: <script> function rowSelected(args) { } </script> |
Triggers before row selection action | Event: rowSelecting <ej-gantt id="Gantt" row-selecting="rowSelecting"> </ej-gantt> Script: <script> function rowSelecting(args) { } </script> |
Event: rowSelecting <ejs-gantt id="Gantt" rowSelecting="rowSelecting"> </ejs-gantt> Script: <script> function rowSelecting(args) { } </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: editSettings <ej-gantt id="Gantt"> <e-gantt-edit-settings allow-editing="true" allow-adding="true" allow-deleting="true" show-delete-confirm-dialog="true" /> </ej-gantt> |
Property: editSettings <ejs-gantt id='Gantt'> <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" showDeleteConfirmDialog="true"></e-gantt-editsettings> </ejs-gantt> |
Cell Editing | Property: editSettings.editMode <ej-gantt id="Gantt"> <e-gantt-edit-settings allow-editing="true" edit-mode="cellEditing"></e-gantt-edit-settings> </ej-gantt> |
Property: editSettings.mode <ejs-gantt id='Gantt'> <e-gantt-editsettings allowEditing="true" mode="Auto"></e-gantt-editsettings> </ejs-gantt> |
Dialog Editing | Property: editSettings.editMode ej-gantt id="Gantt"> <e-gantt-edit-settings allow-editing="true" edit-mode="normal"></e-gantt-edit-settings> </ej-gantt> |
Property: editSettings.mode <ejs-gantt id='Gantt'> <e-gantt-editsettings allowEditing="true" mode="Dialog"></e-gantt-editsettings> </ejs-gantt> |
To enable/disable taskbar editing | Property: allowGanttChartEditing <ej-gantt id="Gantt" allow-gantt-chart-editing="true"> </ej-gantt> |
Property: editSettings.allowTaskbarEditing <ejs-gantt id='Gantt'> <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings> </ejs-gantt> |
To enable progressbar resizing | Property: enableProgressBarResizing <ej-gantt id="Gantt" enable-progress-bar-resizing="true"> </ej-gantt> |
Property: editSettings.allowTaskbarEditing <ejs-gantt id='Gantt'> <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings> </ejs-gantt> |
To enable indent/ outdent option | Property: editSettings.allowIndent <ej-gantt id="Gantt"> <e-gantt-edit-settings allow-indent="true" /> </ej-gantt> |
Not applicable |
To define click or double click action to begin edit action | Property: editSettings.beginEditAction <ej-gantt id="Gantt"> <e-gantt-edit-settings begin-edit-action="Click"></e-gantt-edit-settings> </ej-gantt> |
Not applicable |
To define new row position in Gantt | Property: editSettings.rowPosition <ej-gantt id="Gantt"> <e-gantt-edit-settings row-position="AboveSelectedRow"></e-gantt-edit-settings> </ej-gantt> |
Property: editSettings.newRowPosition <ejs-gantt id="Gantt"> <e-gantt-edit-settings newRowPosition="Below"></e-gantt-edit-settings> </ejs-gantt> |
To define fields in edit dialog | Property: editDialogFields <ej-gantt id="Gantt"> <e-edit-dialog-fields> <e-edit-dialog-field field="TaskID" edit-type="stringedit"></e-edit-dialog-field> <e-edit-dialog-field field="StartDate" edit-type="datepicker"></e-edit-dialog-field> </e-edit-dialog-fields> </ej-gantt> |
Property: editDialogFields <ejs-gantt id='Gantt'> <e-gantt-editdialogfields> <e-gantt-editdialogfield field="TaskID" edit-type="stringedit"></e-gantt-editdialogfield> <e-gantt-editdialogfield field="StartDate" edit-type="datepicker"></e-gantt-editdialogfield> </e-gantt-editdialogfields> </ej-gantt> |
To define fields in add dialog | Property: addDialogFields <ej-gantt id="Gantt"> <e-add-dialog-fields> <e-add-dialog-field field="taskName" edit-type="stringedit"></e-add-dialog-field> <e-add-dialog-field field="StartDate" edit-type="datepicker"></e-add-dialog-field> </e-add-dialog-fields> </ej-gantt> |
Property: addDialogFields <ejs-gantt id='Gantt'> <e-gantt-adddialogfields> <e-gantt-adddialogfield type="General" headerText="General Tab"></e-gantt-adddialogfield > <e-gantt-adddialogfield type="Dependency"></e-gantt-adddialogfield> </e-gantt-adddialogfields> </ej-gantt> |
To make Gantt as read only | Property: readOnly <ej-gantt id="Gantt" read-only="true"> </ej-gantt> |
Not Applicable |
To open Edit dialog | Method: openEditDialog() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.openEditDialog(); <script> |
Method: openEditDialog() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.openEditDialog(); <script> |
To open Add dialog | Method: openAddDialog() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.openAddDialog(); <script> |
Method: openAddDialog() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.openAddDialog(); <script> |
Add task in Gantt | Method: addRecord(data, rowPosition) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); var data = { taskId: 40, taskName:"New Task 40", startDate:"2/20/2014", endDate:"2/25/2014" }; ganttObj.addRecord(data, ej.Gantt.AddRowPosition.Child); <script> |
Method: addRecord(data, rowPosition, rowIndex) @ViewChild('gantt') public ganttObj: GanttComponent; var data = { taskId:"40", taskName:"New Task 40", startDate:"2/20/2014", endDate:"2/25/2014" }; this.ganttObj.addRecord(data, 'Below', 10); <script> |
Delete selected item | Method: deleteItem() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.deleteItem(); <script> |
Method: deleteRecord() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.editModule.deleteRecord(); <script> |
Update task details by id | Method: updateRecordByTaskId(data) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); var data = { taskID: 4, taskName: "updated value"}; ganttObj.updateRecordByTaskId(data); <script> |
Method: updateRecordByID @ViewChild('gantt') public ganttObj: GanttComponent; var data = { taskID: 4, taskName: "updated value"}; this.ganttObj.updateRecordByID(data); <script> |
Delete dependency | Method: deleteDependency(fromTaskId,toTaskId) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.deleteDependency(3, 6); <script> |
Not applicable |
Save Edit | Method: saveEdit() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.saveEdit(); <script> |
Not applicable |
Cancel Edit | Method: cancelEdit() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> cancelEdit var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.cancelEdit(); <script> |
Method: cancelEdit() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.cancelEdit() <script> |
Triggers for every Gantt action before it get started | Event: actionBegin <ej-gantt id="Gantt" action-begin="actionBegin"> </ej-gantt> Script: <script> function actionBegin(args) { } </script> |
Event: actionBegin <ejs-gantt id="Gantt" actionBegin="actionBegin"> </ejs-gantt> Script: <script> function actionBegin(args) { } </script> |
Triggers for after every Gantt action completed | Event: actionComplete <ej-gantt id="Gantt" action-complete="actionComplete"> </ej-gantt> Script: <script> function actionComplete(args) { } </script> |
Event: actionComplete <ejs-gantt id="Gantt" actionComplete="actionComplete"> </ejs-gantt> Script: <script> function actionComplete(args) { } </script> |
Triggers while resizing, dragging the taskbar | Event: taskbarEditing <ej-gantt id="Gantt" taskbar-editing="taskbarEditing"> </ej-gantt> Script: <script> function taskbarEditing(args) { } </script> |
Event: taskbarEditing <ejs-gantt id="Gantt" taskbarEditing="taskbarEditing"> </ejs-gantt> Script: <script> function taskbarEditing(args) { } </script> |
Triggers after taskbar resize, drag action | Event: taskbarEdited <ej-gantt id="Gantt" taskbar-edited="taskbarEdited"> </ej-gantt> Script: <script> function taskbarEdited(args) { } </script> |
Event: taskbarEdited <ejs-gantt id="Gantt" taskbarEdited="taskbarEdited"> </ejs-gantt> Script: <script> function taskbarEdited(args) { } </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable/disable column resize | Property: allowColumnResize <ej-gantt id="Gantt" allow-column-resize="true"> </ej-gantt> |
Property: allowResizing <ejs-gantt id='Gantt' allowResizing="true"> <ejs/gantt> |
To enable/disable column chooser | Property: showColumnChooser <ej-gantt id="Gantt" show-column-chooser="true"> </ej-gantt> |
Property: showColumnMenu <ejs-gantt id='Gantt' showColumnMenu="true"> <ejs/gantt> |
To enable/disable column add, remove option in column menu | Property: showColumnOptions <ej-gantt id="Gantt" show-column-options="true"> </ej-gantt> |
Not applicable |
Tree column index | Property: treeColumnIndex <ej-gantt id="Gantt" tree-column-index=1> </ej-gantt> |
Property: treeColumnIndex <ejs-gantt id='Gantt' treeColumnIndex="2"> </ejs-gantt> |
To define column fields in column menu | Property: columnDialogFields <ej-gantt id="Gantt" column-dialog-fields="@(new List<string>() {"field", "headerText", "editType" })"> </ej-gantt> |
Not applicable |
Show column | Method: showColumn(headerText) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.showColumn("Task Name"); <script> |
Method: showColumn(keys, showBy) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.showColumn("TaskName"); <script> |
Hide column | Method: hideColumn(headerText) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.hideColumn("Task Name"); <script> |
Method: hideColumn(keys, showBy) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.hideColumn("TaskName"); <script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To configure default toolbars of Gantt | Property: toolbarSettings.toolbarItems <ej-gantt id="Gantt"> <e-gantt-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "add","edit","delete","update","cancel","expandAll","collapseAll" "search","prevTimeSpan","nextTimeSpan" })"> </e-gantt-toolbar-settings> </ej-gantt> |
Property: toolbar <ejs-gantt id='Gantt' toolbar="@(new List<string>() { "Add", "Cancel", "CollapseAll", "Delete", "Edit", "ExpandAll", "NextTimeSpan", "PrevTimeSpan", "Search", "Update" })"> </ejs-gantt> |
Other toolbars | Property: toolbarSettings.toolbarItems <ej-gantt id="Gantt"> <e-gantt-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "indent","outdent","criticalPath","excelExport","pdfExport" })"> </e-gantt-toolbar-settings> </ej-gantt> |
Not applicable |
Custom toolbar | Property: toolbarSettings.customToolbarItems <ej-gantt id="Gantt"> <e-gantt-toolbar-settings show-toolbar="true" custom-toolbar-items="@(new List<string>() { [{ text: "ShowBaseline", tooltipText: "Show Baseline" }, { text: "Reset", tooltipText:"Reset" }] }" /> |
Property: toolbar @{ List<object> toolbarItems = new List<object>(); toolbarItems.Add(new { text = "Test", tooltipText = "Test", id = "Test" }); } <ejs-gantt id='Gantt' toolbar=toolbarItems> </ejs-gantt> |
Triggers when toolbar items clicked | Event: toolbarClick <ej-gantt id="Gantt" toolbar-click="toolbarClick"> </ej-gantt> Script: <script> function toolbarClick(args) { } </script> |
Event: toolbarClick <ejs-gantt id="Gantt" toolbarClick="toolbarClick"> </ejs-gantt> Script: <script> function toolbarClick(args) { } </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable taskbar tooltip | Property: enableTaskbarTooltip <ej-gantt id="Gantt" enable-taskbar-tooltip="true"> </ej-gantt> |
Property: tooltipSettings.showTooltip <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings showTooltip="true"> </e-gantt-tooltipsettings> ></ejs-gantt> |
To define tooltip for all cells | Property: cellTooltipTemplate <ej-gantt id="Gantt" cell-tooltip-template="#CustomToolTip"> </ej-gantt> |
Not applicable |
To define tooltip template for row drag action | Property: dragTooltip <ej-gantt id="Gantt" drag-tooltip= "dragTooltip"> </ej-gantt> |
Not applicable |
To enable taskbar editing tooltip | Property: enableTaskbarDragTooltip <ej-gantt id="Gantt" enable-taskbar-drag-tooltip="true"> </ej-gantt> |
Not Applicable |
To enable/disable tooltip for grid cells | Property: showGridCellTooltip <ej-gantt id="Gantt" show-grid-cell-tooltip="true"> </ej-gantt> |
Not applicable |
To enable/disable tooltip for grid cells | Property: showGridExpandCellTooltip <ej-gantt id="Gantt" show-grid-expand-cell-tooltip="true"> </ej-gantt> |
Not applicable |
To define taskbar tooltip template in Gantt | Property: taskbarTooltipTemplate <ej-gantt id="Gantt" taskbar-tooltip-template="tooltipTemplate"> </ej-gantt> |
Property: tooltipSettings.taskbar <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings taskbar="taskbarTooltip"> </e-gantt-tooltipsettings> </ejs-gantt> |
To define taskbar tooltip template id in Gantt | Property: taskbarTooltipTemplateId <ej-gantt id="Gantt" taskbar-tooltip-template-id="tooltipTemplateID"> </ej-gantt> |
Property: tooltipSettings.taskbar <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings taskbar="#taskbarTooltip"> </e-gantt-tooltipsettings> </ejs-gantt> |
To define tooltip template for connector line | Property: predecessorTooltipTemplate <ej-gantt id="Gantt" predecessor-tooltip-template="ToolTipTemplate"> </ej-gantt> |
Property: tooltipSettings.connectorLine <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings connectorLine="dependencyLineTooltip"> </e-gantt-tooltipsettings> </ejs-gantt> |
To define template for progress resize tooltip | Property: progressbarTooltipTemplate <ej-gantt id="Gantt" progressbar-tooltip-template="progressbar_editing_tooltip_template"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings editing="editingTooltip"> </e-gantt-tooltipsettings> </ejs-gantt> |
To define template id for progress resize tooltip | Property: progressbarTooltipTemplateId <ej-gantt id="Gantt" progressbar-tooltip-template-id="progressbar_editing_tooltip_template"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings editing="#editingTooltip"> </e-gantt-tooltipsettings> </ejs-gantt> |
To define tooltip template for taskbar edit action | Property: taskbarEditingTooltipTemplate <ej-gantt id="Gantt" taskbar-editing-tooltip-template="TaskbarEditingTooltipTemplate"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings editing="editingTooltip"> </e-gantt-tooltipsettings> </ejs-gantt> |
To define tooltip template id for taskbar edit action | Property: taskbarEditingTooltipTemplateId <ej-gantt id="Gantt" taskbar-editing-tooltip-template-id="TaskbarEditingTooltipTemplate"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt id='Gantt'> <e-gantt-tooltipsettings editing="#editingTooltip"> </e-gantt-tooltipsettings> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To configure timeline settings in Gantt | Property: scheduleHeaderSettings <ej-gantt id="Gantt" <e-schedule-header-settings week-header-format="MMM dd , yyyy" day-header-format="dd,MM,yy" year-header-format="yyyy" month-header-format="MMM yyyy" hour-header-format="HH" schedule-header-type="Week" minutes-per-interval="FiveMinutes" weekend-background="#F2F2F2" timescale-start-date-mode="Month" timescale-unit-size="100%" week-start-day=2 update-timescale-view="false"> <ej-gantt> |
Property: timelineSettings <ejs-gantt id='Gantt'> <e-gantt-timelinesettings timelineViewMode="Week" timelineUnitSize="150" weekStartDay="3" showTooltip="true" weekendBackground="" updateTimescaleView="false"> <e-timelinesettings-toptier unit="Month" format="MMM"></e-timelinesettings-toptier> <e-timelinesettings-bottomtier unit="Day"></e-timelinesettings-bottomtier> </e-gantt-timelinesettings> </ejs-gantt> |
To define weekend background in Gantt | Property: weekendBackground <ej-gantt id="Gantt" weekend-background= "blue"> </ej-gantt>; |
Not applicable |
To Highlight weekends | Property: highlightWeekends <ej-gantt id="Gantt" highlight-weekends="true">> </ej-gantt>; |
Property: highlightWeekends <ejs-gantt id='Gantt' highlightWeekends="true"> </ejs-gantt> |
To include weekends | Property: includeWeekend <ej-gantt id="Gantt" include-weekend="true"> </ej-gantt>; |
Property: includeWeekend <ejs-gantt id='Gantt' includeWeekend="true"> </ejs-gantt> |
To define project start date in Gantt | Property: scheduleStartDate <ej-gantt id="Gantt" schedule-start-date = "3/20/2018"> </ej-gantt> |
Property: projectStartDate <ejs-gantt id='Gantt' projectStartDate="01/01/2019"> </ej-gantt> TS this. projectStartDate = new Date('3/20/2018'); |
To define project end date in Gantt | Property: scheduleEndDate <ej-gantt id="Gantt" schedule-end-date = "3/20/2018"> </ej-gantt> |
Property: projectEndDate <ejs-gantt id='Gantt' projectEndDate="12/30/2019"> </ej-gantt> TS this. projectEndDate = new Date('3/20/2018'); |
Update project start date and end date | Method: updateScheduleDates(startDate,endDate) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.updateScheduleDates("5/25/2017", "9/27/2017"); <script> |
Method: updateProjectDates(startDate, endDate, isTimelineRoundOff) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.updateProjectDates("5/25/2017", "9/27/2017", true); <script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable/disable row drag and drop | Property: allowDragAndDrop <ej-gantt id="Gantt" allow-drag-and-drop="true"> </ej-gantt> |
Not applicable |
To enable/disable alternate row background | Property: enableAltRow <ej-gantt id="Gantt" enable-alt-row="true"> </ej-gantt> |
Not applicable |
To add Row height | Property: rowHeight <ej-gantt id="Gantt" row-height=60> </ej-gantt> |
Property: rowHeight <ejs-gantt id='Gantt' rowHeight="60"> </ejs-gantt> |
To render parent in collapsed state | Property: enableCollapseAll <ej-gantt id="Gantt" enable-collapse-all="true"> </ej-gantt> |
Property: collapseAllParentTasks <ejs-gantt id='Gantt' collapseAllParentTasks="true"> |
Expand/collapse record by id | Method: expandCollapseRecord(taskId) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.expandCollapseRecord(1); <script> |
Method: collapseByID() expandByID() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.expandByID(1); ganttObj.collapseByID(1); <script> |
Expand all rows | Method: expandAllItems() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.expandAllItems(); <script> |
Method: expandAll() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.expandAll(); <script> |
Collapse all rows | Method: collapseAllItems() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.collapseAllItems(); <script> |
Method: collapseAll() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.collapseAll(); <script> |
Triggers after row collapse action | Event: collapsed <ej-gantt id="Gantt" Collapsed="collapsed"> </ej-gantt> Script: <script> function collapsed(args) { } </script> |
Event: collapsed <ejs-gantt id="Gantt" collapsed="collapsed"> </ejs-gantt> Script: <script> function collapsed(args) { } </script> |
Triggers before row collapse action | Event: collapsing <ej-gantt id="Gantt" collapsing="collapsing"> </ej-gantt> Script: <script> function collapsing(args) { } </script> |
Event: collapsing <ejs-gantt id="Gantt" collapsing="collapsing"> </ejs-gantt> Script: <script> function collapsing(args) { } </script> |
Triggers after Gantt row was expanded | Event: expanded <ej-gantt id="Gantt" expanded="expanded"> </ej-gantt> Script: <script> function expanded(args) { } </script> |
Event: expanded <ejs-gantt id="Gantt" expanded="expanded"> </ejs-gantt> Script: <script> function expanded(args) { } </script> |
Triggers before Gantt row expand action | Event: expanding <ej-gantt id="Gantt" expanding="expanding"> </ej-gantt> Script: <script> function expanding(args) { } </script> |
Event: expanding <ejs-gantt id="Gantt" expanding="expanding"> </ejs-gantt> Script: <script> function expanding(args) { } </script> |
Triggers before grid rows render action | Event: rowDataBound <ej-gantt id="Gantt" row-data-bound="rowDataBound"> </ej-gantt> Script: <script> function rowDataBound(args) { } </script> |
Event: rowDataBound <ejs-gantt id="Gantt" rowDataBound="rowDataBound"> </ejs-gantt> Script: <script> function rowDataBound(args) { } </script> |
Triggers while dragging a row | Event: rowDrag <ej-gantt id="Gantt" row-drag="rowDrag"> </ej-gantt> Script: <script> function rowDrag(args) { } |
Not applicable |
Triggers while while start to drag row | Event: rowDragStart <ej-gantt id="Gantt" row-drag-start="rowDragStart"> </ej-gantt> Script: <script> function rowDrag(args) { } |
Not applicable |
Triggers while while drop a row | Event: rowDragStop <ej-gantt id="Gantt" row-drag-stop="rowDragStop"> </ej-gantt> Script: <script> function rowDrag(args) { } |
Not applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To map resources | Property: resources <ej-gantt id="Gantt" resources="ViewBag.resources"> </ej-gantt> |
Property: resources <ejs-gantt id='Gantt' resources="ViewBag.projectResources"> </ejs-gantt> |
To map resource id field from resource collection | Property: resourceIdMapping <ej-gantt id="Gantt" resource-id-mapping="ResourceId"> </ej-gantt> |
Property: resourceIDMapping <ejs-gantt resourceIDMapping="ResourceId"> </ejs-gantt> |
To map resource name field from resource collection | Property: resourceNameMapping <ej-gantt id="Gantt" resource-name-mapping="ResourceName"> </ej-gantt> |
Property: resourceNameMapping <ejs-gantt resourceNameMapping="ResourceName"> </ejs-gantt> |
To map resource unit field from assigned resource collection | Property: resourceUnitMapping <ej-gantt id="Gantt" resource-unit-mapping="ResourceUnit"> </ej-gantt> |
Not applicable |
To define resource view type of Gantt | Property: viewType <ej-gantt id="Gantt" view-type="ResourceView"> </ej-gantt> |
Not applicable |
To define mapping property for resource collection in resource view Gantt | Property: resourceCollectionMapping <ej-gantt id="Gantt" resource-collection-mapping= "resources"> </ej-gantt> |
Not Applicable |
To map task collection from resources for resource view Gantt | Property: taskCollectionMapping <ej-gantt id="Gantt" task-collection-mapping="Tasks"> </ej-gantt> |
Not applicable |
To map group id for resource view Gantt | Property: groupIdMapping <ej-gantt id="Gantt" group-id-mapping="TeamId"> </ej-gantt> |
Not Applicable |
To map group name for resource view Gantt | Property: groupNameMapping <ej-gantt id="Gantt" group-name-mapping="TeamName"> </ej-gantt> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To render baseline | Property: renderBaseline <ej-gantt id="Gantt" render-baseline="true"> </ej-gantt> |
Property: renderBaseline <ejs-gantt id='Gantt' renderBaseline="true"> </ejs-gantt> |
To define baselineColor | Property: baselineColor <ej-gantt id="Gantt" baseline-color= "blue"> </ej-gantt> |
Property: baselineColor <ejs-gantt baselineColor="red"> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable context menu | Property: enableContextMenu <ej-gantt id="Gantt" enable-context-menu="true"> </ej-gantt> |
Property: enableContextMenu <ejs-gantt id='Gantt' enableContextMenu="true"> </ejs-gantt> |
To define custom menu items | Event: contextMenuOpen <ej-gantt id="Gantt" context-menu-open="contextMenuOpen"> </ej-gantt> Script: <script> function contextMenuOpen(args) { args.contextMenuItems.push({ headerText: "Expand/Collapse", menuId: "expand", iconPath: "url(Expand-02-WF.png)", eventHandler: function() { //event handler for custom menu items } }); } </script> |
Property: contextMenuItems @{ List<object> contextItems = new List<object>(); contextItems.Add(new { text = "Collapse the Row", target = ".e-content", id = "collapserow" }); contextItems.Add(new { text = "Expand the Row", target = ".e-content", id = "expandrow" }); } <ejs-gantt id='Gantt' contextMenuItems="contextItems"> </ejs-gantt> |
Triggers before context menu opens | Event: contextMenuOpen <ej-gantt id="Gantt" context-menu-open="contextMenuOpen"> </ej-gantt> Script: <script> function contextMenuOpen(args) { } </script> |
Event: contextMenuOpen <ejs-gantt id="Gantt" contextMenuOpen="contextMenuOpen"> </ejs-gantt> Script: <script> function contextMenuOpen(args) { } </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define task scheduling mode in Gantt | Property: taskSchedulingMode <ej-gantt id="Gantt" task-scheduling-mode="Auto"> </ej-gantt> |
Not applicable |
To map task scheduling mode from data source | Property: taskSchedulingModeMapping <ej-gantt id="Gantt" task-scheduling-mode-mapping="IsManual"> </ej-gantt> |
Not applicable |
To enable schedule date validation while task predecessor draw action | Property: validateManualTasksOnLinking <ej-gantt id="Gantt" validate-manual-tasks-on-linking="true"> </ej-gantt> |
Not applicable |
To define working time range of day | Property: dayWorkingTime <ej-gantt id="Gantt"> <e-gantt-day-working-time-collection> <e-gantt-day-working-time from="08:00 AM" to="12:00 PM"></e-gantt-day-working-time> <e-gantt-day-working-time from="01:00 PM" to="05:00 PM"></e-gantt-day-working-time> </e-gantt-day-working-time-collection> </ej-gantt> |
Property: dayWorkingTime <ejs-gantt id='Gantt'> <e-gantt-dayworkingtimecollection> <e-gantt-dayworkingtime from="9" to="18"></e-gantt-dayworkingtime> </e-gantt-dayworkingtimecollection> </ejs-gantt> |
To enable rounding off date value in taskbar editing | Property: roundOffDayworkingTime <ej-gantt id="Gantt" round-off-dayworkingtime="true"> </ej-gantt> |
Not applicable |
To define non-working background color | Property: nonWorkingBackground <ej-gantt id="Gantt" non-working-background="#B7C3D0"> </ej-gantt> |
Not Applicable |
To highlight non working time range in Gantt | Property: highlightNonWorkingTime <ej-gantt id="Gantt" highlight-non-working-time="true"> </ej-gantt> |
Not Applicable |
To set working days of a week | Property: workweek <ej-gantt id="Gantt" work-week="@(new List<string>() { "Sunday","Monday","Tuesday","Wednesday","Thursday" })"> </ej-gantt> |
Property: workWeek <ejs-gantt id='Gantt' workWeek="@(new string[] { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday" })"> </ejs-gantt> |
To enable/disable Unscheduled tasks | Property: allowUnscheduledTask <ej-gantt id="Gantt" allow-unscheduled-task = "true"> </ej-gantt> |
Property: allowUnscheduledTasks <ejs-gantt allowUnscheduledTasks="true"> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define taskbar background type in Gantt | Property: taskbarBackground <ej-gantt id="Gantt" taskbar-background = "#F2F2F2"> </ej-gantt> |
Not applicable |
To define background color for parent taskbar | Property: parentTaskbarBackground <ej-gantt id="Gantt" parent-taskbar-background= "#F2F2F2"> </ej-gantt> |
Not applicable |
To add Taskbar height | Property: taskbarHeight <ej-gantt id="Gantt" taskbar-height=25 row-height=40> </ej-gantt> |
Property: taskbarHeight <ejs-gantt id='Gantt' taskbarHeight=50 rowHeight="60"> </ejs-gantt> |
To define background color for parent progress bar | Property: parentProgressbarBackground <ej-gantt id="Gantt" parent-progressbar-background= "#F2F2F2"> </ej-gantt> |
Not applicable |
To define background color fro progress bar | Property: progressbarBackground <ej-gantt id="Gantt" progressbar-background= "#F2F2F2"> </ej-gantt> |
Not Applicable |
To define height for progress bar | Property: progressbarHeight <ej-gantt id="Gantt" progressbar-height= "100"> </ej-gantt> |
Not Applicable |
To render progress status taskbar | Property: showProgressStatus <ej-gantt id="Gantt" show-progress-status="true"> </ej-gantt> |
Property: labelSettings.taskLabel <ejs-gantt id='Gantt'> <e-gantt-labelSettings taskLabel="${Progress}%"></e-gantt-labelSettings> </ejs-gantt> |
To set connectorline width | Property: connectorlineWidth <ej-gantt id="Gantt" connectorline-width="2"> </ej-gantt> |
Property: connectorLineWidth <ejs-gantt id='Gantt' connectorLineWidth="3"> </ejs-gantt> |
To set connectorline background | Property: connectorLineBackground <ej-gantt id="Gantt" connector-line-background="red"> </ej-gantt> |
Property: connectorLineBackground <ejs-gantt connectorLineBackground="red"> </ejs-gantt> |
To define weekend background in Gantt | Property: weekendBackground <ej-ganttweekend-background="blue"> </ej-gantt> |
Not applicable |
To define taskbar template | Property: taskbarTemplate <ej-gantt id="Gantt" taskbar-template="#TaskbarTemplate"> </ej-gantt> |
Property: taskbarTemplate <ejs-gantt taskbarTemplate="#TaskbarTemplate"> </ejs-gantt> |
To define parent taskbar template | Property: parentTaskbarTemplate <ej-gantt id="Gantt" parent-taskbar-template="#parentTaskbarTemplate"> </ej-gantt> |
Property: parentTaskbarTemplate <ejs-gantt parentTaskbarTemplate="#ParentTaskbarTemplate"> </ejs-gantt> |
To define milestone template | Property: milestoneTemplate <ej-gantt id="Gantt" milestone-template="#milestoneTemplate"> </ej-gantt> |
Property: milestoneTemplate <ejs-gantt milestoneTemplate="#MilestoneTemplate"> </ejs-gantt> |
To define right task label | Property: rightTaskLabelMapping <ej-gantt id="Gantt" right-task-label-mapping="taskName"> </ej-gantt> |
Property: labelSettings.rightLabel <ejs-gantt id='Gantt'> <e-gantt-labelSettings rightLabel="Task Name: ${taskData.TaskName}"></e-gantt-labelSettings> </ejs-gantt> |
To define left task label | Property: leftTaskLabelMapping <ej-gantt id="Gantt" left-task-label-mapping="taskID"> </ej-gantt> |
Property: labelSettings.leftLabel <ejs-gantt id='Gantt'> <e-gantt-labelSettings leftLabel="TaskId"></e-gantt-labelSettings> </ejs-gantt> |
To define right task label template | Property: rightTaskLabelTemplate <ej-gantt id="Gantt" right-task-label-template="#rightLabelTemplate"> </ej-gantt> |
Property: labelSettings.rightLabel <ejs-gantt id='Gantt'> <e-gantt-labelSettings rightLabel="#RightLabelTemplate"></e-gantt-labelSettings> </ejs-gantt> |
To define left task label template | Property: leftTaskLabelTemplate <ej-gantt id="Gantt" left-task-label-template="#leftLabelTemplate"> </ej-gantt> |
Property: labelSettings.leftLabel <ejs-gantt id='Gantt'> <e-gantt-labelSettings leftLabel="#LeftlabelTemplate"></e-gantt-labelSettings> </ejs-gantt> |
To render resource names right to taskbar | Property: showResourceNames <ej-gantt id="Gantt" show-resource-names="true"> </ej-gantt> |
Property: labelSettings.rightLabel <ejs-gantt id='Gantt'> <e-gantt-labelSettings rightLabel="${if(ResourceId)}${ResourceId}${/if}">></e-gantt-labelSettings> </ejs-gantt> |
To render task name left to taskbar | Property: showTaskNames <ej-gantt id="Gantt" show-task-names> </ej-gantt> |
Property: labelSettings.leftLabel <ejs-gantt id='Gantt'> <e-gantt-labelSettings rightLabel="Task Name: ${taskData.TaskName}"></e-gantt-labelSettings> </ejs-gantt> |
Triggers on taskbar rendering action | Event: queryTaskbarInfo <ej-gantt id="Gantt" query-taskbar-info="queryTaskbarInfo"> </ej-gantt> Script: <script> function queryTaskbarInfo(args) { } </script> |
Event: queryTaskbarInfo <ejs-gantt id="Gantt" queryTaskbarInfo="queryTaskbarInfo"> </ejs-gantt> Script: <script> function queryTaskbarInfo(args) { } </script> |
Triggers on grid cell rendering action | Event: queryCellInfo <ej-gantt id="Gantt" query-cell-info="queryCellInfo"> </ej-gantt> Script: <script> function queryCellInfo(args) { } </script> |
Event: queryCellInfo <ejs-gantt id="Gantt" queryCellInfo="queryCellInfo"> </ejs-gantt> Script: <script> function queryCellInfo(args) { } </script> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define striplines | Property: stripLines <ej-gantt id="Gantt"> <e-strip-lines> <e-gantt-strip-line day="01/02/2014" label="Project Release" line-width=2 line-color="Darkblue" line-style="dotted"></e-gantt-strip-line> </e-strip-lines> </ej-gantt> |
Property: eventMarkers <ejs-gantt id='Gantt'> <e-gantt-eventmarkers> <e-gantt-eventmarker day="04/10/2019" label="Project approval and kick-off" cssClass="e-custom-event-marker"></e-gantt-eventmarker> </e-gantt-eventmarkers> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define holidays | Property: holidays <ej-gantt id="Gantt"> <e-holidays> <e-holiday day="2/03/2014" label="Public holiday" background="yellowgreen"></e-holiday> </e-holidays> </ej-gantt> |
Property: holidays <ejs-gantt id='Gantt'> <e-gantt-holidays> <e-gantt-holiday from="04/11/2019" to="04/12/2019" label="Public holidays" cssClass="e-custom-holiday"></e-gantt-holiday> </e-gantt-holidays> </ejs-gantt> |
To define days in holiday collection | Property: holidays.day <ej-gantt id="Gantt"> <e-holidays> <e-holiday day="2/03/2014"></e-holiday> </e-holidays> </ej-gantt> |
Property: holidays.from <ejs-gantt id='Gantt'> <e-gantt-holidays> <e-gantt-holiday from="04/11/2019"></e-gantt-holiday> </e-gantt-holidays> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define height for Gantt | Property: sizeSettings.height <ej-gantt id="Gantt"> <e-gantt-size-settings height="450px" /> </ej-gantt> |
Property: height <ejs-gantt height="450px"> </ejs-gantt> |
To define width for Gantt | Property: sizeSettings.width <ej-gantt id="Gantt"> <e-gantt-size-settings width="100%" /> </ej-gantt> |
Property: width <ejs-gantt width="700px"> </ejs-gantt> |
To change splitter position | Property: splitterPosition <ej-gantt id="Gantt" splitter-position="50%"> </ej-gantt> |
Not applicable |
To change splitter by position | Property: splitterSettings.position <ej-gantt id="Gantt"> <e-splitter-settings position="50"></e-splitter-settings> </ej-gantt> |
Property: splitterSettings.position <ejs-gantt id='Gantt'> <e-gantt-splittersettings position="80%"></e-gantt-splittersettings> </ejs-gantt> |
To change splitter by index | Property: splitterSettings.index <ej-gantt id="Gantt"> <e-splitter-settings index="3"></e-splitter-settings> </ej-gantt> |
Property: splitterSettings.columnIndex <ejs-gantt id='Gantt'> <e-gantt-splittersettings columnIndex = "3"></e-gantt-splittersettings> </ejs-gantt> |
To define view type of Gantt | Property: viewType <ej-gantt id="Gantt" view-type="ProjectView"> </ej-gantt> |
Not applicable |
To enable Localization | Property: locale <ej-gantt locale="fr-FR"> </ej-gantt> |
Property: locale <ejs-gantt locale="fr-FR"> </ejs-gantt> |
To specify the date format for Gantt | Property: dateFormat <ej-gantt date-format="dd/MM/yyyy"> </ej-gantt> |
Property: dateFormat <ejs-gantt dateFormat="M/d/yyyy hh:mm:ss tt"> </ejs-gantt> |
To enable/disable key navigation | Property: allowKeyboardNavigation <ej-gantt id="Gantt" allow-keyboard-navigation="true"> </ej-gantt> |
Property: allowKeyboard <ejs-gantt id='Gantt' allowKeyboard="true" > </ejs-gantt> |
To enable serial number support | Property: enableSerialNumber <ej-gantt id="Gantt" enable-serial-number="true"> </ej-gantt> |
Not applicable |
To enable/disable predecessor validation | Property: enablePredecessorValidation <ej-gantt id="Gantt" enable-predecessor-validation="true"> </ej-gantt> |
Property: enablePredecessorValidation <ejs-gantt id='Gantt' enablePredecessorValidation="true"> </ejs-gantt> |
To set timescale for working hours | Property: workingTimeScale <ej-gantt id="Gantt" working-time-scale="TimeScale24Hours"> </ej-gantt> |
Property: dayWorkingTime <ejs-gantt id='Gantt'> <e-gantt-dayworkingtimecollection> <e-gantt-dayworkingtime from="0" to="24"></e-gantt-dayworkingtime> </e-gantt-dayworkingtimecollection> </ejs-gantt> |
To enable work break down structure in Gantt | Property: enableWBS <ej-gantt id="Gantt" enable-wbs="true"> </ej-gantt> |
Not Applicable |
To enable work break down structure predecessor in Gantt | Property: enableWBSPredecessor <ej-gantt id="Gantt" enable-wbs-predecessor="true"> </ej-gantt> |
Not Applicable |
To map work value from data source | Property: workMapping <ej-gantt id="Gantt" work-mapping= "estimatedHours"> </ej-gantt> |
Not applicable |
To define work unit for tasks | Property: workUnit <ej-gantt id="Gantt" work-unit="Minute"> </ej-gantt> |
Not applicable |
To define task type in Gantt | Property: taskType <ej-gantt id="Gantt" task-type="FixedWork"> </ej-gantt> |
Not applicable |
To enable/disable multiple exporting option | Property: allowMultipleExporting <ej-gantt id="Gantt" allow-multiple-exporting="true"> </ej-gantt> |
Not applicable |
To enable virtual rendering in Gantt | Property: enableVirtualization <ej-gantt id="Gantt" enable-virtualization="true"> </ej-gantt> |
Not Applicable |
Change splitter position dynamically | Method: SetSplitterIndex(Index) SetSplitterPosition(Width) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.setSplitterIndex(3); ganttObj.setSplitterPosition("40%"); <script> |
Method: setSplitterPosition(value,type) <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.setSplitterPosition('40%', 'position'); ganttObj.setSplitterPosition(3, 'columnIndex'); <script> |
To destroy Gantt | Method: destroy() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.destroy(); <script> |
Method: destroy() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.destroy(); <script> |
To update task id | Method: updateTaskId(currentId, newId) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.updateTaskId(5, 7); <script> |
Not applicable |
To set scroll top for Gantt | Method: SetScrollTop(top) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.setScrollTop(50); <script> |
Method: SetScrollTop() <ejs-gantt id="Gantt"> </ejs-gantt> Script: var ganttObj = document.getElementById('Gantt').ej2_instances[0]; ganttObj.setScrollTop(200); <script> |
To get columns to edit in resource view | Method: getResourceViewEditColumns() <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); columns = ganttObj.getResourceViewEditColumns() <script> |
Not applicable |
Show/hide critical path in Gantt | Method: showCriticalPath(isShown) <ej-gantt id="Gantt"> </ej-gantt> Script: <script> var ganttObj = $("#Gantt").data("ejGantt"); ganttObj.showCriticalPath(true); <script> |
Not applicable |
Triggers on initialization of Gantt control | Event: load <ej-gantt id="Gantt" load="load"> </ej-gantt> Script: <script> function load(args) { } </script> |
Event: load <ejs-gantt id="Gantt" load="load"> </ejs-gantt> Script: <script> function load(args) { } </script> |
Triggers after splitter resize action | Event: splitterResized <ej-gantt id="Gantt" splitter-resized="splitterResized"> </ej-gantt> Script: <script> function splitterResized(args) { } </script> |
Event: splitterResized <ejs-gantt id="Gantt" splitterResized="splitterResized"> </ejs-gantt> Script: <script> function splitterResized(args) { } </script> |
Triggers when taskbar item is clicked | Event: taskbarClick <ej-gantt id="Gantt" taskbar-click="taskbarClick"> </ej-gantt> Script: <script> function taskbarClick(args) { } |
Not applicable |