Maintain zoom to fit in EJ2 JavaScript Gantt control

4 May 20237 minutes to read

In the Gantt control, While performing edit actions or dynamically change dataSource, the timeline gets refreshed. When zoomToFit toolbar item is clicked and perform editing actions or dynamically change dataSource, the timeline gets refreshed. So that, the timeline will not fit to the project any more.

Maintain zoomToFit after edit actions

We can maintain zoomToFit after editing actions(cell edit,dialog edit,taskbar edit) by using fitToProject method in actionComplete and taskbarEdited event.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    allowSelection: true,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        child: 'subtasks'
    },
    toolbar: ['Edit', 'ZoomToFit'],
    editSettings: {
        allowEditing: true,
        allowTaskbarEditing: true,
    },
    labelSettings: {
        leftLabel: 'TaskName'
    },
    projectStartDate: new Date('03/24/2019'),
    projectEndDate: new Date('04/28/2019'),
    taskbarEdited: function(args){
      if (args) {
        var obj = document.getElementById("Gantt").ej2_instances[0];
        obj.dataSource = GanttData;
        obj.fitToProject();
      }
    },
    actionComplete: function (args) {
      if ((args.action === "CellEditing" || args.action === "DialogEditing") && args.requestType === "save") {
        var obj = document.getElementById("Gantt").ej2_instances[0];
        obj.dataSource = GanttData;
        obj.fitToProject();
      }
    }
});
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="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/23.1.36/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>

Maintain zoomToFit after change dataSource dynamically

We can maintain zoomToFit after change dataSource dynamically, by calling fitToProject method in dataBound event.

index.js
index.html
var ganttChart = new ej.gantt.Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        dependency: 'Predecessor',
        child: 'subtasks'
    },
    toolbar: ['ZoomToFit'],
    labelSettings: {
        leftLabel: 'TaskName'
    },
    projectStartDate: new Date('03/24/2019'),
    projectEndDate: new Date('04/28/2019'),
    dataBound: function (args) {
      this.fitToProject();
    }
});
ganttChart.appendTo('#Gantt');

document.getElementById('changeData').addEventListener('click', function () {
  var obj = document.getElementById('Gantt').ej2_instances[0];
  obj.dataSource = data;
});
<!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/23.1.36/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">
        <button id="changeData">Change Data</button>
        <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>