Search results

Set Scroll Top in JavaScript Gantt control

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

Source
Preview
index.ts
index.html
import { Gantt, Edit, Selection } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { data } from 'datasource.ts';

Gantt.Inject(Edit, Selection);

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    },
    splitterSettings: {
        position: "50%"
    }
});
gantt.appendTo('#Gantt');

let scrollBtn: Button = new Button();
scrollBtn.appendTo('#scrollTop');

document.getElementById('scrollTop').addEventListener('click', () => {
    gantt.ganttChartModule.scrollObject.setScrollTop(300);
});
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
	<script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
       
    <div id='loader'>Loading....</div>
	  <button id="scrollTop">Change Scroll Position</button>  
    <div id='container'>
        <div id='Gantt'></div>        
    </div>
</body>

</html>