Search results

Set Scroll Top in JavaScript (ES5) Gantt control

20 Apr 2021 / 1 minute to read

In the Gantt control, you can set the vertical scroller position dynamically by clicking the custom button using the setScrollTop method.

Source
Preview
index.js
index.html
Copied to clipboard
var ganttChart = new ej.gantt.Gantt({
        dataSource: ganttData,
		height:'450px',
		taskFields: {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
			duration: 'Duration',
            progress: 'Progress',
			child: 'subtasks'
        },
		splitterSettings:{
		  position: "50%"
		}
});
ganttChart.appendTo('#Gantt');

var scrollBtn= new ej.buttons.Button();
scrollBtn.appendTo('#scrollTop');

document.getElementById('scrollTop').addEventListener('click', function() {
    ganttChart.ganttChartModule.scrollObject.setScrollTop(300);
});
Copied to clipboard
<!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="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
       
    
	  <button id="scrollTop">Change Scroll Position</button>  
    <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>