Appearance customization in React Gantt component
15 May 202324 minutes to read
Taskbar customization
Taskbar Height
Height of child taskbars and parent taskbars can be customized by using taskbarHeight
property. The following code example shows how to use the property.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
return <GanttComponent dataSource={data} taskFields={taskFields} rowHeight={50}
taskbarHeight={40} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
return <GanttComponent dataSource={data} taskFields={taskFields} rowHeight={50}
taskbarHeight={40} height = '450px'>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
NOTE
ThetaskbarHeight
value should be lower than therowHeight
property value and these properties accept only pixel values.
Conditional formatting
The default taskbar UI can be replaced with custom templates using the queryTaskbarInfo
event. The following code example shows customizing the taskbar UI based on task progress values in the Gantt component.
let data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 70 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 80 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 70 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
function queryTaskbarInfo(args) {
if (args.data.Progress == 50) {
args.progressBarBgColor = "red";
} else if (args.data.Progress == 70) {
args.progressBarBgColor = "yellow";
} else if (args.data.Progress == 80) {
args.progressBarBgColor = "lightgreen";
}
}
return <GanttComponent dataSource={data} taskFields={taskFields}
queryTaskbarInfo={queryTaskbarInfo} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
let data: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 70 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 80 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 70 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
function queryTaskbarInfo(args: any) {
if (args.data.Progress == 50) {
args.progressBarBgColor = "red";
} else if (args.data.Progress == 70) {
args.progressBarBgColor = "yellow";
} else if (args.data.Progress == 80) {
args.progressBarBgColor = "lightgreen";
}
}
return <GanttComponent dataSource={data} taskFields={taskFields}
queryTaskbarInfo={queryTaskbarInfo} height = '450px'>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Taskbar template
You can design your own taskbars to view the tasks in Gantt by using taskbarTemplate
property. And it is possible to map the template script element’s ID value to this property. It is also possible to customize the parent taskbars and milestones with custom templates by using parentTaskbarTemplate
and milestoneTemplate
properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent } from "@syncfusion/ej2-react-gantt";
import { data } from "./datasource";
function App() {
const taskFields = {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
duration: "Duration",
progress: "Progress",
child: "subtasks"
};
function TaskbarTemplate(props) {
return (
<div
className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"
style=
>
<div
className="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar"
style=
>
</div>
<span
className="e-task-label"
style=
>
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props) {
return (
<div
className="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar"
style=
>
<div
className="e-gantt-parent-progressbar-inner-div e-row-expand e-gantt-parent-progressbar"
style=
>
</div>
<span
className="e-task-label"
style=
>
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props) {
return (
<div className="e-gantt-milestone" style=>
<div
className="e-milestone-top"
style=
/>
<div
className="e-milestone-bottom"
style=
/>
</div>
);
}
return (
<GanttComponent
dataSource={data}
rowHeight={60}
taskFields={taskFields}
taskbarTemplate={TaskbarTemplate}
parentTaskbarTemplate={ParentTaskbarTemplate}
milestoneTemplate={MilestoneTemplate}
height="450px"
/>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { GanttComponent } from "@syncfusion/ej2-react-gantt";
import { data } from "./datasource";
function App() {
const taskFields: any = {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
duration: "Duration",
progress: "Progress",
child: "subtasks"
};
function TaskbarTemplate(props: any) {
return (
<div
className="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"
style=
>
<div
className="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar"
style=
>
</div>
<span
className="e-task-label"
style=
>
{props.TaskName}
</span>
</div>
);
}
function ParentTaskbarTemplate(props: any) {
return (
<div
className="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar"
style=
>
<div
className="e-gantt-parent-progressbar-inner-div e-row-expand e-gantt-parent-progressbar"
style=
>
</div>
<span
className="e-task-label"
style=
>
{props.TaskName}
</span>
</div>
);
}
function MilestoneTemplate(props: any) {
return (
<div className="e-gantt-milestone" style=>
<div
className="e-milestone-top"
style=
/>
<div
className="e-milestone-bottom"
style=
/>
</div>
);
}
return (
<GanttComponent
dataSource={data}
rowHeight={60}
taskFields={taskFields}
taskbarTemplate={TaskbarTemplate}
parentTaskbarTemplate={ParentTaskbarTemplate}
milestoneTemplate={MilestoneTemplate}
height="450px"
/>
);
}
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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Change gripper icon in taskbar
You can change the gripper icon in the taskbar by applying styles to their respective class elements.
const projectResources = [
{ resourceId: 1, resourceName: 'Project Manager' },
{ resourceId: 2, resourceName: 'Software Analyst' },
{ resourceId: 3, resourceName: 'Developer' },
{ resourceId: 4, resourceName: 'Testing Engineer' }
];
const data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3] },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2] },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3FS', Progress: 50, resources: [1] },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [1, 3, 5] },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '7SS', Progress: 50 }
]
},
];
import { GanttComponent, Inject, Edit, Filter, Sort } from '@syncfusion/ej2-react-gantt';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
dependency: 'Predecessor',
resourceInfo: 'resources'
};
const labelSettings = {
rightLabel: 'resources'
};
const editSettings = {
allowEditing: true,
editMode: 'Auto',
allowTaskbarEditing: true
};
const resourceFields = {
id: 'resourceId',
name: 'resourceName',
};
return <GanttComponent dataSource={data} allowFiltering={true} allowSorting={true} taskFields={taskFields} editSettings={editSettings} labelSettings={labelSettings}
resourceFields={resourceFields} resources={projectResources} height='400px'>
<Inject services={[Edit, Filter, Sort]} />
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
const projectResources: object[] = [
{ resourceId: 1, resourceName: 'Project Manager' },
{ resourceId: 2, resourceName: 'Software Analyst' },
{ resourceId: 3, resourceName: 'Developer' },
{ resourceId: 4, resourceName: 'Testing Engineer' }
];
const data: object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3] },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2] },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '3FS', Progress: 50, resources: [1] },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [1, 3, 5] },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '7SS', Progress: 50 }
]
},
];
import { GanttComponent, Inject, Edit, Filter, Sort } from '@syncfusion/ej2-react-gantt';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks',
dependency: 'Predecessor',
resourceInfo: 'resources'
};
const labelSettings: any = {
rightLabel: 'resources'
};
const editSettings: any = {
allowEditing: true,
editMode: 'Auto',
allowTaskbarEditing: true
};
const resourceFields: any = {
id: 'resourceId',
name: 'resourceName',
};
return <GanttComponent dataSource={data} allowFiltering={true} allowSorting={true} taskFields={taskFields} editSettings={editSettings} labelSettings={labelSettings}
resourceFields={resourceFields} resources={projectResources} height='400px'>
<Inject services={[Edit, Filter, Sort]} />
</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/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%;
}
/* change gripper icon */
.e-gantt .e-left-resize-gripper::before,
.e-gantt .e-right-resize-gripper::before {
content: '\e934';
}
.e-gantt .e-left-resize-gripper,
.e-gantt .e-right-resize-gripper {
transform: rotate(90deg);
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Task labels
The Gantt component maps any data source fields to task labels using the labelSettings.leftLabel
, labelSettings.rightLabel
, and labelSettings.taskLabel
properties. You can customize the task labels with templates.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const labelSettings = {
leftLabel: 'TaskID',
rightLabel: 'Task Name: ${taskData.TaskName}',
taskLabel: '${Progress}%'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
labelSettings={labelSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const labelSettings: any = {
leftLabel: 'TaskID',
rightLabel: 'Task Name: ${taskData.TaskName}',
taskLabel: '${Progress}%'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
labelSettings={labelSettings} height = '450px'>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Connector lines
The width and background color of connector lines in Gantt can be customized using the connectorLineWidth
and connectorLineBackground
properties. The following code example shows how to use these properties.
let data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'),Predecessor:"3SS", Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Predecessor:"7FS", Duration: 3, Progress: 50 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
connectorLineWidth={2} connectorLineBackground='#0aecb8' height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
let data: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'),Predecessor:"3SS", Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),Predecessor:"7FS", Duration: 3, Progress: 50 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
return <GanttComponent dataSource={data} taskFields={taskFields}
connectorLineWidth={2} connectorLineBackground='#0aecb8' height = '450px'>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Customize rows and cells
While rendering the TreeGrid part in Gantt, the rowDataBound
and queryCellInfo
events trigger for every row and cell. Using these events, you can customize the rows and cells. The following code example shows how to customize the cell and row elements using these events.
let data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 80 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 60 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3 , Progress: 50 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings = {
columnIndex: 5
};
function customizeCell(args) {
if (args.column.field == "Progress") {
if (args.data.Progress < 60)
args.cell.style.backgroundColor="lightgreen"
else
args.cell.style.backgroundColor="yellow"
}
};
function rowDataBound(args) {
if(args.data.TaskID==4)
args.row.style.backgroundColor="red"
}
return <GanttComponent dataSource={data} taskFields={taskFields}
splitterSettings={splitterSettings} queryCellInfo={customizeCell}
rowDataBound={rowDataBound}
height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
let data: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 80 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 60 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3 , Progress: 50 }
]
},
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings: any = {
columnIndex: 5
};
function customizeCell(args: any) {
if (args.column.field == "Progress") {
if (args.data.Progress < 60)
args.cell.style.backgroundColor="lightgreen"
else
args.cell.style.backgroundColor="yellow"
}
};
function rowDataBound(args: any) {
if(args.data.TaskID==4)
args.row.style.backgroundColor="red"
}
return <GanttComponent dataSource={data} taskFields={taskFields}
splitterSettings={splitterSettings} queryCellInfo={customizeCell}
rowDataBound={rowDataBound}
height = '450px'>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Grid lines
In the Gantt component, you can show or hide the grid lines in the TreeGrid side and chart side by using the gridLines
property.
The following options are available in the Gantt component for rendering the grid lines:
- Horizontal: The horizontal grid lines alone will be visible.
- Vertical: The vertical grid lines alone will be visible.
- Both: Both the horizontal and vertical grid lines will be visible on the TreeGrid and chart sides.
- None: Gridlines will not be visible on TreeGrid and chart sides.
By default, the
gridLines
property is set toHorizontal
type.
The following code example shows how to change the gridlines rendering mode in the Gantt component.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import {data} from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
return <GanttComponent dataSource={data} gridLines='Both' taskFields={taskFields} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import {data} from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
return <GanttComponent dataSource={data} gridLines='Both' taskFields={taskFields} height = '450px'>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Splitter
In the Gantt component, the Splitter separates the TreeGrid section from the Chart section. You can change the position of the Splitter when loading the Gantt component using the splitterSettings
property. By splitting the TreeGrid from the chart, the width of the TreeGrid and chart sections will vary in the component. The splitterSettings.position
property denotes the percentage of the TreeGrid section’s width to be rendered and this property supports both pixels and percentage values. You can define the splitter position as column index value using the splitterSettings.columnIndex
property. You can also define the splitter position with built-in splitter view modes by using the splitterSettings.view
property. The following list is the possible values for this property:
-
Default
: Shows Grid side and Gantt side. -
Grid
: Shows Grid side alone in Gantt. -
Chart
: Shows chart side alone in Gantt.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings = {
position: "80%"
};
return <GanttComponent dataSource={data} taskFields={taskFields}
splitterSettings={splitterSettings} height = '450px'>
</GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
const splitterSettings: any = {
position: "80%"
};
return <GanttComponent dataSource={data} taskFields={taskFields}
splitterSettings={splitterSettings} height = '450px'>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Change splitter position dynamically
In Gantt, we can change the splitter position dynamically by using setSplitterPosition
method. We can change the splitter position by passing value and type parameter to setSplitterPosition
method. Type parameter will accept one of the following values ‘position’, ‘columnIndex’, ‘viewType’. The following code example shows how to use this method.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance;
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
function clickHandler(){
ganttInstance.setSplitterPosition('50%', 'position');
}
function changeindex(){
ganttInstance.setSplitterPosition(0, 'columnIndex');
}
return (<div>
<ButtonComponent onClick= { clickHandler}>ChangeByPosition</ButtonComponent>
<ButtonComponent onClick= { changeindex}>ChangeByIndex</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields}
height = '450px' ref={gantt => ganttInstance = gantt}>
</GanttComponent></div>)
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App(){
let ganttInstance: any;
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
function clickHandler(){
ganttInstance.setSplitterPosition('50%', 'position');
}
function changeindex(){
ganttInstance.setSplitterPosition(0, 'columnIndex');
}
return (<div>
<ButtonComponent onClick= { clickHandler}>ChangeByPosition</ButtonComponent>
<ButtonComponent onClick= { changeindex}>ChangeByIndex</ButtonComponent>
<GanttComponent dataSource={data} taskFields={taskFields}
height = '450px' ref={gantt => ganttInstance = gantt}>
</GanttComponent></div>)
};
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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
Changing splitter view
In the Gantt component, it is possible to change the view of the component to a grid view, a chart view, or both using the dropdown menu. This can be achieved by customizing the toolbar, which allows to add custom toolbar items using the template
attribute.
Refer below link for more details.
To add a custom dropdown menu to the toolbar, use the DropDownList
component which is available in @syncfusion/ej2-react-dropdowns
library.
After enabling the dropdown menu in the toolbar, pass the data to the dataSource
property. To modify the component’s view, use the change
property. To do this, call the setSplitterPosition
method on the ganttInstance
with the value
and type
of splitter property as an parameter, after checking with the user’s choice and the given data condition is true.
The following code example shows, how to enable the dropdown menu in the Toolbar and change view of the Gantt component.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject,Toolbar } from '@syncfusion/ej2-react-gantt';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App() {
let ganttInstance;
const taskFields= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
function onChange(args) {
if(args.value==="1")
{
ganttInstance.setSplitterPosition("100%","position")
}
else if(args.value==="2")
{
ganttInstance.setSplitterPosition("0%", "position");
}
else if(args.value==="3")
{
ganttInstance.setSplitterPosition("50%", "position");
}
}
const items = [
{
item: 'Grid Only',
id:"1"
},
{
item: 'Chart Only',
id:"2"
},
{
item: 'Grid and Chart',
id:"3"
}];
const toolbarOptions = ['ExpandAll','CollapseAll',{type: "Input", tooltipText:"Change View", template: new DropDownList({dataSource:items, placeholder:"Select", change:onChange, fields:{text:'item', value:'id'}})}]
return (<GanttComponent ref={gantt => ganttInstance =gantt} dataSource={data} taskFields={taskFields} toolbar={toolbarOptions} height='450px'>
<Inject services={[Toolbar]}/>
</GanttComponent>);
}
;
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject,Toolbar } from '@syncfusion/ej2-react-gantt';
import { DropDownList } from '@syncfusion/ej2-react-dropdowns';
import { data } from './datasource';
function App() {
let ganttInstance:any;
const taskFields:any= {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
function onChange(args:any) {
if(args.value==="1")
{
ganttInstance.setSplitterPosition("100%","position")
}
else if(args.value==="2")
{
ganttInstance.setSplitterPosition("0%", "position");
}
else if(args.value==="3")
{
ganttInstance.setSplitterPosition("50%", "position");
}
}
const items:any = [
{
item: 'Grid Only',
id:"1"
},
{
item: 'Chart Only',
id:"2"
},
{
item: 'Grid and Chart',
id:"3"
}];
const toolbarOptions:any = ['ExpandAll','CollapseAll',{type: "Input", tooltipText:"Change View", template: new DropDownList({dataSource:items, placeholder:"Select", change:onChange, fields:{text:'item', value:'id'}})}]
return (<GanttComponent ref={gantt => ganttInstance =gantt} dataSource={data} taskFields={taskFields} toolbar={toolbarOptions} height='450px'>
<Inject services={[Toolbar]}/>
</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/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>