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 [dataSource]="ganttData"> </ej-gantt> |
Property: dataSource <ejs-gantt [dataSource]="ganttData"> </ejs-gantt> |
To map id of task from data source | Property: taskIdMapping <ej-gantt taskIdMapping= "taskID"> </ej-gantt> |
Property: taskFields.id <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { id: 'TaskID' }; |
To map name of task from data source | Property: taskNameMapping <ej-gantt taskNameMapping= "taskName"> </ej-gantt> |
Property: taskFields.name <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { name: 'TaskName' }; |
To map start date from data source | Property: startDateMapping <ej-gantt startDateMapping= "startDate"> </ej-gantt> |
Property: taskFields.startDate <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { startDate: 'StartDate' }; |
To map end date from data source | Property: endDateMapping <ej-gantt endDateMapping= "EndDate"> </ej-gantt> |
Property: taskFields.endDate <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { endDate: 'EndDate' }; |
To map duration from data source | Property: durationMapping <ej-gantt durationMapping= "duration"> </ej-gantt> |
Property: taskFields.duration <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { duration: 'Duration' }; |
To map duration unit from data source | Property: durationUnitMapping <ej-gantt durationUnitMapping : "durationUnit"> </ej-gantt> |
Property: taskFields.durationUnit <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { durationUnit: 'durationUnit' }; |
To map predecessors from data source | Property: predecessorMapping <ej-gantt predecessorMapping : "predecessor"> </ej-gantt> |
Property: taskFields.dependency <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { dependency: 'predecessor' }; |
To map progress from data source | Property: progressMapping <ej-gantt progressMapping: "progress"> </ej-gantt> |
Property: taskFields.progress <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { progress: 'progress' }; |
To map child task from data source | Property: childMapping <ej-gantt childMapping : "subTasks"> </ej-gantt> |
Property: taskFields.child <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { child: 'subTasks' }; |
To map baseline start date from data source | Property: baselineStartDateMapping <ej-gantt baselineStartDateMapping: "baselineStartDate"> </ej-gantt> |
Property: taskFields.baselineStartDate <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { baselineStartDate: 'baselineStartDate' }; |
To map baseline end date from data source | Property: baselineEndDateMapping <ej-gantt baselineEndDateMapping: "baselineEndDate"> </ej-gantt> |
Property: taskFields.baselineEndDate <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { baselineEndDate: 'baselineEndDate' }; |
To map milestone mapping from data source | Property: milestoneMapping <ej-gantt milestoneMapping: "isMilestone"> </ej-gantt> |
Property: taskFields.milestone <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { milestone: 'isMilestone'' }; |
To map notes from data source | Property: notesMapping <ej-gantt notesMapping: "notes"> </ej-gantt> |
Property: taskFields.notes <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { notes: 'notes' }; |
To map parent task id from data source | Property: parentTaskIdMapping <ej-gantt parentTaskIdMapping: "parentId"> </ej-gantt> |
Property: taskFields.parentID <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { parentID: 'parentId' }; |
To map assigned resources from data source | Property: resourceInfoMapping <ej-gantt resourceInfoMapping: "assignedResource"> </ej-gantt> |
Property: taskFields.resourceInfo <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { resourceInfo: 'assignedResource' }; |
To map expand state from data source | Property: expandStateMapping <ej-gantt expandStateMapping: "isExpanded"> </ej-gantt> |
Property: taskFields.expandState <ejs-gantt [taskFields]="taskSettings"> </ejs-gantt> TS this.taskSettings = { expandState: 'isExpanded' }; |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allowSorting <ej-gantt [allowSorting]="true"> </ej-gantt> |
Property: allowSorting <ejs-gantt [allowSorting]="true"> </ejs-gantt> |
To enable/disable multiple sorting option | Property: allowMultiSorting <ej-gantt [allowMultiSorting]="true"> </ej-gantt> |
Property: allowSorting <ejs-gantt [allowSorting]="true"> </ejs-gantt> |
Sort column Initially | Property: sortSettings.sortedColumns <ej-gantt [allowSorting]="true" [sortSettings]="sortSettings"> </ej-gantt> TS this.sortSettings = { sortedColumns :[ {field: "taskName", direction: "descending" } ] }; |
Property: sortSettings.columns <ejs-gantt [allowSorting]="true" [sortSettings]="sortSettings"> </ejs-gantt> TS this.sortSettings = { columns: [{ field: 'TaskID', direction: 'Ascending' }] }; |
Clear the Sorted columns | Method: clearSorting() export class AppComponent { constructor() { //... } public clearSorting(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.clearSorting(); } } |
Method: clearSorting() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.clearSorting(); |
Sort records in Gantt | Method: sortColumn(mappingName, columnSortDirection) export class AppComponent { constructor() { //... } public clearSorting(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.sortColumn("startDate","ascending"); } } |
Method: sortColumn(columnName, direction,[isMultiSort]) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.sortColumn('startDate','ascending'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Filter column Initially | Property: filterSettings.filteredColumns <ej-gantt [filterSettings]="filterSettings"> </ej-gantt> TS this.filterSettings = { filteredColumns: [ { value: "plan", field: "taskName", predicate: "and", operator: "startswith" } ] }; |
Property: filterSettings.columns <ejs-gantt [filterSettings]="filterSettings"> </ejs-gantt> TS this.filterSettings = { columns: [ { field: 'TaskName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Identify' } ] }; |
Filter records in Gantt | Method: filterColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase]) export class AppComponent { constructor() { //... } public filterColumn(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.filterColumn("taskName", "startswith", "plan"); } } |
Method: filterByColumn(fieldName, filterOperator, filterValue, [predicate], [matchCase],[ignoreAccent]) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.filterByColumn('taskName', 'startswith', 'plan'); |
Filter multiple columns | Method: filterContent(ejPredicate) export class AppComponent { constructor() { //... } public filterContent(event) { var ganttObj = $("#Gantt").ejGantt("instance"); var predicate = ej.Predicate("taskName", ej.FilterOperators.equal, "planning", false) .or("taskName", ej.FilterOperators.equal, "plan budget", false) .and("progress", ej.FilterOperators.equal, 100, true); ganttObj.filterContent(ejPredicate); } } |
Not applicable |
Clear filtered columns | Method: clearFilter() export class AppComponent { constructor() { //... } public clearFilter(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.clearFilter(); } } |
Method: clearFiltering() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.clearFiltering(); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: toolbarSettings.toolbarItems <ej-gantt [toolbarSettings]="toolbarSettings"> </ej-gantt> TS this.toolbarSettings = { showToolbar: true, toolbarItems : [ej.Gantt.ToolbarItems.Search] }; |
Property: toolbar <ejs-gantt [toolbar]="toolbar> </ejs-gantt> TS this.toolbar = ['Search']; |
Search records in Gantt | Method: searchItem(key) export class AppComponent { constructor() { //... } public searchItem(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.searchItem("plan"); } } |
Method: search(key) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.search('plan'); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: allowSelection <ej-gantt [allowSelection]="true"> </ej-gantt> |
Property: allowSelection <ejs-gantt [allowSelection]="true"> </ejs-gantt> |
To define selection type in Gantt | Property: selectionType <ej-gantt selectionType="single </ej-gantt> |
Property: selectionSettings.type <ejs-gantt [selectionSettings]="selectionSettings"> </ejs-gantt> TS this.selectionSettings = { type: 'Multiple' }; |
To define selection mode in Gantt | Property: selectionMode <ej-gantt selectionMode="cell </ej-gantt> |
Property: selectionSettings.mode <ejs-gantt [selectionSettings]="selectionSettings"> </ejs-gantt> TS this.selectionSettings = { mode: 'Cell' }; |
Select Row by Index | Property: selectedRowIndex <ej-gantt [selectedRowIndex]="selectedRowIndex"> </ej-gantt> TS this.selectedRowIndex = 3 |
Property: selectedRowIndex <ejs-gantt [selectedRowIndex]='5'> <ejs-gantt> |
To define selected cell index in Gantt | Property: selectedCellIndexes <ej-gantt [selectedCellIndexes]="selectedCellIndexes"> </ej-gantt> TS this.selectedCellIndexes = [ ]; |
Not applicable |
Select Multiple Cells | Method: selectCells(Indexes,preservePreviousSelectedCell) export class AppComponent { constructor() { //... } public selectCells(event) { var ganttObj = $("#Gantt").ejGantt("instance"); var indexes = [{rowIndex:4, cellIndex: 4}, {rowIndex: 3, cellIndex: 3}]; ganttObj.selectCells(indexes, true); |
Not Applicable |
Select multiple Rows | Method: selectMultipleRows(rowIndexes) export class AppComponent { constructor() { //... } public selectMultipleRows(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.selectMultipleRows([1,2,3]); } } |
Method: selectRows(key) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.selectionModule.selectRows([1,2,3]); |
Triggers after cell selection action | Event: cellSelected <ej-gantt id="Gantt" (cellSelected)="cellSelected($event)"> </ej-gantt> TS cellSelected(event) { } |
Event: cellSelected <ejs-gantt (cellSelected)="cellSelected($event)"> </ejs-gantt> TS public cellSelected(event) { } |
Triggers on cell selection action | Event: cellSelecting <ej-gantt id="Gantt" (cellSelecting)="cellSelecting($event)"> </ej-gantt> TS cellSelecting(event) { } |
Event: cellSelecting <ejs-gantt (cellSelecting)="cellSelecting($event)"> </ejs-gantt> TS public cellSelecting(event) { } |
Triggers after row selection action | Event: rowSelected <ej-gantt id="Gantt" (rowSelected)="rowSelected($event)"> </ej-gantt> TS rowSelected(event) { } |
Event: rowSelected <ejs-gantt (rowSelected)="rowSelected($event)"> </ejs-gantt> TS public rowSelected(event) { } |
Triggers before row selection action | Event: rowSelecting <ej-gantt id="Gantt" (rowSelecting)="rowSelecting($event)"> </ej-gantt> TS rowSelecting(event) { } |
Event: rowSelecting <ejs-gantt (rowSelecting)="rowSelecting($event)"> </ejs-gantt> TS public rowSelecting(event) { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Property: editSettings <ej-gantt [editSettings]= "editSettings"> </ej-gantt> TS this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true}; }); |
Property: editSettings <ejs-gantt [editSettings]="editSettings"> </ejs-gantt> TS this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog: true}; |
Cell Editing | Property: editSettings.editMode <ej-gantt [editSettings]="editSettings"> </ej-gantt> TS this.editSettings = { editMode: "cellEditing" }; |
Property: editSettings.mode <ejs-gantt [editSettings]="editSettings"> </ejs-gantt> TS this.editSettings = { mode: "Auto" }; |
Dialog Editing | Property: editSettings.editMode <ej-gantt [editSettings]="editSettings"> </ej-gantt> TS this.editSettings = { editMode: "normal" }; |
Property: editSettings.mode <ejs-gantt [editSettings]="editSettings"> </ejs-gantt> TS this.editSettings = { mode: "Dialog" }; |
To enable/disable taskbar editing | Property: allowGanttChartEditing <ej-gantt [allowGanttChartEditing]="true"> </ej-gantt> |
Property: editSettings.allowTaskbarEditing <ejs-gantt [editSettings]="editSettings"> </ejs-gantt> TS this.editSettings = { allowTaskbarEditing: true }; |
To enable progressbar resizing | Property: enableProgressBarResizing <ej-gantt [enableProgressBarResizing]="true"> </ej-gantt> |
Property: editSettings.allowTaskbarEditing <ejs-gantt [editSettings]="editSettings"> </ejs-gantt> TS this.editSettings = { allowTaskbarEditing: true }; |
To enable indent/ outdent option | Property: editSettings.allowIndent <ej-gantt [editSettings]="editSettings"> </ej-gantt> TS this.editSettings = { allowIndent: true }; |
Not applicable |
To define click or double click action to begin edit action | Property: editSettings.beginEditAction <ej-gantt [editSettings]="editSettings"> </ej-gantt> TS this.editSettings = { beginEditAction: 'click' }; |
Not applicable |
To define new row position in Gantt | Property: editSettings.rowPosition <ej-gantt [editSettings]="editSettings"> </ej-gantt> TS this.editSettings = { rowPosition: ej.Gantt.RowPosition.AboveSelectedRow}; |
Property: editSettings.newRowPosition <ejs-gantt [editSettings]="editSettings"> </ejs-gantt> TS this.editSettings = { newRowPosition: 'Below'}; |
To define fields in edit dialog | Property: editDialogFields <ej-gantt [editDialogFields]= "editDialogFields"> </ej-gantt> TS this.editDialogFields = [{ field: 'taskName', editType: 'stringedit' }]; |
Property: editDialogFields <ejs-gantt [editDialogFields]="editDialogFields"> <ejs/gantt> TS this.editDialogFields = [ { type: 'General', fields: ['TaskName'] } ]; |
To define fields in add dialog | Property: addDialogFields <ej-gantt [addDialogFields]="addDialogFields"> </ej-gantt> TS this.addDialogFields = [{ field: 'taskName', editType: 'stringedit' }]; |
Property: addDialogFields <ejs-gantt [addDialogFields]="addDialogFields"> </ejs-gantt> TS this.addDialogFields: [ { type: 'General', fields: ['taskName'] } ]; |
To make Gantt as read only | Property: readOnly <ej-gantt [readOnly]= "true"> </ej-gantt> |
Not Applicable |
To open Edit dialog | Method: openEditDialog() export class AppComponent { constructor() { //... } public openEditDialog(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.openEditDialog(); } } |
Method: openEditDialog() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.openEditDialog(); |
To open Add dialog | Method: openAddDialog() export class AppComponent { constructor() { //... } public openAddDialog(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.openAddDialog(); } } |
Method: openAddDialog() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.openAddDialog(); |
Add task in Gantt | Method: addRecord(data, rowPosition) export class AppComponent { constructor() { //... } public addRecord(event) { var ganttObj = $("#Gantt").ejGantt("instance"); var data = { taskId:"40", taskName:"New Task 40", startDate:"2/20/2014", endDate:"2/25/2014" }; ganttObj.addRecord(data, ej.Gantt.AddRowPosition.Child); } } |
Method: addRecord(data, rowPosition, rowIndex) @ViewChild('gantt') public ganttObj: GanttComponent; var data = { taskId:"40", taskName:"New Task 40", startDate:"2/20/2014", endDate:"2/25/2014" }; this.ganttObj.addRecord(data, 'Below', 10); |
Delete selected item | Method: deleteItem() export class AppComponent { constructor() { //... } public deleteItem(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.deleteItem(); } } |
Method: deleteRecord() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.editModule.deleteRecord(); |
Update task details by id | Method: updateRecordByTaskId(data) export class AppComponent { constructor() { //... } public updateRecordByTaskId(event) { var ganttObj = $("#Gantt").ejGantt("instance"); var data = { taskID: 4, taskName: "updated value"}; ganttObj.updateRecordByTaskId(data); } } |
Method: updateRecordByID @ViewChild('gantt') public ganttObj: GanttComponent; var data = { taskID: 4, taskName: "updated value"}; this.ganttObj.updateRecordByID(data); |
Delete dependency | Method: deleteDependency(fromTaskId,toTaskId) export class AppComponent { constructor() { //... } public deleteDependency(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.deleteDependency(3, 6); |
Not applicable |
Save Edit | Method: saveEdit() export class AppComponent { constructor() { //... } public saveEdit(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.saveEdit(); |
Not applicable |
Cancel Edit | Method: cancelEdit() export class AppComponent { constructor() { //... } public cancelEdit(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.cancelEdit(); |
Method: cancelEdit() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.cancelEdit() |
Triggers for every Gantt action before it get started | Event: actionBegin <ej-gantt id="Gantt" (actionBegin)="actionBegin($event)"> </ej-gantt> TS actionBegin(event) { } |
Event: actionBegin <ejs-gantt (actionBegin)="actionBegin($event)"> </ejs-gantt> TS public actionBegin(event) { } |
Triggers for after every Gantt action completed | Event: actionComplete <ej-gantt id="Gantt" (actionComplete)="actionComplete($event)"> </ej-gantt> TS actionComplete(event) { } |
Event: actionComplete <ejs-gantt (actionComplete)="actionComplete($event)"> </ejs-gantt> TS public actionComplete(event) { } |
Triggers while resizing, dragging the taskbar | Event: taskbarEditing <ej-gantt id="Gantt" (taskbarEditing)="taskbarEditing($event)"> </ej-gantt> TS taskbarEditing(event) { } |
Event: taskbarEditing <ejs-gantt (taskbarEditing)="taskbarEditing($event)"> </ejs-gantt> TS public taskbarEditing(event) { } |
Triggers after taskbar resize, drag action | Event: taskbarEdited <ej-gantt id="Gantt" (taskbarEdited)="taskbarEdited($event)"> </ej-gantt> TS taskbarEdited(event) { } |
Event: taskbarEdited <ejs-gantt (taskbarEdited)="taskbarEdited($event)"> </ejs-gantt> TS public taskbarEdited(event) { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable/disable column resize | Property: allowColumnResize <ej-gantt [allowColumnResize]="true"> </ej-gantt> |
Property: allowResizing <ejs-gantt [allowResizing]="true"> <ejs/gantt> |
To enable/disable column chooser | Property: showColumnChooser <ej-gantt [showColumnChooser]="true"> </ej-gantt> |
Property: showColumnMenu <ejs-gantt [showColumnMenu]="true"> <ejs/gantt> |
To enable/disable column add, remove option in column menu | Property: showColumnOptions <ej-gantt [showColumnOptions]="true"> </ej-gantt> |
Not applicable |
Tree column index | Property: treeColumnIndex <ej-gantt [treeColumnIndex]= "1"> </ej-gantt> |
Property: treeColumnIndex <ejs-gantt [treeColumnIndex]= "2"> </ejs-gantt> |
To define column fields in column menu | Property: columnDialogFields <ej-gantt [columnDialogFields]="columnDialogFields"> </ej-gantt> TS this.columnDialogFields = ["field", "headerText", "editType", "width", "visible", "allowSorting", "textAlign", "headerTextAlign"]; |
Not applicable |
Show column | Method: showColumn(headerText) export class AppComponent { constructor() { //... } public showColumn(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.showColumn("Task Name"); |
Method: showColumn(keys, showBy) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.showColumn("TaskName"); |
Hide column | Method: hideColumn(headerText) export class AppComponent { constructor() { //... } public hideColumn(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.hideColumn("Task Name"); |
Method: hideColumn(keys, showBy) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.hideColumn("TaskName"); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To configure default toolbars of Gantt | Property: toolbarSettings.toolbarItems <ej-gantt [toolbarSettings]= "toolbarSettings"> </ej-gantt> TS this.toolbarSettings = { showToolbar: true, toolbarItems: [ ej.Gantt.ToolbarItems.Add, ej.Gantt.ToolbarItems.Edit, ej.Gantt.ToolbarItems.Delete, ej.Gantt.ToolbarItems.Update, ej.Gantt.ToolbarItems.Cancel, ej.Gantt.ToolbarItems.ExpandAll, ej.Gantt.ToolbarItems.CollapseAll, ej.Gantt.ToolbarItems.Search, ej.Gantt.ToolbarItems.PrevTimeSpan, ej.Gantt.ToolbarItems.NextTimeSpan ], }; </ej-gantt> |
Property: toolbar <ejs-gantt [toolbar]="toolbar"> </ejs-gantt> TS this.toolbar = ['Add','Edit','Delete','Update','Cancel','ExpandAll', 'CollapseAll','Search','PrevTimeSpan','NextTimeSpan']; |
Other toolbars | Property: toolbarSettings.toolbarItems <ej-gantt [toolbarSettings]= "toolbarSettings"> </ej-gantt> TS this.toolbarSettings = { showToolbar: true, toolbarItems: [ ej.Gantt.ToolbarItems.Indent, ej.Gantt.ToolbarItems.Outdent, ej.Gantt.ToolbarItems.CriticalPath, ej.Gantt.ToolbarItems.ExcelExport, ej.Gantt.ToolbarItems.PdfExport ]; |
Not applicable |
Custom toolbar | Property: toolbarSettings.customToolbarItems <ej-gantt [toolbarSettings]= "toolbarSettings"> </ej-gantt> TS this.toolbarSettings = { showToolbar: true, customToolbarItems: [{ text: "ShowBaseline", tooltipText: "Show Baseline" }, { text: "Reset", tooltipText:"Reset" }] }; |
Property: toolbar <ejs-gantt [toolbar]="toolbar"> </ejs-gantt> TS this.toolbar = [{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right'}]; |
Triggers when toolbar items clicked | Event: toolbarClick <ej-gantt id="Gantt" (toolbarClick)="toolbarClick($event)"> </ej-gantt> TS toolbarClick(event) { } |
Event: toolbarClick <ejs-gantt (toolbarClick)="toolbarClick($event)"> </ejs-gantt> TS public toolbarClick(event) { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable taskbar tooltip | Property: enableTaskbarTooltip <ej-gantt [enableTaskbarTooltip]="true"> </ej-gantt> |
Property: tooltipSettings.showTooltip <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { showTooltip: true } > |
To define tooltip for all cells | Property: cellTooltipTemplate <ej-gantt cellTooltipTemplate="#CustomToolTip"> </ej-gantt> |
Not applicable |
To define tooltip template for row drag action | Property: dragTooltip <ej-gantt [dragTooltip]= "dragTooltip"> </ej-gantt> TS this.dragTooltip = { showTooltip: true }; |
Not applicable |
To enable taskbar editing tooltip | Property: enableTaskbarDragTooltip <ej-gantt [enableTaskbarDragTooltip]="true"> </ej-gantt> |
Not Applicable |
To enable/disable tooltip for grid cells | Property: showGridCellTooltip <ej-gantt [showGridCellTooltip]="true"> </ej-gantt> |
Not applicable |
To enable/disable tooltip for grid cells | Property: showGridExpandCellTooltip <ej-gantt [showGridExpandCellTooltip]="true"> </ej-gantt> |
Not applicable |
To define taskbar tooltip template in Gantt | Property: taskbarTooltipTemplate <ej-gantt taskbarTooltipTemplate="template tooltip string"> </ej-gantt> |
Property: tooltipSettings.taskbar <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { taskbar: "template tooltip string: } > |
To define taskbar tooltip template id in Gantt | Property: taskbarTooltipTemplateId <ej-gantt taskbarTooltipTemplateId = "#templateId"> </ej-gantt> |
Property: tooltipSettings.taskbar <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { taskbar : "#templateId" } > |
To define tooltip template for connector line | Property: predecessorTooltipTemplate <ej-gantt predecessorTooltipTemplate= "predecessorTooltipTemplate"> </ej-gantt> |
Property: tooltipSettings.connectorLine <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { connectorLine : "predecessorTooltip" }; |
To define template for progress resize tooltip | Property: progressbarTooltipTemplate <ej-gantt progressbarTooltipTemplate= "progressbarTooltipTemplate"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { editing : "template tooltip string" }; |
To define template id for progress resize tooltip | Property: progressbarTooltipTemplateId <ej-gantt progressbarTooltipTemplateId= "#tooltipTemplateID"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { editing : "#progressResize" }; |
To define tooltip template for taskbar edit action | Property: taskbarEditingTooltipTemplate <ej-gantt taskbarEditingTooltipTemplate = "tooltipTemplate"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { editing : "template tooltip string" }; |
To define tooltip template id for taskbar edit action | Property: taskbarEditingTooltipTemplateId <ej-gantt taskbarEditingTooltipTemplateId = "#templateId"> </ej-gantt> |
Property: tooltipSettings.editing <ejs-gantt [tooltipSettings]="tooltipSettings"> ></ejs-gantt> TS this.tooltipSettings = { editing : "#templateId" } > |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To configure timeline settings in Gantt | Property: scheduleHeaderSettings <ej-gantt [scheduleHeaderSettings]="scheduleHeaderSettings"> <ej-gantt> TS this.scheduleHeaderSettings = { weekHeaderFormat: "MMM dd , yyyy", dayHeaderFormat: "dd,MM,yy", yearHeaderFormat: "yyyy", monthHeaderFormat: 'MMM", hourHeaderFormat: "HH", scheduleHeaderType: "week", minutesPerInterval: "auto", weekendBackground: "#F2F2F2", timescaleStartDateMode: "auto", timescaleUnitSize:"100%", weekStartDay: 0, updateTimescaleView: true }> </ej-gantt> |
Property: timelineSettings <ejs-gantt [timelineSettings]="timelineSettings"> </ejs-gantt> TS this.timelineSettings = { timelineViewMode: 'Week', timelineUnitSize: 33, weekStartDay: 0, showTooltip: true, weekendBackground: ' ' updateTimescaleView: true, topTier: { unit: 'Week', format: 'MMM dd, y', count: 1, formatter: null }, bottomTier: { unit: 'Day', format: 'dd', count: 1, formatter: null } }; |
To define weekend background in Gantt | Property: weekendBackground <ej-gantt weekendBackground= "blue"> </ej-gantt>; |
Not applicable |
To Highlight weekends | Property: highlightWeekends <ej-gantt [highlightWeekends]="true"> </ej-gantt>; |
Property: highlightWeekends <ejs-gantt [highlightWeekends]="true"> </ejs-gantt> |
To include weekends | Property: includeWeekend <ej-gantt [includeWeekend]="true"> </ej-gantt>; |
Property: includeWeekend <ejs-gantt [includeWeekend]="true"> </ejs-gantt> |
To define project start date in Gantt | Property: scheduleStartDate <ej-gantt scheduleStartDate = "3/20/2018"> </ej-gantt> |
Property: projectStartDate <ejs-gantt [projectStartDate]="projectStartDate"> </ej-gantt> TS this. projectStartDate = new Date('3/20/2018'); |
To define project end date in Gantt | Property: scheduleEndDate <ej-gantt scheduleEndDate = "3/20/2018"> </ej-gantt> |
Property: projectEndDate <ejs-gantt [projectEndDate]="projectEndDate"> </ej-gantt> TS this. projectEndDate = new Date('3/20/2018'); |
Update project start date and end date | Method: updateScheduleDates(startDate,endDate) export class AppComponent { constructor() { //... } public updateScheduleDates(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.updateScheduleDates("5/25/2017", "9/27/2017"); } } |
Method: updateProjectDates(startDate, endDate, isTimelineRoundOff) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.updateProjectDates("5/25/2017", "9/27/2017", true); |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable/disable row drag and drop | Property: allowDragAndDrop <ej-gantt [allowDragAndDrop]="true"> </ej-gantt> |
Not applicable |
To enable/disable alternate row background | Property: enableAltRow <ej-gantt [enableAltRow]="true"> </ej-gantt> |
Not applicable |
To add Row height | Property: rowHeight <ej-gantt [rowHeight]="60"> </ej-gantt> |
Property: rowHeight <ejs-gantt [rowHeight]="60"> </ejs-gantt> |
To render parent in collapsed state | Property: enableCollapseAll <ej-gantt [enableCollapseAll]="true"> </ej-gantt> |
Property: collapseAllParentTasks <ejs-gantt [collapseAllParentTasks]="true" > |
Expand/collapse record by id | Method: expandCollapseRecord(taskId) export class AppComponent { constructor() { //... } public expandCollapseRecord(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.expandCollapseRecord(1); } } |
Method: collapseByID() expandByID() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.expandByID(1); this.ganttObj.collapseByID(1); |
Expand all rows | Method: expandAllItems() export class AppComponent { constructor() { //... } public expandAllItems(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.expandAllItems(); } } |
Method: expandAll() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.expandAll(); |
Collapse all rows | Method: collapseAllItems() export class AppComponent { constructor() { //... } public collapseAllItems(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.collapseAllItems(); } } |
Method: collapseAll() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.collapseAll(); |
Triggers after row collapse action | Event: collapsed <ej-gantt id="Gantt" (collapsed)="collapsed($event)"> </ej-gantt> TS collapsed(event) { } |
Event: collapsed <ejs-gantt (collapsed)="collapsed($event)"> </ejs-gantt> TS public collapsed(event) { } |
Triggers before row collapse action | Event: collapsing <ej-gantt id="Gantt" (collapsing)="collapsing($event)"> </ej-gantt> TS collapsing(event) { } |
Event: collapsing <ejs-gantt (collapsing)="collapsing($event)"> </ejs-gantt> TS public collapsing(event) { } |
Triggers after Gantt row was expanded | Event: expanded <ej-gantt id="Gantt" (expanded)="expanded($event)"> </ej-gantt> TS expanded(event) { } |
Event: expanded <ejs-gantt (expanded)="expanded($event)"> </ejs-gantt> TS public expanded(event) { } |
Triggers before Gantt row expand action | Event: expanding <ej-gantt id="Gantt" (expanding)="expanding($event)"> </ej-gantt> TS expanding(event) { } |
Event: expanding <ejs-gantt (expanding)="expanding($event)"> </ejs-gantt> TS public expanding(event) { } |
Triggers before grid rows render action | Event: rowDataBound <ej-gantt id="Gantt" (rowDataBound)="rowDataBound($event)"> </ej-gantt> TS rowDataBound(event) { } |
Event: rowDataBound <ejs-gantt (rowDataBound)="rowDataBound($event)"> </ejs-gantt> TS public rowDataBound(event) { } |
Triggers while dragging a row | Event: rowDrag <ej-gantt id="Gantt" (rowDrag)="rowDrag($event)"> </ej-gantt> TS rowDrag(event) { } |
Not applicable |
Triggers while while start to drag row | Event: rowDragStart <ej-gantt id="Gantt" (rowDragStart)="rowDragStart($event)"> </ej-gantt> TS rowDrag(event) { } |
Not applicable |
Triggers while while drop a row | Event: rowDragStop <ej-gantt id="Gantt" (rowDragStop)="rowDragStop($event)"> </ej-gantt> TS rowDrag(event) { } |
Not applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To map resources | Property: resources <ej-gantt [resources]="resources"> </ej-gantt> TS this.resources =[{id:1; name:"jack" }]; |
Property: resources <ejs-gantt [resources]="resources"> </ejs-gantt> TS this.resources =[{ resourceId: 1, resourceName: 'Martin Tamer' }]; |
To map resource id field from resource collection | Property: resourceIdMapping <ej-gantt resourceIdMapping ="id"> </ej-gantt> |
Property: resourceIDMapping <ejs-gantt resourceIDMapping='resourceId'> </ejs-gantt> |
To map resource name field from resource collection | Property: resourceNameMapping <ej-gantt resourceNameMapping = "name"> </ej-gantt> |
Property: resourceNameMapping <ejs-gantt resourceNameMapping='resourceName'> </ejs-gantt> |
To map resource unit field from assigned resource collection | Property: resourceUnitMapping <ej-gantt resourceUnitMapping = "Unit"> </ej-gantt> |
Not applicable |
To define resource view type of Gantt | Property: viewType <ej-gantt [viewType]= "viewType"> </ej-gantt> TS this.viewType = ej.Gantt.ViewType.ResourceView> </ej-gantt> |
Not applicable |
To define mapping property for resource collection in resource view Gantt | Property: resourceCollectionMapping <ej-gantt resourceCollectionMapping= "resources"> </ej-gantt> |
Not Applicable |
To map task collection from resources for resource view Gantt | Property: taskCollectionMapping <ej-gantt taskCollectionMapping= "tasks"> </ej-gantt> |
Not applicable |
To map group id for resource view Gantt | Property: groupIdMapping <ej-gantt groupIdMapping= "groupId"> </ej-gantt> |
Not Applicable |
To map group name for resource view Gantt | Property: groupNameMapping <ej-gantt groupNameMapping= "groupName"> </ej-gantt> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To render baseline | Property: renderBaseline <ej-gantt [renderBaseline] = "true"> </ej-gantt> |
Property: renderBaseline <ejs-gantt [renderBaseline]="true"> </ejs-gantt> |
To define baselineColor | Property: baselineColor <ej-gantt [baselineColor]= "blue"> </ej-gantt> |
Property: baselineColor <ejs-gantt baselineColor="red"> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To enable context menu | Property: enableContextMenu <ej-gantt [enableContextMenu]="true"> </ej-gantt> |
Property: enableContextMenu <ejs-gantt [enableContextMenu]="true" > |
To define custom menu items | Event: contextMenuOpen <ej-gantt id="Gantt" (contextMenuOpen)="contextMenuOpen($event)"> </ej-gantt> TS contextMenuOpen(event) { event.contextMenuItems.push({ headerText: "Expand/Collapse", menuId: "expand", iconPath: "url(Expand-02-WF.png)", eventHandler: function() { //event handler for custom menu items } }); } } |
Property: contextMenuItems <ejs-gantt [contextMenuItems]="contextMenuItems"> </ejs-gantt> TS this.contextMenuItems = [ { text: 'Collapse the Row', target: '.e-content', id: 'collapserow' } as ContextMenuItemModel, { text: 'Expand the Row', target: '.e-content', id: 'expandrow' } as ContextMenuItemModel ]; |
Triggers before context menu opens | Event: contextMenuOpen <ej-gantt id="Gantt" (contextMenuOpen)="contextMenuOpen($event)"> </ej-gantt> TS contextMenuOpen(event) { } |
Event: contextMenuOpen <ejs-gantt (contextMenuOpen)="contextMenuOpen($event)"> </ejs-gantt> TS public contextMenuOpen(event) { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define task scheduling mode in Gantt | Property: taskSchedulingMode <ej-gantt [taskSchedulingMode]= "taskSchedulingMode"> </ej-gantt> TS this.taskSchedulingMode = ej.Gantt.TaskSchedulingMode.Auto; |
Not applicable |
To map task scheduling mode from data source | Property: taskSchedulingModeMapping <ej-gantt taskSchedulingModeMapping= "taskMode"> </ej-gantt> |
Not applicable |
To enable schedule date validation while task predecessor draw action | Property: validateManualTasksOnLinking <ej-gantt [validateManualTasksOnLinking]="true"> </ej-gantt> |
Not applicable |
To define working time range of day | Property: dayWorkingTime <ej-gantt [dayWorkingTime]="dayWorkingTime"> </ej-gantt> TS this.dayWorkingTime = [{ "from": "08:00 AM", "to": "12:00 PM" }]; |
Property: dayWorkingTime <ejs-gantt [dayWorkingTime]="dayWorkingTime"> </ejs-gantt> TS this.dayWorkingTime = [ { from: 9, to: 18 } ]; |
To enable rounding off date value in taskbar editing | Property: roundOffDayworkingTime <ej-gantt [roundOffDayworkingTime]="true"> </ej-gantt> |
Not applicable |
To define non-working background color | Property: nonWorkingBackground <ej-gantt nonWorkingBackground = "#0000FF"> </ej-gantt> |
Not Applicable |
To highlight non working time range in Gantt | Property: highlightNonWorkingTime <ej-gantt [highlightNonWorkingTime]="true"> </ej-gantt> |
Not Applicable |
To set working days of a week | Property: workweek <ej-gantt [workweek]= "workweek"> </ej-gantt> TS this.workweek = ["Sunday","Monday","Tuesday","Wednesday","Thursday"]; |
Property: workWeek <ejs-gantt [workWeek]="workWeek"> </ejs-gantt> TS this.workWeek = ["Sunday","Monday","Tuesday","Wednesday","Thursday"]; |
To enable/disable Unscheduled tasks | Property: allowUnscheduledTask <ej-gantt [allowUnscheduledTask]="true"> </ej-gantt> |
Property: allowUnscheduledTasks <ejs-gantt allowUnscheduledTasks="true"> </ejs-gantt> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define taskbar background type in Gantt | Property: taskbarBackground <ej-gantt taskbarBackground = "#F2F2F2"> </ej-gantt> |
Not applicable |
To define background color for parent taskbar | Property: parentTaskbarBackground <ej-gantt parentTaskbarBackground= "#F2F2F2"> </ej-gantt> |
Not applicable |
To add Taskbar height | Property: taskbarHeight <ej-gantt [taskbarHeight]="25" [rowHeight]="40"> </ej-gantt> |
Property: taskbarHeight <ejs-gantt [taskbarHeight]="50" [rowHeight]="60"> </ejs-gantt> |
To define background color for parent progress bar | Property: parentProgressbarBackground <ej-gantt parentProgressbarBackground= "#F2F2F2"> </ej-gantt> |
Not applicable |
To define background color fro progress bar | Property: progressbarBackground <ej-ganttprogressbarBackground= "#F2F2F2"> </ej-gantt> |
Not Applicable |
To define height for progress bar | Property: progressbarHeight <ej-gantt progressbarHeight= "100"> </ej-gantt> |
Not Applicable |
To render progress status taskbar | Property: showProgressStatus <ej-gantt [showProgressStatus] = "true"> </ej-gantt> |
Property: labelSettings.taskLabel <ejs-gantt [labelSettings]="labelSettings"> </ejs-gantt> TS this.labelSettings = { taskLabel: '${Progress}%' }; |
To set connectorline width | Property: connectorlineWidth <ej-gantt [connectorlineWidth]= 2> </ej-gantt> |
Property: connectorLineWidth <ejs-gantt [connectorLineWidth]='3'> </ejs-gantt> |
To set connectorline background | Property: connectorLineBackground <ej-gantt connectorLineBackground="#F2F2F2">> </ej-gantt> |
Property: connectorLineBackground <ejs-gantt connectorLineBackground="red"> </ejs-gantt> |
To define weekend background in Gantt | Property: weekendBackground <ej-gantt weekendBackground = "blue"> </ej-gantt> |
Not applicable |
To define taskbar template | Property: taskbarTemplate <ej-gantt taskbarTemplate= "#TaskbarTemplate"> </ej-gantt> |
Property: taskbarTemplate <ejs-gantt taskbarTemplate="#TaskbarTemplate"> </ejs-gantt> |
To define parent taskbar template | Property: parentTaskbarTemplate <ej-gantt parentTaskbarTemplate= "#parentTaskbarTemplate"> </ej-gantt> |
Property: parentTaskbarTemplate <ejs-gantt parentTaskbarTemplate= "#parentTaskbarTemplate"> </ejs-gantt> |
To define milestone template | Property: milestoneTemplate <ej-gantt milestoneTemplate= "#milestoneTemplate"> </ej-gantt> |
Property: milestoneTemplate <ejs-gantt milestoneTemplate= '#MilestoneTemplate'> </ejs-gantt> |
To define right task label | Property: rightTaskLabelMapping <ej-gantt rightTaskLabelMapping = "taskName"> </ej-gantt> |
Property: labelSettings.rightLabel <ejs-gantt [labelSettings]="labelSettings"> </ejs-gantt> TS this.labelSettings = { rightLabel: '${taskData.Progress}' }; |
To define left task label | Property: leftTaskLabelMapping <ej-gantt leftTaskLabelMapping= "taskId"> </ej-gantt> |
Property: labelSettings.leftLabel <ejs-gantt [labelSettings]="labelSettings"> </ejs-gantt> TS this.labelSettings = { leftLabel: 'TaskID' }; |
To define right task label template | Property: rightTaskLabelTemplate <ej-gantt rightTaskLabelTemplate = "#customTaskRightLabel"> </ej-gantt> |
Property: labelSettings.rightLabel <ejs-gantt [labelSettings]="labelSettings"> </ejs-gantt> TS this.labelSettings = { rightLabel: '#rightLabel'}; |
To define left task label template | Property: leftTaskLabelTemplate <ej-gantt leftTaskLabelTemplate= "#customTaskLeftLabel"> </ej-gantt> |
Property: labelSettings.leftLabel <ejs-gantt [labelSettings]="labelSettings"> </ejs-gantt> TS this.labelSettings = { leftLabel: '#leftLabel'}; |
To render resource names right to taskbar | Property: showResourceNames <ej-gantt [showResourceNames]="true"> </ej-gantt> |
Property: labelSettings.rightLabel <ejs-gantt [labelSettings]="labelSettings"> </ejs-gantt> TS this.labelSettings = { rightLabel: 'resourceInfo'}; |
To render task name left to taskbar | Property: showTaskNames <ej-gantt [showTaskNames]="true"> </ej-gantt> |
Property: labelSettings.leftLabel <ejs-gantt [labelSettings]="labelSettings"> </ejs-gantt> TS this.labelSettings = { leftLabel: 'taskName'}; |
Triggers on taskbar rendering action | Event: queryTaskbarInfo <ej-gantt id="Gantt" (queryTaskbarInfo)="queryTaskbarInfo($event)"> </ej-gantt> TS queryTaskbarInfo(event) { } |
Event: queryTaskbarInfo <ejs-gantt (queryTaskbarInfo)="queryTaskbarInfo($event)"> </ejs-gantt> TS public queryTaskbarInfo(event) { } |
Triggers on grid cell rendering action | Event: queryCellInfo <ej-gantt id="Gantt" (queryCellInfo)="queryCellInfo($event)"> </ej-gantt> TS queryCellInfo(event) { } |
Event: queryCellInfo <ejs-gantt (queryCellInfo)="queryCellInfo($event)"> </ejs-gantt> TS public queryCellInfo(event) { } |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define striplines | Property: stripLines <ej-gantt [stripLines]= "stripLines"> </ej-gantt> TS this.stripLines = [ { day: "01/02/2014",label: "Project Release", lineStyle: "dotted", lineColor: "blue", lineWidth: 2 } ]; |
Property: eventMarkers <ejs-gantt [eventMarkers]="eventMarkers"> </ejs-gantt> TS this.eventMarkers = [ { day: '04/10/2019', cssClass: 'e-custom-event-marker', label: 'Project approval and kick-off'} ]; |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define holidays | Property: holidays <ej-gantt [holidays]= "holidays"> </ej-gantt> TS this.holidays = [ { day: "2/03/2014", label: " Public holiday", background: "yellow" } ]; |
Property: holidays <ejs-gantt [holidays] = "holidays"> </ejs-gantt> TS this.holidays = [ { from: "04/04/2019", to:"04/05/2019", label: " Public holidays", cssClass:"e-custom-holiday"} ]; |
To define days in holiday collection | Property: holidays.day <ejs-gantt [holidays] = "holidays"> </ejs-gantt> TS this.holidays = [ { day:"12/2/2000" } ]; |
Property: holidays.from <ejs-gantt [holidays] = "holidays"> </ejs-gantt> TS this.holidays = [ { from: "3/20/2018" } ]; |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
To define height for Gantt | Property: sizeSettings.height <ej-gantt [sizeSettings]= "sizeSettings"> </ej-gantt> TS this.sizeSettings = { height: "450px" }; |
Property: height <ejs-gantt height="430px"> </ejs-gantt> |
To define width for Gantt | Property: sizeSettings.width <ej-gantt [sizeSettings]= "sizeSettings"> </ej-gantt> TS this.sizeSettings = { width: "700px" }> </ej-gantt> |
Property: width <ejs-gantt width="700px"> </ejs-gantt> |
To change splitter position | Property: splitterPosition <ej-gantt [splitterSettings]= "splitterSettings"[splitterPosition] = "50%"> </ej-gantt> |
Not applicable |
To change splitter by position | Property: splitterSettings.position <ej-gantt [splitterSettings]= "splitterSettings"> </ej-gantt> TS this.splitterSettings = { position: "50%" }; |
Property: splitterSettings.position <ejs-gantt [splitterSettings]="splitterSettings"> </ejs-gantt> TS this.splitterSettings = { position: "50%" }; |
To change splitter by index | Property: splitterSettings.index <ej-gantt [splitterSettings]= "splitterSettings"> </ej-gantt> TS this.splitterSettings = { index : "3" }; |
Property: splitterSettings.columnIndex <ejs-gantt [splitterSettings]="splitterSettings"> </ejs-gantt> TS this.splitterSettings = { columnIndex : "3" }; |
To define view type of Gantt | Property: viewType <ej-gantt [viewType]= "viewType"> </ej-gantt> TS this.viewType = ej.Gantt.ViewType.ProjectView> </ej-gantt> |
Not applicable |
To enable Localization | Property: locale <ej-gantt locale="fr-FR"> </ej-gantt> |
Property: locale <ejs-gantt locale="fr-FR"> </ejs-gantt> |
To specify the date format for Gantt | Property: dateFormat <ej-gantt dateFormat= "dd/MM/yyyy"> </ej-gantt> |
Property: dateFormat <ejs-gantt dateFormat= "dd/MM/yyyy"> </ejs-gantt> |
To enable/disable key navigation | Property: allowKeyboardNavigation <ej-gantt [allowKeyboardNavigation]="true"> </ej-gantt> |
Property: allowKeyboard <ejs-gantt [allowKeyboard]="true" > </ejs-gantt> |
To enable serial number support | Property: enableSerialNumber <ej-gantt [enableSerialNumber]="true"> </ej-gantt> |
Not applicable |
To enable/disable predecessor validation | Property: enablePredecessorValidation <ej-gantt [enablePredecessorValidation]="true"> </ej-gantt> |
Property: enablePredecessorValidation <ejs-gantt [enablePredecessorValidation]="true"> </ejs-gantt> |
To set timescale for working hours | Property: workingTimeScale <ej-gantt [workingTimeScale]= "workingTimeScale"> </ej-gantt> TS this.workingTimeScale = ej.Gantt.workingTimeScale.TimeScale24Hours; |
Property: dayWorkingTime <ejs-gantt [dayWorkingTime]="dayWorkingTime"> </ejs-gantt> TS this.dayWorkingTime = [ { from: 0, to: 24 } ]; |
To enable work break down structure in Gantt | Property: enableWBS <ej-gantt [enableWBS] ="true"> </ej-gantt> |
Not Applicable |
To enable work break down structure predecessor in Gantt | Property: enableWBSPredecessor <ej-gantt [enableWBSPredecessor] ="true"> </ej-gantt> |
Not Applicable |
To map work value from data source | Property: workMapping <ej-gantt workMapping = "estimatedHours"> </ej-gantt> |
Not applicable |
To define work unit for tasks | Property: workUnit <ej-gantt [workUnit]= "workUnit"> </ej-gantt> TS this.workUnit = ej.Gantt.WorkUnit.Day; |
Not applicable |
To define task type in Gantt | Property: taskType <ej-gantt [taskType]= "taskType"> </ej-gantt> TS this.taskType = ej.Gantt.TaskType.FixedWork; |
Not applicable |
To enable/disable multiple exporting option | Property: allowMultipleExporting <ej-gantt [allowMultipleExporting]="true"> </ej-gantt> |
Not applicable |
To enable virtual rendering in Gantt | Property: enableVirtualization <ej-gantt [enableVirtualization] ="true"> </ej-gantt> |
Not Applicable |
Change splitter position dynamically | Method: setSplitterIndex(index) setSplitterPosition(width) export class AppComponent { constructor() { //... } public setSplitterIndex(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.setSplitterIndex(3); this.ganttObj.ejGantt("setSplitterPosition","40%"); |
Method: setSplitterPosition(value,type) @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.setSplitterPosition('40%', 'position'); this.ganttObj.setSplitterPosition(3, 'columnIndex'); |
To destroy Gantt | Method: destroy() export class AppComponent { constructor() { //... } public destroy(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.destroy(); } } |
Method: destroy() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.destroy(); |
To update task id | Method: updateTaskId(currentId, newId) export class AppComponent { constructor() { //... } public updateTaskId(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.updateTaskId(5, 7); } } |
Not applicable |
To set scroll top for Gantt | Method: setScrollTop(top) export class AppComponent { constructor() { //... } public updateTaskId(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.setScrollTop(50); } } |
Method: setScrollTop() @ViewChild('gantt') public ganttObj: GanttComponent; this.ganttObj.setScrollTop(200); |
To get columns to edit in resource view | Method: getResourceViewEditColumns() export class AppComponent { constructor() { //... } public getResourceViewEditColumns(event) { var ganttObj = $("#Gantt").ejGantt("instance"); columns = ganttObj.getResourceViewEditColumns() |
Not applicable |
Show/hide critical path in Gantt | Method: showCriticalPath(isShown) export class AppComponent { constructor() { //... } public showCriticalPath(event) { var ganttObj = $("#Gantt").ejGantt("instance"); ganttObj.showCriticalPath(true); } } |
Not applicable |
Triggers on initialization of Gantt control | Event: load <ej-gantt id="Gantt" (load)="load($event)"> </ej-gantt> TS load(event) { } |
Event: load <ejs-gantt (load)="load($event)"> </ejs-gantt> TS public load(event) { } |
Triggers after splitter resize action | Event: splitterResized <ej-gantt id="Gantt" (splitterResized)="splitterResized($event)"> </ej-gantt> TS splitterResized(event) { } |
Event: splitterResized <ejs-gantt (splitterResized)="splitterResized($event)"> </ejs-gantt> TS public splitterResized(event) { } |
Triggers when taskbar item is clicked | Event: taskbarClick <ej-gantt id="Gantt" (taskbarClick)="taskbarClick($event)"> </ej-gantt> TS taskbarClick(event) { } |
Not applicable |