Virtual scroll in React Gantt component
12 Jan 202424 minutes to read
Virtual Scroll support in Gantt allows you to load large amount of data without performance degradation. To enable Virtual Scrolling, you need to inject VirtualScroll module in Gantt.
Row virtualization
Row virtualization allows you to load and render a large number of tasks in Gantt with effective performance. In this mode, all tasks are fetched initially from the datasource and rendered in the DOM within a compact viewport area.
The number of records displayed in the Gantt is determined by the height.
This mode can be enable by setting the enableVirtualization property to true.
let tempData = [
{
TaskID: 1, TaskName: 'Product concept',StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
parentID: 0
},
{
TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
Duration: 3, Progress: 30, parentID: 1
},
{
TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
parentID: 1, Duration: 3
},
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/05/2019'),
Duration: 2, parentID: 1, Progress: 30
},
{
TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/08/2019'),
parentID: 0, Duration: 0
},
{
TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'), parentID: 6
},
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7, Progress: 30
},
{
TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7
},
{
TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6, Progress: 30
},
{
TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6
},
{
TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/18/2019'),
Duration: 0, parentID: 6
},
{
TaskID: 13, TaskName: 'Product design and development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 16, TaskName: 'Define reliability', StartDate: new Date('04/24/2019'),
Duration: 2, Progress: 30, parentID: 13
},
{
TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/24/2019'),
Duration: 2, parentID: 13
},
{
TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/26/2019'),
Duration: 2, Progress: 30, parentID: 18
},
{
TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/26/2019'),
Duration: 2, parentID: 18
},
{
TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/30/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/30/2019'),
Duration: 2, parentID: 21, Progress: 30
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('05/02/2019'),
Duration: 2, parentID: 21
},
{
TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('05/06/2019'),
Duration: 3, parentID: 21
},
{
TaskID: 25, TaskName: 'CAD computer-aided design', StartDate: new Date('05/09/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 26, TaskName: 'CAM computer-aided manufacturing', StartDate: new Date('09/14/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 27, TaskName: 'Design complete', StartDate: new Date('05/16/2019'),
Duration: 0, parentID: 13
},
{
TaskID: 28, TaskName: 'Prototype testing', StartDate: new Date('05/17/2019'),
Duration: 4, Progress: 30, parentID: 0
},
{
TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('05/17/2019'),
Duration: 4, parentID: 0
},
{
TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('05/23/2019'),
Duration: 5, Progress: 30, parentID: 0
},
{
TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('05/30/2019'),
Duration: 5, parentID: 0
},
{
TaskID: 32, TaskName: 'Feedback and testing', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('06/06/2019'),
Duration: 3, parentID: 32, Progress: 45
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('06/11/2019'),
Duration: 3, parentID: 32, Progress: 50
},
{
TaskID: 35, TaskName: 'Final product development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 38, TaskName: 'Final product', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 39, TaskName: 'Branding product', StartDate: new Date('06/20/2019'),
Duration: 4, parentID: 38
},
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('06/26/2019'), Duration: 4,
Progress: 30, parentID: 38
}
];
let virtualData = [];
let projId = 1;
for (let i = 0; i < 50; i++) {
let x = virtualData.length + 1;
let parent = {};
/* tslint:disable:no-string-literal */
parent['TaskID'] = x;
parent['TaskName'] = 'Project ' + (i + 1);
virtualData.push(parent);
for (let j = 0; j < tempData.length; j++) {
let subtasks = {};
/* tslint:disable:no-string-literal */
subtasks['TaskID'] = tempData[j].TaskID + x;
subtasks['TaskName'] = tempData[j].TaskName;
subtasks['StartDate'] = tempData[j].StartDate;
subtasks['Duration'] = tempData[j].Duration;
subtasks['Progress'] = tempData[j].Progress;
subtasks['parentID'] = tempData[j].parentID + x;
virtualData.push(subtasks);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent,ColumnsDirective,ColumnDirective,Inject,Selection, VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App (){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
const splitterSettings = {
columnIndex: 2
};
const labelSettings = {
taskLabel: 'Progress'
};
return (
<GanttComponent dataSource={virtualData} treeColumnIndex={1} labelSettings={labelSettings}
allowSelection={true} highlightWeekends={true} enableVirtualization={true}
taskFields={taskFields} splitterSettings={splitterSettings} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'/>
<ColumnDirective field='TaskName' headerText='Task Name'/>
<ColumnDirective field='StartDate'/>
<ColumnDirective field='Duration'/>
<ColumnDirective field='Progress'/>
</ColumnsDirective>
<Inject services={[Selection, VirtualScroll]} />
</GanttComponent>
)
};
ReactDOM.render(<App />, document.getElementById('root'));let tempData: any[] = [
{
TaskID: 1, TaskName: 'Product concept',StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
parentID: 0
},
{
TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
Duration: 3, Progress: 30, parentID: 1
},
{
TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
parentID: 1, Duration: 3
},
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/05/2019'),
Duration: 2, parentID: 1, Progress: 30
},
{
TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/08/2019'),
parentID: 0, Duration: 0
},
{
TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'), parentID: 6
},
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7, Progress: 30
},
{
TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7
},
{
TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6, Progress: 30
},
{
TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6
},
{
TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/18/2019'),
Duration: 0, parentID: 6
},
{
TaskID: 13, TaskName: 'Product design and development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 16, TaskName: 'Define reliability', StartDate: new Date('04/24/2019'),
Duration: 2, Progress: 30, parentID: 13
},
{
TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/24/2019'),
Duration: 2, parentID: 13
},
{
TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/26/2019'),
Duration: 2, Progress: 30, parentID: 18
},
{
TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/26/2019'),
Duration: 2, parentID: 18
},
{
TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/30/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/30/2019'),
Duration: 2, parentID: 21, Progress: 30
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('05/02/2019'),
Duration: 2, parentID: 21
},
{
TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('05/06/2019'),
Duration: 3, parentID: 21
},
{
TaskID: 25, TaskName: 'CAD computer-aided design', StartDate: new Date('05/09/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 26, TaskName: 'CAM computer-aided manufacturing', StartDate: new Date('09/14/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 27, TaskName: 'Design complete', StartDate: new Date('05/16/2019'),
Duration: 0, parentID: 13
},
{
TaskID: 28, TaskName: 'Prototype testing', StartDate: new Date('05/17/2019'),
Duration: 4, Progress: 30, parentID: 0
},
{
TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('05/17/2019'),
Duration: 4, parentID: 0
},
{
TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('05/23/2019'),
Duration: 5, Progress: 30, parentID: 0
},
{
TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('05/30/2019'),
Duration: 5, parentID: 0
},
{
TaskID: 32, TaskName: 'Feedback and testing', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('06/06/2019'),
Duration: 3, parentID: 32, Progress: 45
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('06/11/2019'),
Duration: 3, parentID: 32, Progress: 50
},
{
TaskID: 35, TaskName: 'Final product development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 38, TaskName: 'Final product', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 39, TaskName: 'Branding product', StartDate: new Date('06/20/2019'),
Duration: 4, parentID: 38
},
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('06/26/2019'), Duration: 4,
Progress: 30, parentID: 38
}
];
let virtualData: any[] = [];
let projId: number = 1;
for (let i: number = 0; i < 50; i++) {
let x: number = virtualData.length + 1;
let parent: any = {};
/* tslint:disable:no-string-literal */
parent['TaskID'] = x;
parent['TaskName'] = 'Project ' + (i + 1);
virtualData.push(parent);
for (let j: number = 0; j < tempData.length; j++) {
let subtasks: any = {};
/* tslint:disable:no-string-literal */
subtasks['TaskID'] = tempData[j].TaskID + x;
subtasks['TaskName'] = tempData[j].TaskName;
subtasks['StartDate'] = tempData[j].StartDate;
subtasks['Duration'] = tempData[j].Duration;
subtasks['Progress'] = tempData[j].Progress;
subtasks['parentID'] = tempData[j].parentID + x;
virtualData.push(subtasks);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent,ColumnsDirective,ColumnDirective,Inject,Selection, VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App (){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
const splitterSettings: any = {
columnIndex: 2
};
const labelSettings: any = {
taskLabel: 'Progress'
};
return (
<GanttComponent dataSource={virtualData} treeColumnIndex={1} labelSettings={labelSettings}
allowSelection={true} highlightWeekends={true} enableVirtualization={true}
taskFields={taskFields} splitterSettings={splitterSettings} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'/>
<ColumnDirective field='TaskName' headerText='Task Name'/>
<ColumnDirective field='StartDate'/>
<ColumnDirective field='Duration'/>
<ColumnDirective field='Progress'/>
</ColumnsDirective>
<Inject services={[Selection, VirtualScroll]} />
</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/27.2.2/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>Timeline virtualization
Timeline virtualization allows you to load a data source having large timespan with high performance. Initially, it renders the timeline with thrice the width of the gantt element, while other timeline cells render on-demand during horizontal scrolling.
This mode can be enable by setting the enableTimelineVirtualization property to true.
let tempData = [
{
TaskID: 1, TaskName: 'Product concept',StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
parentID: 0
},
{
TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
Duration: 3, Progress: 30, parentID: 1
},
{
TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
parentID: 1, Duration: 3
},
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/05/2019'),
Duration: 2, parentID: 1, Progress: 30
},
{
TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/08/2019'),
parentID: 0, Duration: 0
},
{
TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'), parentID: 6
},
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7, Progress: 30
},
{
TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7
},
{
TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6, Progress: 30
},
{
TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6
},
{
TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/18/2019'),
Duration: 0, parentID: 6
},
{
TaskID: 13, TaskName: 'Product design and development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 16, TaskName: 'Define reliability', StartDate: new Date('04/24/2019'),
Duration: 2, Progress: 30, parentID: 13
},
{
TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/24/2019'),
Duration: 2, parentID: 13
},
{
TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/26/2019'),
Duration: 2, Progress: 30, parentID: 18
},
{
TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/26/2019'),
Duration: 2, parentID: 18
},
{
TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/30/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/30/2019'),
Duration: 2, parentID: 21, Progress: 30
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('05/02/2019'),
Duration: 2, parentID: 21
},
{
TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('05/06/2019'),
Duration: 3, parentID: 21
},
{
TaskID: 25, TaskName: 'CAD computer-aided design', StartDate: new Date('05/09/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 26, TaskName: 'CAM computer-aided manufacturing', StartDate: new Date('09/14/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 27, TaskName: 'Design complete', StartDate: new Date('05/16/2019'),
Duration: 0, parentID: 13
},
{
TaskID: 28, TaskName: 'Prototype testing', StartDate: new Date('05/17/2019'),
Duration: 4, Progress: 30, parentID: 0
},
{
TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('05/17/2019'),
Duration: 4, parentID: 0
},
{
TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('05/23/2019'),
Duration: 5, Progress: 30, parentID: 0
},
{
TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('05/30/2019'),
Duration: 5, parentID: 0
},
{
TaskID: 32, TaskName: 'Feedback and testing', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('06/06/2019'),
Duration: 3, parentID: 32, Progress: 45
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('06/11/2019'),
Duration: 3, parentID: 32, Progress: 50
},
{
TaskID: 35, TaskName: 'Final product development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 38, TaskName: 'Final product', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 39, TaskName: 'Branding product', StartDate: new Date('06/20/2019'),
Duration: 4, parentID: 38
},
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('06/26/2019'), Duration: 4,
Progress: 30, parentID: 38
}
];
let virtualData = [];
let projId = 1;
for (let i = 0; i < 50; i++) {
let x = virtualData.length + 1;
let parent = {};
/* tslint:disable:no-string-literal */
parent['TaskID'] = x;
parent['TaskName'] = 'Project ' + (i + 1);
virtualData.push(parent);
for (let j = 0; j < tempData.length; j++) {
let subtasks = {};
/* tslint:disable:no-string-literal */
subtasks['TaskID'] = tempData[j].TaskID + x;
subtasks['TaskName'] = tempData[j].TaskName;
subtasks['StartDate'] = tempData[j].StartDate;
subtasks['Duration'] = tempData[j].Duration;
subtasks['Progress'] = tempData[j].Progress;
subtasks['parentID'] = tempData[j].parentID + x;
virtualData.push(subtasks);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent,ColumnsDirective,ColumnDirective,Inject,Edit, Selection, Toolbar, VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App (){
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
const splitterSettings= {
columnIndex: 2
};
const labelSettings = {
taskLabel: 'Progress'
};
const editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const projectStartDate = new Date('04/01/2019');
const projectEndDate = new Date('12/31/2025');
const toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];
return (
<GanttComponent dataSource={virtualData} treeColumnIndex={1} labelSettings={labelSettings} projectEndDate={projectEndDate}
allowSelection={true} highlightWeekends={true} enableVirtualization={true} enableTimelineVirtualization={true} projectStartDate={projectStartDate}
taskFields={taskFields} splitterSettings={splitterSettings} autoCalculateDateScheduling={false} toolbar={toolbar} editSettings={editSettings} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'/>
<ColumnDirective field='TaskName' headerText='Task Name'/>
<ColumnDirective field='StartDate'/>
<ColumnDirective field='Duration'/>
<ColumnDirective field='Progress'/>
</ColumnsDirective>
<Inject services={[Selection, VirtualScroll,Edit,Toolbar]} />
</GanttComponent>
)
};
ReactDOM.render(<App />, document.getElementById('root'));let tempData: any[] = [
{
TaskID: 1, TaskName: 'Product concept',StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019'),
parentID: 0
},
{
TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'),
Duration: 3, Progress: 30, parentID: 1
},
{
TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'),
parentID: 1, Duration: 3
},
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/05/2019'),
Duration: 2, parentID: 1, Progress: 30
},
{
TaskID: 5, TaskName: 'Concept approval', StartDate: new Date('04/08/2019'),
parentID: 0, Duration: 0
},
{
TaskID: 6, TaskName: 'Market research', StartDate: new Date('04/02/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 7, TaskName: 'Demand analysis', StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'), parentID: 6
},
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7, Progress: 30
},
{
TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/09/2019'),
Duration: 4, parentID: 7
},
{
TaskID: 10, TaskName: 'Competitor analysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6, Progress: 30
},
{
TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/15/2019'),
Duration: 4, parentID: 6
},
{
TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/18/2019'),
Duration: 0, parentID: 6
},
{
TaskID: 13, TaskName: 'Product design and development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019')
},
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/19/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 16, TaskName: 'Define reliability', StartDate: new Date('04/24/2019'),
Duration: 2, Progress: 30, parentID: 13
},
{
TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/24/2019'),
Duration: 2, parentID: 13
},
{
TaskID: 18, TaskName: 'Define cost plan', StartDate: new Date('04/04/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/26/2019'),
Duration: 2, Progress: 30, parentID: 18
},
{
TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/26/2019'),
Duration: 2, parentID: 18
},
{
TaskID: 21, TaskName: 'Development of the final design', StartDate: new Date('04/30/2019'),
parentID: 13, EndDate: new Date('04/21/2019')
},
{
TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/30/2019'),
Duration: 2, parentID: 21, Progress: 30
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('05/02/2019'),
Duration: 2, parentID: 21
},
{
TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('05/06/2019'),
Duration: 3, parentID: 21
},
{
TaskID: 25, TaskName: 'CAD computer-aided design', StartDate: new Date('05/09/2019'),
Duration: 3, parentID: 13, Progress: 30
},
{
TaskID: 26, TaskName: 'CAM computer-aided manufacturing', StartDate: new Date('09/14/2019'),
Duration: 3, parentID: 13
},
{
TaskID: 27, TaskName: 'Design complete', StartDate: new Date('05/16/2019'),
Duration: 0, parentID: 13
},
{
TaskID: 28, TaskName: 'Prototype testing', StartDate: new Date('05/17/2019'),
Duration: 4, Progress: 30, parentID: 0
},
{
TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('05/17/2019'),
Duration: 4, parentID: 0
},
{
TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('05/23/2019'),
Duration: 5, Progress: 30, parentID: 0
},
{
TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('05/30/2019'),
Duration: 5, parentID: 0
},
{
TaskID: 32, TaskName: 'Feedback and testing', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('06/06/2019'),
Duration: 3, parentID: 32, Progress: 45
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('06/11/2019'),
Duration: 3, parentID: 32, Progress: 50
},
{
TaskID: 35, TaskName: 'Final product development', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('06/14/2019'),
Duration: 4, Progress: 30, parentID: 35
},
{
TaskID: 38, TaskName: 'Final product', StartDate: new Date('04/04/2019'),
parentID: 0, EndDate: new Date('04/21/2019'),
},
{
TaskID: 39, TaskName: 'Branding product', StartDate: new Date('06/20/2019'),
Duration: 4, parentID: 38
},
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('06/26/2019'), Duration: 4,
Progress: 30, parentID: 38
}
];
let virtualData: any[] = [];
let projId: number = 1;
for (let i: number = 0; i < 50; i++) {
let x: number = virtualData.length + 1;
let parent: any = {};
/* tslint:disable:no-string-literal */
parent['TaskID'] = x;
parent['TaskName'] = 'Project ' + (i + 1);
virtualData.push(parent);
for (let j: number = 0; j < tempData.length; j++) {
let subtasks: any = {};
/* tslint:disable:no-string-literal */
subtasks['TaskID'] = tempData[j].TaskID + x;
subtasks['TaskName'] = tempData[j].TaskName;
subtasks['StartDate'] = tempData[j].StartDate;
subtasks['Duration'] = tempData[j].Duration;
subtasks['Progress'] = tempData[j].Progress;
subtasks['parentID'] = tempData[j].parentID + x;
virtualData.push(subtasks);
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent,ColumnsDirective,ColumnDirective,Inject,Edit, Selection, Toolbar, VirtualScroll } from '@syncfusion/ej2-react-gantt';
function App (){
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
const splitterSettings: any = {
columnIndex: 2
};
const labelSettings: any = {
taskLabel: 'Progress'
};
const editSettings: any = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
const toolbar: any = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Indent', 'Outdent'];
const projectStartDate: Date = new Date('04/01/2019');
const projectEndDate: Date = new Date('12/31/2025');
return (
<GanttComponent dataSource={virtualData} treeColumnIndex={1} labelSettings={labelSettings} projectEndDate={projectEndDate}
allowSelection={true} highlightWeekends={true} enableVirtualization={true} enableTimelineVirtualization={true} projectStartDate={projectStartDate}
taskFields={taskFields} splitterSettings={splitterSettings} autoCalculateDateScheduling={false} toolbar={toolbar} editSettings={editSettings} height='450px'>
<ColumnsDirective>
<ColumnDirective field='TaskID'/>
<ColumnDirective field='TaskName' headerText='Task Name'/>
<ColumnDirective field='StartDate'/>
<ColumnDirective field='Duration'/>
<ColumnDirective field='Progress'/>
</ColumnsDirective>
<Inject services={[Selection, VirtualScroll,Edit,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/27.2.2/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>Get filtered data when virtual scrolling is enabled
While enabling virtual scroll you can get the filtered or sorted record count using filteredResult from the filterModule of the treegrid inside the actionComplete event.
The following code example shows how to get filtered data count in the gantt control.
import * as React from 'react';
import { useState } from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Sort, VirtualScroll, Selection, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
import { virtualData } from './datasource';
function App(){
const [filteredCount, setFilteredCount] = useState(0);
const [datasetCount, setdatasetCount] = useState(0);
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
const splitterSettings= {
columnIndex: 2
};
let ganttInstance;
function actionComplete(args) {
if (args.requestType === 'filtering') {
if (args.rows != null) {
setFilteredCount(ganttInstance.treeGrid.filterModule.filteredResult.length);
}
}
};
function created() {
setdatasetCount(ganttInstance.flatData.length);
}
return (
<div>
<GanttComponent dataSource={virtualData} taskFields={taskFields} splitterSettings={splitterSettings} enableVirtualization={true} allowSorting={true} allowFiltering={true} height='450px' ref={gantt => ganttInstance = gantt} created={created} actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width= '120'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Filter, Selection, Sort, VirtualScroll]}/>
</GanttComponent>
<div>
<p>
<b>Dataset Count:</b> {datasetCount}
</p>
<p>
<b>Filtered Count:</b> {filteredCount}
</p>
</div>
</div>);
};
ReactDOM.render(<App />, document.getElementById('root'));import * as React from 'react';
import { useState } from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Filter, Sort, VirtualScroll, Selection, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-gantt';
import { virtualData } from './datasource';
function App(){
const [filteredCount, setFilteredCount] = useState(0);
const [datasetCount, setdatasetCount] = useState(0);
const taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
};
const splitterSettings= {
columnIndex: 2
};
let ganttInstance: any;
function actionComplete(args: any) {
if (args.requestType === 'filtering') {
if (args.rows != null) {
setFilteredCount(ganttInstance.treeGrid.filterModule.filteredResult.length);
}
}
};
function created() {
setdatasetCount(ganttInstance.flatData.length);
}
return (
<div>
<GanttComponent dataSource={virtualData} taskFields={taskFields} splitterSettings={splitterSettings} enableVirtualization={true} allowSorting={true} allowFiltering={true} height='450px' ref={gantt => ganttInstance = gantt} created={created} actionComplete={actionComplete}>
<ColumnsDirective>
<ColumnDirective field='TaskID' width= '120'></ColumnDirective>
<ColumnDirective field='TaskName'></ColumnDirective>
<ColumnDirective field='StartDate'></ColumnDirective>
<ColumnDirective field='Duration'></ColumnDirective>
<ColumnDirective field='Progress'></ColumnDirective>
</ColumnsDirective>
<Inject services={[Filter, Selection, Sort, VirtualScroll]}/>
</GanttComponent>
<div>
<p>
<b>Dataset Count:</b> {datasetCount}
</p>
<p>
<b>Filtered Count:</b> {filteredCount}
</p>
</div>
</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/27.2.2/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>Limitations for virtual scroll
- Due to the element height limitation in browsers, the maximum number of records loaded is limited by the browser capacity.
- Cell selection will not be persisted.
- The number of records rendered will be determined by the
heightproperty. - It is necessary to mention the height of the Gantt in pixels when enabling Virtual Scrolling.