Virtual scroll in EJ2 JavaScript Gantt control

16 Dec 202316 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.

ej.gantt.Gantt.Inject(ej.gantt.Selection);

var ganttChart = new ej.gantt.Gantt({
        dataSource: virtualData,
        treeColumnIndex: 1,
        height: '450px',
        allowSelection: true,
        highlightWeekends: true,
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'parentID'
        },
        enableVirtualization: true,
        columns: [
            { field: 'TaskID' },
            { field: 'TaskName' },
            { field: 'StartDate' },
            { field: 'Duration' },
            { field: 'Progress' }
        ],
        labelSettings: {
            taskLabel: 'Progress'
        },
        gridLines: 'Both',
        splitterSettings: {
            columnIndex: 2
        },
    });
    ganttChart.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/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        
        <div id="container">
            <div id="Gantt"></div>        
        </div>   
 


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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.

ej.gantt.Gantt.Inject(ej.gantt.Selection);

var ganttChart = new ej.gantt.Gantt({
        dataSource: virtualData,
        treeColumnIndex: 1,
        height: '450px',
        allowSelection: true,
        highlightWeekends: true,
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'parentID'
        },
        enableVirtualization: true,
        enableTimelineVirtualization: true,
        columns: [
            { field: 'TaskID' },
            { field: 'TaskName' },
            { field: 'StartDate' },
            { field: 'Duration' },
            { field: 'Progress' }
        ],
        labelSettings: {
            taskLabel: 'Progress'
        },
        gridLines: 'Both',
        splitterSettings: {
            columnIndex: 2
        },
        projectStartDate: new Date('04/01/2019'),
        projectEndDate: new Date('12/31/2025')
    });
    ganttChart.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/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        
        <div id="container">
            <div id="Gantt"></div>        
        </div>   
 


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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.

ej.gantt.Gantt.Inject(ej.gantt.Selection,ej.gantt.Sort,ej.gantt.Filter);
var filteredCount = 0;
var datasetCount;
var ganttChart = new ej.gantt.Gantt({
        dataSource: virtualData,
        treeColumnIndex: 1,
        height: '450px',
        allowSelection: true,
        highlightWeekends: true,
        taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            parentID: 'parentID'
        },
        enableVirtualization: true,
        allowSorting: true,
        allowFiltering: true,
        actionComplete: function (args) {
            if (args.requestType == 'filtering') {
                if (args.rows != null) {
                    filteredCount =
                        ganttChart.treeGrid.filterModule.filteredResult.length;
                    var combinedMessage = `Dataset Count: ${datasetCount} Filtered Count: ${filteredCount}`;
                    var countElement = document.getElementById('count-element');
                    if (countElement) {
                        countElement.textContent = combinedMessage;
                    }
                }
            }
        },
        created:function() {
            datasetCount = ganttChart.flatData.length;
            var combinedMessage = `Dataset Count: ${datasetCount} Filtered Count: ${filteredCount}`;
            var countElement = document.getElementById('count-element');
            if (countElement) {
                countElement.textContent = combinedMessage;
            }
        },
        columns: [
            { field: 'TaskID' },
            { field: 'TaskName' },
            { field: 'StartDate' },
            { field: 'Duration' },
            { field: 'Progress' }
        ],
        labelSettings: {
            taskLabel: 'Progress'
        },
        gridLines: 'Both',
        splitterSettings: {
            columnIndex: 2
        },
    });
    ganttChart.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/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        
        <div id="container">
            <div id="Gantt"></div>   
            <h1>Counts Display</h1>
            <p id="count-element"></p>
        </div>   
 


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Limitations for virtual vcroll

  • 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 height property.
  • It is necessary to mention the height of the Gantt in pixels when enabling Virtual Scrolling.
  • Virtual Scroll does not support Multi Taskbar support in Resource View.