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 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.
import { Gantt, Selection, VirtualScroll } from '@syncfusion/ej2-gantt';
import { virtualData } from './data-source';
Gantt.Inject(Selection, VirtualScroll);
let gantt: Gantt = new Gantt({
dataSource: virtualData,
treeColumnIndex: 1,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentID'
},
enableVirtualization: true,
columns: [
{ field: 'TaskID' },
{ field: 'TaskName' },
{ field: 'StartDate' },
{ field: 'Duration' },
{ field: 'Progress' },
],
allowSelection: true,
gridLines: 'Both',
height: '450px',
splitterSettings: {
columnIndex: 2
},
labelSettings: {
taskLabel: 'Progress'
}
});
gantt.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Gantt</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Gantt Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/21.2.3/material.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</script>
</body>
</html>height property.