Search results

Set Scroll Top in JavaScript Gantt control

22 Jul 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.ts
index.html
Copied to clipboard
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);
});
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="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>