The Gantt control allows you to perform quick actions by using context menu. When right-clicking the context menu, the context menu options are shown. To enable this feature, set the enableContextMenu
to true. The default context menu options are enabled using the editSettings
property. The context menu options can be customized using the contextMenuItems
property.
To use the context menu, inject the ContextMenu
module into the Gantt component.
The default items are listed in the following table.
Items | Description |
---|---|
AutoFit |
Auto-fits the current column. |
AutoFitAll |
Auto-fits all columns. |
SortAscending |
Sorts the current column in ascending order. |
SortDescending |
Sorts the current column in descending order. |
TaskInformation |
Edits the current task. |
Add |
Adds a new row to the Gantt. |
Indent |
Indent the selected record to one level. |
Outdent |
Outdent the selected record to one level. |
DeleteTask |
Deletes the current task. |
Save |
Saves the edited task. |
Cancel |
Cancels the edited task. |
DeleteDependency |
Deletes the current dependency task link. |
Convert |
Converts current task to milestone or vice-versa. |
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
}
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} editSettings={this.editSettings} allowSorting={true} allowResizing={true} enableContextMenu={true} height='450px'>
<Inject services={[Edit, ContextMenu, Selection, Sort, Resize]}/>
</GanttComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.1.57/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize, EditSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
public editSettings: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} editSettings={this.editSettings} allowSorting={true} allowResizing={true} enableContextMenu={true} height = '450px'>
<Inject services={[Edit, ContextMenu, Selection, Sort, Resize]} />
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));
The custom context menu items can be added by defining the contextMenuItems
as a collection of contextMenuItemModel
.
Actions for the customized items can be defined in the contextMenuClick
event and the visibility of customized items can be defined in the contextMenuOpen
event.
To create custom context menu items for header area, define the target property as .e-gridheader
.
The following sample shows context menu item for parent rows to expand or collapse child rows in the content area and a context menu item to hide columns in the header area.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
this.contextMenuItems = ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
{ text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },
{ text: 'Expand the Row', target: '.e-content', id: 'expandrow' },
{ text: 'Hide Column', target: '.e-gridheader', id: 'hidecols' }
];
}
contextMenuClick(args) {
let record = args.rowData;
if (args.item.id === 'collapserow') {
this.ganttInstance.collapseByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'expandrow') {
this.ganttInstance.expandByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'hidecols') {
this.ganttInstance.hideColumn(args.column.headerText);
}
}
;
contextMenuOpen(args) {
let record = args.rowData;
if (args.type !== 'Header') {
if (!record.hasChildRecords) {
args.hideItems.push('Collapse the Row');
args.hideItems.push('Expand the Row');
}
else {
if (record.expanded) {
args.hideItems.push("Expand the Row");
}
else {
args.hideItems.push("Collapse the Row");
}
}
}
}
;
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} editSettings={this.editSettings} allowSorting={true} allowResizing={true} enableContextMenu={true} contextMenuItems={this.contextMenuItems} contextMenuClick={this.contextMenuClick.bind(this)} contextMenuOpen={this.contextMenuOpen.bind(this)} ref={gantt => this.ganttInstance = gantt} height='450px'>
<Inject services={[Edit, ContextMenu, Selection, Sort, Resize]}/>
</GanttComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/20.1.57/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, ContextMenu, Sort, Resize, EditSettingsModel, IGanttData } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
private ganttInstance: any;
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
public editSettings: EditSettingsModel = {
allowAdding: true,
allowEditing: true,
allowDeleting: true
};
public contextMenuItems: any = ['AutoFitAll', 'AutoFit', 'TaskInformation', 'DeleteTask', 'Save', 'Cancel', 'SortAscending', 'SortDescending', 'Add', 'DeleteDependency', 'Convert',
{ text: 'Collapse the Row', target: '.e-content', id: 'collapserow' },
{ text: 'Expand the Row', target: '.e-content', id: 'expandrow' },
{ text: 'Hide Column', target: '.e-gridheader', id: 'hidecols' }
];
public contextMenuClick (args: any) {
let record: IGanttData = args.rowData;
if (args.item.id === 'collapserow') {
this.ganttInstance.collapseByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'expandrow') {
this.ganttInstance.expandByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'hidecols') {
this.ganttInstance.hideColumn(args.column.headerText);
}
};
public contextMenuOpen (args: any) {
let record: IGanttData = args.rowData;
if (args.type !== 'Header') {
if (!record.hasChildRecords) {
args.hideItems.push('Collapse the Row');
args.hideItems.push('Expand the Row');
} else {
if(record.expanded){
args.hideItems.push("Expand the Row");
} else {
args.hideItems.push("Collapse the Row");
}
}
}
};
render() {
return <GanttComponent dataSource={data} taskFields={this.taskFields} editSettings={this.editSettings} allowSorting={true} allowResizing={true} enableContextMenu={true} contextMenuItems={this.contextMenuItems} contextMenuClick={this.contextMenuClick.bind(this)} contextMenuOpen={this.contextMenuOpen.bind(this)} ref={gantt => this.ganttInstance = gantt} height = '450px'>
<Inject services={[Edit, ContextMenu, Selection, Sort, Resize]} />
</GanttComponent>
}
};
ReactDOM.render(<App />, document.getElementById('root'));
You can show an specific item in context menu for header/content area in the Gantt control by defining the
target
property.